Ventoro Exploded View to wtyczka WordPress dodająca interaktywną sekcję hero w stylu „exploded view” — czyli rozkładowego widoku części samochodowych. Przeznaczona do stron sklepów z częściami karbonowymi (domyślnie Porsche 911). Wtyczka osadzana jest za pomocą shortcode.

Co widzi użytkownik

Pełnoekranowa sekcja  na czarnym tle z subtelną siatką i delikatną poświatą. Na środku zdjęcie samochodu, a wokół niego rozmieszczone pływające grafiki pięciu części karbonowych:

Jak działa interakcja

Hover na części: po najechaniu kursorem na dowolną część dzieje się kilka rzeczy jednocześnie:

• część powiększa się  i dostaje biały glow
• wszystkie pozostałe części przyciemniają się i desaturują.
• pojawia się tag z nazwą, specyfikacją materiału i redukcją masy
• z centrum części rysuje się animowana linia SVG biegnąca do punktu zakotwiczenia na samochodzie — linia „rysuje się” płynnie
• na końcu linii pojawia się biały punkt z pulsującym pierścieniem
• odpowiadający przycisk w dolnym pasku podświetla się

Klik w dolny pasek: aktywuje ten sam efekt co hover dla wybranej części, ale utrzymuje go przez 2,8 sekundy, a następnie automatycznie wycisza — bez konieczności ruszania myszą. Przydatne na urządzeniach dotykowych.

Auto-demo: jeśli użytkownik nie wchodzi w interakcję przez 4 sekundy od załadowania, wtyczka sama uruchamia pętlę demonstracyjną — kolejno aktywuje każdą część w odstępach 2,8 sekundy. Demo zatrzymuje się natychmiast, gdy kursor wejdzie na sekcję.

Animacje wejścia

Wszystkie części pojawiają się przy załadowaniu strony z opóźnieniami kaskadowymi, wlatując z efektem sprężyny. Rozmiar każdej części jest skalowany proporcjonalnie do szerokości hero, dzięki czemu widok poprawnie wygląda na każdej rozdzielczości.