Zawartość
- 01. Efekt rollover tekstu
- 02. Utwórz CSS
- 03. Ustaw słowo
- 04. W górę iw górę
- 05. Unoszenie się w dół
- 06. Automatyczne dla ludzi
- 07. Dodaj naprzemienne klasy
Linki „najechanie kursorem” to świetny sposób na przyciągnięcie uwagi użytkownika, zwłaszcza jeśli robią coś niezwykłego lub oryginalnego. Middle Child ma wspaniały efekt, rzadko spotykany gdzie indziej, który przechwytuje każdą literę i rozdziela ją na części za pomocą animacji, która uruchamia się, gdy gość najedzie na słowo. Animacja pomaga przekazać figlarny charakter marki kanapek.
W tym artykule pokażemy, jak odtworzyć efekt na swojej stronie. Aby uzyskać więcej inspiracji, zapoznaj się z naszym przewodnikiem po najlepszych przykładach animacji CSS (z instrukcjami, jak je zakodować). Jeśli szukasz czegoś innego, wypróbuj najlepszy program do tworzenia witryn lub nasz wybór najlepszej pamięci masowej w chmurze. A jeśli tworzysz swoją witrynę bardziej złożoną, upewnij się, że jej hosting działa prawidłowo.
01. Efekt rollover tekstu
Jednym ze wspaniałych efektów tekstowych na stronie Middle Child jest efekt najazdu w menu, w którym litery rozszczepiają się na tekście i lekko się obracają. Zacznij od kilku prostych tagów HTML.
div> div> Breakfast / div> / div>
02. Utwórz CSS
Użyj oddzielnego pliku CSS lub tagów stylu, aby dodać następujące reguły CSS i sprawić, by strona wypełniała pełny rozmiar przeglądarki, upewniając się, że treść i opakowanie zajmują pełną dostępną wysokość.
body {width: 100%; wysokość: 100%; margines: 0; wyściółka: 0; } .wrapper {display: grid; wysokość: 100%; }
03. Ustaw słowo
Plik słowo klasa wyśrodkowuje słowo w siatce. Dowolny tekst, któremu nadano rozszerzenie słowo klasa może mieć to zastosowanie. Plik w górę class zostanie zastosowana do każdej innej litery i te przesuną się w górę.
.word {font-size: 3em; margines: auto auto; } .word .up {display: inline-block; transform: translate3d (0px, 0px, 0px) rotate (0deg); przejście: wszystkie 0,5 s spowalniają-wychodzą; }
04. W górę iw górę
Teraz na dół klasa ma bardzo podobne ustawienia do w górę ale kursor pokazuje ruch w górę dla w górę najazd. W górę jest również lekko obrócony, aby poprawić wygląd.
.word .down {display: inline-block; transform: translate3d (0px, 0px, 0px) rotate (0deg); przejście: wszystkie 0,5 s spowalniają-wychodzą; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); kolor: # 058b05}
05. Unoszenie się w dół
Gdy użytkownik najedzie na tekst, klasa down przesuwa tekst w dół. Później w JavaScript tekst zostanie podzielony na oddzielne zakresy z klasami dodanymi automatycznie do alternatywnych zakresów.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); kolor: # 058b05; }
06. Automatyczne dla ludzi
To trochę kłopotliwe, gdy trzeba umieszczać każdą literę w naprzemiennych zakresach z różnymi klasami, więc zautomatyzujemy ten proces, ustawiając JavaScript w celu wysłania zapytania do selektora i pobrania każdej litery. Tutaj str zmienna przechwytuje bieżącą literę, gdy przechodzi przez tekst.
skrypt> var elements = document.querySelectorAll („.word”); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementy [i] .innerHTML = ””;
07. Dodaj naprzemienne klasy
Teraz kolejna pętla umieszcza każdą literę we własnym elemencie span i dodaje albo w górę lub na dół klasa do przęseł. Jeśli spojrzysz na to w przeglądarce, zobaczysz, że tekst jest podzielony według każdej litery w górę iw dół, jednocześnie lekko się obracając.
Możesz zobaczyć efekt w akcji na stronie Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elementy [i] .appendChild (spn); spn.textContent = str [j]; niech pos = (j% 2)? 'Góra dół'; spn.classList.add (pos); }} / script>
Ten artykuł został pierwotnie opublikowany w magazynie poświęconym kreatywnemu projektowaniu stron internetowych Projektant stron internetowych.Kup numer 286 lub Subskrybuj.
