Projektuj Animacje UI z Lottie Files i After Effects: Wykorzystanie animacji w Webflow

0:00OK, jestem zalogowany w moim Wordzie i jestem w folderze Web Kurs.

0:04Mam tutaj manetkę, którą przygotowaliśmy wcześniej oraz naszą animację alias.

0:10Teraz będę chciał ją pobrać i może pobierzemy sobie dolot,

0:14który waży 400 niecałe 450 kb.

0:18Wybieram download a następnie ten plik lot i załaduje sobie do Web flow.

0:25Ja overflow zazwyczaj mam otwarte w chromie, ponieważ wydaje mi się, że na

0:28safari działa to troszeczkę gorzej, więc przeniosę się do Chroma i mam tutaj prosty

0:33landing page, w zasadzie złożony tylko z menu głównego sekcji Chrome i z footer.

0:40Natomiast musimy tutaj załadować nasz plik do melodii i zrobimy to w taki sposób, że

0:46umieścimy go tutaj w tej sekcji header, ale tutaj po prawej stronie obok

0:53tego bloku tekstowego, więc musimy przejść do sekcji assets i nic tutaj nie mamy.

1:00Oczywiście możemy filtrować np.

1:03możemy sobie włączyć all assets albo tylko images albo lotion.

1:09I teraz po prostu ja wybieram sobie tą chmurkę, aby

1:15móc przeglądać foldery na dysku mojego komputera i załaduje sobie nasz plik.

1:20LOT sloty.

1:22Wybieram alias Main Animation sloty, wybieram Open i plik został załadowany.

1:29Możemy filtrować, widzimy nasz lot.

1:32I teraz to co jest fajne to mogę np stworzyć sobie

1:37ID albo kontener i wrzucić do niego loty albo

1:42bezpośrednio wrzucić ten lot i nie do kontenera 2 który jest blokiem

1:47tekstowym, a do naszego a do naszego header component.

1:55I teraz widzimy, że nie jest to dobrze ułożone, bo

1:59jest to po lewej stronie tekstu i dodatkowo dotyka się tutaj z tym tekstem.

2:05Nie mamy żadnego marginesu pomiędzy.

2:08Więc zwyczajnie ja po prostu te dwa elementy w nawigatora zamienię miejscami.

2:17Tutaj ten kontener wydaje mi się, że ma tutaj margines.

2:26Tak, jest 80 80 pikseli, mam tutaj margines, więc fajnie jest

2:31to odseparowane od tej animacji.

2:34Ona jest tutaj dosyć duża, więc też możemy sobie kliknąć na ten

2:38nasz lot animation i np.

2:40ustawić size.

2:42Wysokość ustawmy na 700 pikseli.

2:49A szerokość niech będzie automatyczna.

2:54No i teraz wygląda to znacznie, znacznie lepiej.

2:57Możemy jeszcze tutaj dodać jedną rzecz.

3:00Może jakieś światło pod spodem?

3:03Więc wybierzmy sobie box Box Shadow i możemy wybrać ikonkę plusa.

3:08Następnie wybierzemy Blur 20 pikseli size może troszeczkę większy i

3:15teraz mamy tutaj kolor taki czarny, więc może wybierzemy coś bardziej

3:19fioletowego i jaśniejszego, ale może.

3:24W ten sposób?

3:26OK, tutaj możemy sterować transparentności.

3:34Nie podobają mi się takie ostre narożniki, więc jeszcze dodatkowo.

3:37Ewentualnie możemy przejść do sekcji border i ustawić na 20 pikseli.

3:47W porządku, tak to wygląda.

3:49Możemy sobie teraz w Web Flow podejrzeć naszą stronę wybierając Preview.

4:04I wygląda na to, że wszystko dobrze się wyświetla.

4:08Wszystko działa dokładnie tak, jak zaprojektowaliśmy.

4:20Możemy wybrać Command Minus. minus.

4:24Zobaczyć jak strona będzie wyglądała na szerszym ekranie.

4:30I ok.

4:31To jest w zasadzie to, co ja robię w Web Flow z animacją LOT i

4:36po prostu ją tutaj osadzać.

4:37Ale naturalnie mamy jeszcze szereg innych możliwości, o których opowiem

4:43również w trakcie tego kursu.

4:45A na teraz w tej lekcji to już wszystko.

4:47Zapraszam Cię do lekcji następnej.