Webflow: Animacje na stronie cz. 1

Webflow 2020+

0:00Cześć. Jesteśmy już na ukończeniu naszej strony i teraz wypadałoby ją po prostu

0:03przetestować zobaczyć jak wygląda na różnych urządzeniach dopracować różne

0:07elementy dodać jakieś animacje i przykładowo.

0:10Na pierwszy rzut oka to menu które przykrywa nam cała zawartość strony.

0:14Można by było w pewien sposób wyróżnić dlatego że ono teraz zlewa się idealnie z

0:19zawartością strony i nie wszędzie wygląda to ok, a dodatkowo

0:23w momencie gdy najedziemy na jakieś elementy wychodzi na to że

0:27jednak ono nie jest na górze tylko jest przykrywane np.

0:30tutaj i w tym miejscu też jest

0:32przykrywane przez inne elementy strony jak można to poprawić.

0:35Najpierw zajmijmy się właśnie tym przykrywaniem i zaznaczmy cały header.

0:39Następnie przejdźmy do jego ustawień w sekcji position.

0:42W momencie gdy nadajemy jakąś pozycję dla elementu.

0:45Wtedy staje się aktywna taka opcja.

0:48Taka właściwość jak indeks Z-Indeks wpływa na to w jaki sposób jedne elementy

0:54wyświetlają się na drugim bądź pod drugimi.

0:56Jeśli nadamy tutaj jakąś wysoką wartość np.

0:59sto to oznacza że wszystkie elementy z

1:02mniejszą wartością z-indeks będą wyświetlać się pod spodem.

1:05To coś jak warstwy Photoshopie.

1:07Jeżeli masz bardzo dużo warstw te które są wyżej czyli w tym przypadku mają wyższą

1:11wartość z-indeks będą wyświetlane zawsze na górze więc ustawiamy sobie sto i

1:17w ten sposób będziemy mieli pewność że będzie się to wyświetlać nad większością

1:21elementów które będą nawet miał jakiś z-indeks na dane.

1:24I to rozwiązuje nasz problem natomiast nie

1:26rozwiązuje problemu z lewania się z stroną.

1:29I w tym celu moglibyśmy skorzystać z jeszcze jednej interakcji takiej której

1:33jeszcze nie omawialiśmy czyli której triggerem jest tzw.

1:36page trigger.

1:37Tutaj jest kilka opcji do wyboru, a jedną z nich jest page scrolled możemy wykonać

1:42animację w momencie gdy nasza strona zostanie zeskrolowana.

1:45Czyli wybierzmy tę opcję i teraz kiedy

1:49skrolowujemy do góry kiedy skrolowujemy w dół.

1:51My chcemy zrobić, że jak zaczniemy skrolować w dół czyli when scroll down

1:55dodamy tutaj własną animację i to co jest ciekawe można zadeklarować

2:00jakiś offset czyli nie musi to być od razu od samej góry przy skrolowaniu ale na

2:05przykład jeżeli ktoś przez skrolowuje powyżej dziesięciu procent widocznej w

2:10obrębie jego przeglądarki strony jeśli ktoś ma przykładowo wysokość strony tysiąc

2:16to jeśli przez skrolowuje o sto pikseli dopiero ta animacja zacznie się odtwarzać

2:20my będziemy musieli stworzyć kolejną animację Header shadow.

2:24Jeśli teraz jednak wybierzemy action to okaże się że nasz problem polega na tym że

2:28nie ma tutaj właściwości efektów nie ma właściwości cienia więc nie jesteśmy w

2:32stanie z pomocą tej transformacji tym cieniem manipulować.

2:35Jeśli tutaj czegoś nie ma wcale nie znaczy że nie możemy tego sobie jakoś shakować i

2:41wymyślić na przykład że zrobimy dodatkowy element czyli spróbujemy wyemulować ten

2:47sam header czyli dodamy div bloc który będzie miał dokładnie takie same rozmiary

2:52jak header może on być powyżej spróbujmy ustawić go i pozycję mu dać Fix

2:58tak samo jak header żeby wyciągnąć go z tego normalnego obiegu dokumentu.

3:02Teraz tutaj damy na full wideo ale dolną krawędź postawimy na auto

3:07i wysokość jakąś my ustawiamy wysokość taką dokładnie jak ma nasz header my nie

3:11do końca znamy tą wysokość headera ale zaraz próbujemy ją jakoś wymyślić.

3:15Najpierw jednak dodam jakieś box shadow

3:18czyli zróbmy cień na dole distance 1, blur 3 jeszcze tego tutaj nie

3:22widać bo nie mamy żadnej wysokości nadanej.

3:25Więc może najpierw nadajmy wysokość czyli

3:28przykładowo high zrobimy sobie tutaj 150 pikseli i teraz już ten cień widać.

3:34I ten element jak gdyby podąża dokładnie

3:37tak jak chcieliśmy ponieważ ma właściwość fix.

3:40Ale ustawiamy się może tutaj po to żeby

3:43teraz strzałkami na klawiaturze można było z shiftem

3:47dopasować wysokość tego headera dokładnie

3:50do wysokości headera którą mamy w tym trybie desktop-wym.

3:53Może desktop-ie to zrobimy bo chciałem

