Concrete 5.7.5+ - jak użyć wbudowanej paralaksy?
Od wersji 5.7.5 Concrete 5 oferuje paralaksę, ale trudno się do niej dokopać i nie do końca jasne jest jak tego właściwie użyć (dokumentacja w tym zakresie jest dość enigmatyczna).
Spróbujmy zatem rozjaśnić temat....
Na początek najważniejsze - paralaksa dostępna jest dla układów. Próżno zatem szukać osobnego bloku, który by tą funkcjonalność realizował i przy tworzeniu strony trzeba przewidzieć zastosowanie układu w naszym szablonie.
Do testów posłuży nam czysty szablon Elemental.
Zaczynamy od wstawienia układu - w naszym przykładzie wrzucamy układ do przestrzeni "Główna", czyli klikamy tą przestrzeń lewym przyciskiem i wybieramy Dodaj układ. Ustawiamy siatkę Twitter Bootstrap i jedną kolumnę po czym klikamy Dodaj układ. W szablonie pojawia nam się przestrzeń Kolumna 1.
Teraz trzeba dodatkowo skonfigurować ten układ - klikamy przestrzeń Kolumna 1 lewym przyciskiem i wybieramy Edytuj układ. Pojawia się standardowa belka z ikonami w której klikamy kółko zębate. W wyświetlonej formatce, w polu Szablon niestandardowy wybieramy Paralaksa. Teraz układowi dodajemy jeszcze tło, czyli klikamy ikonę Kolor i obraz tła i dodajemy tez obraz tła + pasujące nam ustawienia (np. no-repeat, cover i center center). Teraz zapisujemy ustawienia układu.
Do układu wrzucamy teraz jakiś blok, który będzie w nim wyświetlany. W naszym przykładzie posłużymy się blokiem tekst, do którego wrzucimy jakiś kawał lorem ipsum i żeby coś było widać weźmiemy gotowy styl zielonych tytułów z Elemental. Zapisujemy blok i publikujemy zmiany
That's it!
Działa, tzn. tło przy skrolowaniu strony przesuwa się wolniej niż tekst z bloku znajdującego się wewnątrz naszego układu parallax.
Słabo widać?
Zajrzyj do view.js w /concrete/blocks/core_area_layout/templates/parallax gdzie znajdziesz parametr speed.
Spróbujmy zatem rozjaśnić temat....
Na początek najważniejsze - paralaksa dostępna jest dla układów. Próżno zatem szukać osobnego bloku, który by tą funkcjonalność realizował i przy tworzeniu strony trzeba przewidzieć zastosowanie układu w naszym szablonie.
Do testów posłuży nam czysty szablon Elemental.
Zaczynamy od wstawienia układu - w naszym przykładzie wrzucamy układ do przestrzeni "Główna", czyli klikamy tą przestrzeń lewym przyciskiem i wybieramy Dodaj układ. Ustawiamy siatkę Twitter Bootstrap i jedną kolumnę po czym klikamy Dodaj układ. W szablonie pojawia nam się przestrzeń Kolumna 1.
Teraz trzeba dodatkowo skonfigurować ten układ - klikamy przestrzeń Kolumna 1 lewym przyciskiem i wybieramy Edytuj układ. Pojawia się standardowa belka z ikonami w której klikamy kółko zębate. W wyświetlonej formatce, w polu Szablon niestandardowy wybieramy Paralaksa. Teraz układowi dodajemy jeszcze tło, czyli klikamy ikonę Kolor i obraz tła i dodajemy tez obraz tła + pasujące nam ustawienia (np. no-repeat, cover i center center). Teraz zapisujemy ustawienia układu.
Do układu wrzucamy teraz jakiś blok, który będzie w nim wyświetlany. W naszym przykładzie posłużymy się blokiem tekst, do którego wrzucimy jakiś kawał lorem ipsum i żeby coś było widać weźmiemy gotowy styl zielonych tytułów z Elemental. Zapisujemy blok i publikujemy zmiany
That's it!
Działa, tzn. tło przy skrolowaniu strony przesuwa się wolniej niż tekst z bloku znajdującego się wewnątrz naszego układu parallax.
Słabo widać?
Zajrzyj do view.js w /concrete/blocks/core_area_layout/templates/parallax gdzie znajdziesz parametr speed.
Bardzo ciekawy wpis. Jeżeli potrzebujesz firmy, która zajmuje się outsourcingiem to polecam firmę https://7l.pl.
OdpowiedzUsuń