Kto nie lubi animacji? Animacja odgrywa dużą rolę w projektowaniu stron internetowych. Dziś dowiemy się, jak tworzyć kształty za pomocą CSS i jak dodawać do nich efekty animacji. Kiedyś korzystaliśmy z rozwiązań HTML, takich jak Canvas czy SVG, aby dodać takie niestandardowe animacje do strony internetowej, ale dzisiaj zobaczymy, jak można zaprojektować taki wizualny paradygmat w Divi za pomocą niestandardowego CSS.
Najpierw dowiemy się, jak stworzyć niestandardowy kształt za pomocą CSS, a następnie zapewnić unikalny efekt przewijania. Całość zrobimy korzystając z wbudowanych funkcji Divi . Więc zacznijmy.
Zapowiedź
Tak będzie wyglądał nasz ostateczny projekt.
Animowane niestandardowe kształty za pomocą CSS
Dodaj: wiersz do sekcji początkowej
Najpierw dodamy zaznaczoną strukturę wierszy obrazu do głównej sekcji strony.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć teraz
Teraz wprowadź kilka zmian w ustawieniach wiersza karty projektu.
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Wyrównaj wysokości kolumn: TAK
- Szerokość: 95%
- Maksymalna szerokość: 900px
Dodaj: moduł dzielnika
Dodamy moduł dzielnika dla odstępów w kolumnie, która będzie zawierała kształty CSS.
Teraz otwórz ustawienia dzielnika i wprowadź następujące zmiany.
- Pokaż dzielnik: NIE
- Wysokość: 150px
Ponieważ wartość pozycji naszych kształtów będzie - bezwzględna, możemy dostosować odstępy między kolumnami, dostosowując wysokość przegrody. W ten sposób możesz również dostosować przegrodę jako element projektu.
Kształt CSS nr 1
Teraz stworzymy kształty CSS za pomocą modułu dzielnika. Użyję obramowania otoczenia modułu dzielnika do tworzenia kształtów, a nie modułu, aby później użyć innych modułów, takich jak moduł tekstowy lub kod. Teraz sklonuj poprzedni moduł dzielnika.
Teraz edytuj zgodnie z instrukcjami poniżej.
- Szerokość: 0px
- Wysokość: 0px
Opcje obramowania
Teraz utworzymy trójkąt wskazujący na prawą górną część. Dokonaj zmian w obramowaniu przegrody, aby stworzyć ten projekt. Oznacz zduplikowaną przegrodę jako - Kształt 1. Będzie to pomocne w przyszłej identyfikacji.
- Kolor obramowania: rgba (28,160,96,0,5)
- Szerokość górnej krawędzi: 150px
- Szerokość lewej krawędzi: 150px
- Kolor lewej krawędzi: przezroczysty
Ponieważ do naszych projektów dodamy później animacje przewijania, wartość pozycji musi być bezwzględna w tym kształcie i kształtach, które stworzymy z wyprzedzeniem, ponieważ elementy powinny pozostać w prawidłowej kolejności. Pamiętaj - wszystkie kształty mają ten sam punkt początkowy. W tym celu zmień następujące wartości.
- Pozycja: bezwzględna
- Lokalizacja pozycji: u góry po prawej (domyślnie)
Właśnie stworzyliśmy nasz pierwszy trójkąt CSS. Teraz przejdźmy dalej.
Kształt CSS nr 2
Teraz utworzymy kolejny identyczny trójkąt, sklonując nasz moduł Divider o nazwie Shape 1 i oznaczmy go jako Shape 2.
Animacja przewijania
Teraz otwórz ustawienia dla kształtu 2 i wprowadź te zmiany.
- Efekty przekształcenia przewijania: obracanie
- Włącz obracanie: TAK
- Obrót początkowy: 0° (przy 30%)
- Średni obrót: 45° (przy 45%)
- Obrót końcowy: 90° (przy 60%)
Kształt CSS nr 3
Tym razem zduplikuj kształt 2 i oznacz zduplikowany element rozdzielający jako Kształt 3.
Animacja przewijania
Następnie zmień wartości obrotu transformacji.
- Średni obrót: 90 °
- Końcowy obrót: 180 °
Kształt CSS nr 4
Ponownie zduplikuj poprzedni moduł i nazwij go „Kształt 4”.
Animacja przewijania
Następnie zmień wartości obrotu transformacji.
- Średni obrót: 180 °
- Obrót końcowy: 270 °
Testowanie animacji przewijania
Teraz, aby przetestować animację przewijania, musisz dodać tymczasowy margines powyżej i poniżej separatora.
- Margines: 80vh góra, 80vh dół
Dodawanie tytułu
Posiadanie animowanego tytułu z takim projektem na stronie internetowej jest całkiem niezłe. Więc teraz dodamy do niego tytuł. Wcześniej dodamy kilka kodów CSS w sekcji głównego elementu karty Zaawansowane w kolumnie 2 (gdzie będzie tytuł), aby nasz tytuł pozostał wyśrodkowany w pionie.
display:flex;
flex-direction:column;
align-items:center;
Teraz dodaj moduł tekstowy do tej kolumny 2 i dodaj do niej nagłówek H2.
Teraz z karty projektu zmień następujące ustawienia.
- Czcionka nagłówka 2: Poppins
- Wyrównanie tekstu nagłówka 2: domyślne (komputer), środek (tablet i telefon)
- Rozmiar tekstu nagłówka 2: 55px (komputer), 45px (tablet), 35px (telefon)
- Szerokość: 100%
Teraz dodamy do tego tekstu efekt przewijania.
- Efekty transformacji przewijania: ruch poziomy
- Włącz ruch poziomy: TAK
- Przesunięcie początkowe: 2 (przy 20%)
- Przesunięcie środkowe: 1 (przy 35%)
- Przesunięcie końcowe: komputer stacjonarny -0,6 (przy 50%), tablet i telefon 0 (przy 50%)
Odkrywanie kształtów pod różnym kątem
Teraz, gdy skończyliśmy z projektami, możemy teraz odkrywać różne kształty dla górnego trójkąta. Aby to zrobić, przytrzymaj polecenie (dla Mac) i Control (dla Windows) i zaznacz wszystkie 4 kształty i kliknij ustawienia dowolnego kształtu. Spowoduje to otwarcie połączonych ustawień dla wszystkich tych kształtów. I zobacz, który projekt Ci się najbardziej podoba.
Widok końcowy
Cała nasza praca skończona, teraz zobaczymy ile rodzajów wzorów możemy dodać do naszej strony.
Wniosek
Osoby, które chcą nadać nowy wymiar swojemu projektowi internetowemu, zawsze będą szukać czegoś wyjątkowego, takiego jak ten rodzaj projektowania. Niestandardowy kształt CSS z animowanym przewijaniem z pewnością rozszerzy piękno Twojego projektu. Są bardzo łatwe do zaprojektowania za pomocą Divi , a ponadto nie wymagają żadnych dodatkowych wtyczek, ponieważ wszystkie funkcje są wbudowane. Mam nadzieję, że dzisiejszy samouczek spodoba się Wam, ponieważ da Wam dobry pomysł na animację CSS Shape. Chętnie zapoznamy się z Twoimi przemyśleniami na temat dzisiejszego artykułu, a jeśli Ci się spodoba, udostępnienie będzie oszałamiające.