3:55pokazać ci właśnie taką metodę działania i teraz affter shadow możemy dostosować w

3:59ten sposób że distance może trochę nawet zwiększymy blur czyli rozmycie znacznie

4:05zwiększymy no i możemy też manipulować rozmiarem zobacz jak to się zmienia w

4:10każdym razie będziemy na pewno chcieli mocno zdjąć oppacity żeby zrobić taki

4:16właśnie delikatny cień i zainicjumy go na razie z oppacity zero.

4:20Czy nie będzie go widać.

4:22Natomiast wracając do animacji ten element trigger upewnił się że właśnie

4:27mamy page scrolled Header shadow, a w momencie gdy zaczniemy

4:30skrolować zaznaczone header shadow teraz dodajmy do niego akcje

4:34oppacity i zwiększamy to oppacity do stu procent.

4:39I to już powinno nam wystarczyć spróbujmy podejrzeć command shift p

4:43i przez skrolujemy.

4:45Jak widzisz w momencie kiedy skroluje na tą odległość większą niż

4:49dziesięć procent strony nic nie dzieje ale w momencie gdy

4:52skrolujemy dalej to automatycznie się cień się nam pojawia.

4:55Problem jest taki że po pierwsze on jest

4:57trochę za duży zaraz go zmniejszymy ale po drugie nie znika.

5:00Jak dojeżdżamy do samej góry więc to

5:02trzeba byłoby poprawić czyli stworzyć sobie animację.

5:06When scroll up teraz wybieramy start

5:08animation i znów dopasowujemy offset tym razem zróbmy go też na 10 proc.

5:12to będzie tym razem offset od dołu zrobimy kolejną animację i to będzie header shadow

5:19close na przykład ustawiamy się na odpowiednim elemencie dodajemy do niego

5:23kolejne oppacity i zmniejszamy oppacity do zera.

5:27Teraz command shift p podglądamy

5:30zjeżdżamy pojawia się wjeżdżamy do góry znika zobacz że całkiem fajnie to jest

5:35zrobione ponieważ to zniknięcie jest animowane.

5:39To nie jest tak że on tak jakby mocno 0:1 się pojawia tylko mamy taki delikatne

5:44wejście tego cienia i tak samo się znika do oppacity zero.

5:49My będziemy chcieli może trochę zmodyfikować jego właściwość tego cienia

5:54bo jest za mocny damy tutaj może oppacity znacznie zmniejsze rzędu 15.

6:00I teraz jest ok czyli jedną rzecz mamy fajnie zrobioną.

6:04Możesz to oczywiście dopracować.

6:05A kolejna rzecz którą chciałbym zrobić to być może jeszcze efekty na tych trochę

6:10mało ta nasza strona jest taka interaktywna.

6:12Co prawda tutaj mamy hoover ale na tych kafelkach jeszcze przydałby się bardzo

6:16podobny efekt do tego który przykładowo mamy tutaj.

6:19Myślę że fajnie by to wyglądało.

6:20Tego typu animacje są dość proste ale tak

6:23jak wspominałem wcześniej nie robimy ich na hover mamy features block i robimy to z

6:28pomocą znowu interakcji element trigger po najechaniu mouse

6:32hover ponieważ chcemy mieć jakąś delikatną tranzycje czyli po najechać.

6:37Zrobimy sobie start in animation lub wybierzemy coś gotowego.

6:42Natomiast raczej gotowe efekty są takie zdecydowanie za mocne na web .

6:46Myślę że powinno się trochę zmienić bo w tym momencie w zasadzie chyba nigdy prawie

6:51z nich nie korzystałem i możemy zrobić featured block hover.

6:57Następnie dodamy do tego akcję która będzie wszystko nam skasowała

7:01przez dwie dziesiąte sekundy i skalę zrobimy po iksie , grecku

7:07zero kropka dziewięćdziesiąt pięć procent czyli troszeczkę to zmniejszymy done.

7:12Kolejna animacja on hoover out start animation zrobimy następną nazwijmy ją

7:17feature block hover out i po prostu to odwrócimy.

7:21Czyli plus i teraz wybieramy znowu z scale

7:25tym razem będziemy chcieli skalować do jednego i znowu przez dwie dziesiąte

7:31sekundy po zatwierdzeniu upewnie się jeszcze że t

7:34rigger settings jest ustawiony na class jest czyli dla wszystkich features block

7:37będzie ta animacja występować i teraz już po wyglądzie mogę sobie zobaczyć.

7:42No i fajnie to wygląda delikatnie się te kafelki zmieniają.

7:45I właśnie takie małe rzeczy bardzo cieszą.

7:48A jak widzisz można je zrobić w minutę w webflow.

7:50Więc wydaje mi się że naprawdę warto warto popracować nad naszą stroną.

7:54Może nie oczywiście żeby była jakaś przesadnie animowana żeby wszystko gdzieś

7:58latało żeby się wszystko kręciło ale takie delikatne rzeczy można zrobić i na teraz

8:03to wszystko ale w kolejnej lekcji pokażę ci jeszcze jeden pomysł na animację taką

8:07animację otwierającą dla pojawiania się różnych elementów na naszej stronie.

8:10Do usłyszenia.