[im3] ⭐ Moduł informacyjny - paralax ⭐

Szeroki moduł informacyjny z tłem parallax/fixed, nakładką, pozycjonowanym boxem treści, typografią i CTA.

Do czego służy moduł?

Moduł informacyjny — parallax tworzy szeroką sekcję z grafiką w tle, opcjonalną nakładką, boxem z tytułem i podtytułem oraz przyciskiem CTA. Może służyć jako baner promocyjny, komunikat o dostawie, wyróżnienie kategorii albo sekcja wizerunkowa.

Szybka konfiguracja

Wpisz unikalną klasę modułu — bez niej sekcja nie zostanie wyrenderowana.
Wgraj grafikę tła.
Ustaw wysokość sekcji osobno dla desktopu i mobile.
Wpisz tytuł, podtytuł i opcjonalny przycisk.
Ustaw pozycję boxa oraz jego tło, przezroczystość, border i zaokrąglenia.
Opcjonalnie włącz nakładkę na całe tło i efekt fixed background.

Ważne: unikalna klasa jest wymagana

Źródłowy Twig renderuje moduł tylko wtedy, gdy jednocześnie Włącz moduł jest aktywne i pole Unikalna klasa modułu nie jest puste. Dla każdej kopii modułu najlepiej użyć innej klasy.

Konfiguracja modułu

Symulator odwzorowuje ustawienia Shopera. Wszystkie pola wpływające na output są oznaczone jako LIVE. Jedynym elementem S jest techniczny infobox o unikalnej klasie.

Jak działa efekt parallax?

Opcja Włącz efekt fixed background przełącza właściwość CSS background-attachment pomiędzy fixed i scroll. Grafika jest dodatkowo ładowana leniwie przez źródłowy JavaScript, gdy sekcja znajdzie się w pobliżu viewportu.

Zachowanie na mobile

Dla szerokości do 991 px źródło używa osobnej wysokości sekcji i osobnej pozycji tła. Padding obszaru treści jest wtedy ustawiony na stałe na 24 px 20 px, a box korzysta z pola Padding boxa na mobile zamiast czterech osobnych paddingów desktopowych.

Szczegóły techniczne

Grafika tła jest przekazywana do atrybutu data-bg. Skrypt tworzy obiekt Image i ustawia background-image dopiero po wejściu sekcji w obszar około 300 px od viewportu. Po załadowaniu dodaje klasę is-bg-loaded. Moduł ponownie inicjalizuje lazy loading po zdarzeniu PageManager.loaded w Storefront.