Zawartość
- 01. Zainicjuj dokument HTML
- 02. Widoczna zawartość HTML
- 03. Inicjacja CSS
- 04. Pojemnik animacji
- 05. Inicjacja animacji
- 06. Animacja do widoku
- 07. Zakończenie animacji
Love Lost by Canada’s Jam3 to piękny, mroczny, interaktywny wiersz gotowy na urządzenia mobilne z prawdziwym sercem, opowiadający o trwałych uczuciach związanych z utraconą miłością. Układ strony internetowej został utworzony przy użyciu HTML5, a animację napędza biblioteka GSAP. Jedną z najbardziej uderzających wizualnie funkcji jest animowany tekst 3D, który naprawdę ożywia poezję Love Lost.
- Twórz interaktywne efekty typografii 3D
Wygląda imponująco jak diabli i nietrudno jest włączyć go do własnej pracy, aby stworzyć wciągające doświadczenie użytkownika; oto jak to się robi.
Chcesz stworzyć własną, angażującą witrynę? Wypróbuj narzędzie do tworzenia witryn i utrzymuj płynne działanie, wybierając odpowiednią usługę hostingową.
01. Zainicjuj dokument HTML
Pierwszym krokiem jest zdefiniowanie struktury dokumentu HTML. Obejmuje to kontener HTML, który inicjuje dokument, który zawiera sekcje head i body. Podczas gdy sekcja head służy głównie do ładowania zewnętrznego pliku CSS, sekcja body będzie przechowywać widoczną zawartość strony utworzoną w kroku 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * KROK 2 TUTAJ / body> / html>
02. Widoczna zawartość HTML
Widoczna zawartość HTML składa się z kontenera artykułów, który zawiera widoczny tekst. Ważną częścią kontenera artykułu jest atrybut „data-animate”, do którego CSS będzie się odnosić w celu zastosowania efektów wizualnych. Tekst wewnątrz artykułu składa się ze znacznika h1, który wskazuje, że treść jest głównym tytułem strony.
article data-animate = "move in"> h1> Witaj! / h1> / article>
03. Inicjacja CSS
Utwórz nowy plik o nazwie „styles.css”. Pierwszy zestaw instrukcji ustawia kontener HTML i treść strony tak, aby miały czarne tło, bez widocznych odstępów między obramowaniem. Biały jest również ustawiany jako domyślny kolor tekstu, który ma dziedziczyć wszystkie elementy potomne na stronie; unikanie domyślnego czarnego koloru tekstu, przez co zawartość wydaje się być niewidoczna.
html, body {tło: # 000; wyściółka: 0; margines: 0; kolor: #fff; }
04. Pojemnik animacji
Kontener treści, do którego odwołuje się atrybut „data-animate”, ma zastosowane określone style. Jego rozmiar jest ustawiony tak, aby pasował do pełnego rozmiaru ekranu przy użyciu jednostek miary vw i vh, a także jest lekko obrócony. Stosowana jest animacja o nazwie „moveIn”, która będzie trwać 20 sekund i będzie się powtarzać w nieskończoność.
[data-animate = "move in"] {pozycja: względna; szerokość: 100 vw; wysokość: 100 vh; krycie: 1; animacja: moveIn 20s nieskończona; wyrównywanie tekstu: do środka; transform: rotate (20deg); }
05. Inicjacja animacji
Animacja „moveIn”, do której odwołano się w poprzednim kroku, wymaga definicji przy użyciu @keyframes. Pierwsza klatka zaczynająca się od 0% animacji ustawia domyślny rozmiar czcionki, położenie tekstu i widoczny cień. Dodatkowo element ma ustawioną zerową przezroczystość, dzięki czemu jest początkowo niewidoczny - tj. wyświetlane poza zasięgiem wzroku.
@keyframes moveIn {0% {font-size: 1em; po lewej: 0; krycie: 0; text-shadow: brak; } * * * KROK 6 TUTAJ}
06. Animacja do widoku
Następna klatka jest ustawiana na 10% poprzez animację. Ta ramka ustawia krycie na w pełni widoczne, co powoduje, że tekst jest stopniowo animowany.Dodatkowo dodawane są liczne cienie z niebieskim i malejącymi wartościami kolorów, aby nadać tekstowi iluzję głębi 3D.
10% {krycie: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * KROK 7 TUTAJ
07. Zakończenie animacji
Ostatnie klatki pojawiają się w 80% i na samym końcu animacji. Są one odpowiedzialne za zwiększenie rozmiaru czcionki i przesunięcie elementu w lewo. Nowe ustawienia są również stosowane do animacji cienia tekstu, a także znikania tekstu z widoku z ramek 80% do 100%.
80% {font-size: 8em; po lewej: -8em; krycie: 1; } 100% {font-size: 10em; po lewej: -10em; krycie: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Uwaga: niezależnie od projektu, w który się rozpoczynasz, posiadanie pamięci w chmurze, które sobie poradzi, jest niezbędne (nasz przewodnik pomoże).
Ten artykuł został pierwotnie opublikowany w numerze 273 magazynu poświęconego kreatywnemu projektowaniu stron internetowych Web Designer. Kup numer 273 tutaj lub zasubskrybuj Web Designera tutaj.
