25 skvelých príkladov animácií CSS, ktoré treba znova vytvoriť

Strana 2 z 2: Efekty animácie CSS

13. Závadný text

Trblietavé efekty sú ideálne na to, aby poskytli webu anarchický alebo zúfalý vzhľad. Na vytvorenie tohto druhu animácie môžete použiť kľúčové snímky CSS. Proces je podobný práci s animačným softvérom, až na to, že kľúčové snímky v CSS sú v kóde zapísané ako percentá pre časovú os animácie. V tento výučbový textový tutoriál , týmto procesom prechádza dizajnér a vývojár Mark Shufflebottom. Budete tiež používať Mriežka CSS na umiestnenie prvkov na obrazovke.

14. Z vyšľahaného cesta

  • Autor: Adam Kuhn

Vlastnosti súvisiace s SVG sú v CSS čoraz viac použiteľné. Dve z najviac jedinečne schopných animovateľných vlastností zahŕňajú cesty: offset-path a klip-cesta . Napríklad pomocou offset-path môžeme definovať (a dokonca aj ručne nakresliť) cestu SVG a upraviť našu offsetovú vzdialenosť (alebo v prípade starších prehliadačov, posunutie pohybu ), aby sme umožnili našim elementom pohybovať sa po našej definovanej ceste.

Ďalej definujeme cestu SVG a povieme nášmu prvku, aby sa pohyboval od začiatku do konca.



ako nakresliť dievča stojace bokom
animation:followPath 5s ease-in-out infinite; offset-path: path('M 40 0 C 75 170 160 140 200 280 Q 220 400 340 400 Q 420 380 480 540'); motion-path: path(“M 40 0 C 75 170 160 140 200 280 Q 220 400 340 400 Q 420 380 480 540”); @keyframes followPath{ from{ offset-distance:0%; motion-offset:0%;} to{ offset-distance:100%; motion-offset:100%;}}

Pri kreslení svojej cesty nezabudnite, že sa zmestí do zobrazovacieho poľa SVG a všetky číselné hodnoty sa preložia do pixelov. To môže predstavovať zodpovedajúce výzvy, pretože offset-path animácie neprijímajú relatívne jednotky.

Ďalšou skutočne úhľadnou vlastnosťou animovateľnej cesty je clip-path. Na animácii klipovej cesty je skvelé to, že môžete plynule prechádzať s umiestnením bodov cesty. Napríklad môžeme prejsť klipová cesta: mnohouholník (0 0, 100% 0, 100% 100%, 0% 100%) do klipová cesta: mnohouholník (50% 0%, 50% 0%, 100% 100%, 0% 100%); a plynulý prechod štvorca na trojuholník - čo je v CSS inak takmer nemožné.

Dôležitá poznámka k animácii klip-cesta : počet bodov na ceste musí zostať rovnaký pre začiatočný aj konečný tvar. Jednoduchý spôsob, ako si predstaviť, ako bude clip-path animovať, sa pozrite Bennett Feely’s Clippy .

Pozrite sa na tento príklad posúvača Ghibli Slider:

A klip-cesta príklad Prvé svetlo:

15. Padajúci sneh

Sneh sa vytvára pomocou SVG a technika je veľmi podobná spôsobu, ako sme vytvorili bubliny skôr. Na začiatok vytvoríme dve vrstvy kruhov vo vnútri SVG, potom tieto dve vrstvy animujeme preložením hodnoty Y pomocou animácie kľúčového snímku.

Animáciu aplikujeme na každú vrstvu namiesto jednotlivých prvkov a pre obe vrstvy použijeme rovnakú animáciu. Tým, že im jednoducho dáte rôzne trvanie, môžeme našej scéne pridať ďalšiu hĺbku.

16. Pohyblivé pozadie

Web A Violent Act využíva maskovanie a jemný pohyb, aby upútal pozornosť používateľa. Väčšina práce je tu v nastavení a vytváraní SVG.

17. Farebné prechody

Webové stránky DaInk používajú skutočne efektívnu techniku ​​na prechod medzi stránkami. Prechod je jednoduchý a pozostáva zo súboru SVG, ktorý obsahuje niekoľko obdĺžnikov rôznych veľkostí rôznych farieb umiestnených na sebe.

Animácia spočíva v transformácii polohy X o šírku SVG. Potom pomocou n-tý typ , aplikujeme oneskorenia, pričom každý posunieme o 75 ms od posledného, ​​aby sme vytvorili plynulý prechod.

18. Náhodne sa objavujúce písmená

Jam3 použila JavaScript a CSS na vytvorenie prekrytia animovaného obsahu pre pozadie videa na celú obrazovku na svojej stránke Nuclear Dissent.

Ak chcete skopírovať túto animáciu CSS, je prvým krokom zahájenie štruktúry dokumentu HTML. Skladá sa z kontajnera na dokumenty, v ktorom sú uložené časti hlavy a tela. Aj keď sa hlavičková sekcia používa na načítanie externých zdrojov CSS a JavaScript, telo bude obsahovať viditeľný obsah stránky vytvorený v ďalšom kroku.

Obsah popredia je umiestnený vo vnútri stránky hlavný kontajner ponúka výhodu ľahkej kontroly toku obsahu. Textový prvok má znak prekrytie trieda použitá tak, aby na ňu mohol odkazovať JavaScript a CSS na aplikáciu textovej animácie. Animáciu je možné použiť pomocou viacerých prvkov prekrytie trieda.

This is a story all about how...

Poslednou časťou kódu HTML je definovanie prvku videa na pozadí. Nie všetky prehľadávače sú schopné podporovať každý štandard videa, a preto je potrebné špecifikovať rôzne zdroje. Prehliadač zobrazí prvý zdroj, ktorý je schopný podporovať. Berte na vedomie, ako má prvok videa prvky automatické prehrávanie , stlmený a slučka atribúty sa použijú tak, aby sa automaticky prehrávali a opakovali bez zvuku.

Vytvorte nový súbor s názvom štýly.css . Prvým krokom v tomto súbore je definovanie vlastností súboru hlavný kontajner obsahu. Pre dediaci obsah dieťaťa sa použije predvolené nastavenie písma a farby. Automatické hodnoty sa použijú na bočné okraje tak, aby sa podradený obsah javil centrálne zarovnaný.

main { font-family: Helvetica, sans-serif; color: #fff; padding: 2em; width: 75%; min-height: 100vh; margin: 0 auto 0 auto; }

Aby efekt fungoval, vyžaduje prvok pozadia špecifický štýl. Po prvé, pevné umiestnenie je dôležité, aby sa zaručilo, že zostane v rovnakej polohe, ak používateľ posúva stránku. Po druhé, musí používať zápor z-index ktorá zaručí jeho pozíciu pod obsahom hlavnej stránky. Transformácia a veľkosť sa tiež používajú na nastavenie veľkosti a umiestnenia prvku tak, aby zakrývalo celostránkové okno.

video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: -9999; transform: translateX(-50%) translateY(-50%); background: #000; }

The prekrytie element bude manipulovaný JavaScriptom, aby rozdelil každé písmeno jeho textového obsahu tak, aby bolo zabalené značkou span. To umožňuje animáciu jednotlivých písmen pomocou CSS. Po prvé, predvolené nastavenie pre rozpätie písmená sú definované tak, aby mali relatívne umiestnenie, neviditeľnú nepriehľadnosť a boli použité animateOverlay animácia. Po druhé, oneskorenie ich animácie sa použije na základe umiestnenia ich dieťaťa.

.overlay span{ position: relative; opacity: 0; top: 1em; animation: animateOverlay 1s ease-in- out forwards; } .overlay span:nth-child(4n) { animation-delay: 0s; } .overlay span:nth-child(4n+1) { animation- delay: 1s; } .overlay span:nth-child(4n+3) { animation- delay: 2s; } .overlay span:nth-child(4n+2) { animation- delay: 3s; }

Animácia použitá na každý prvok rozsahu pozostáva iba z jedného rámca, do ktorého sa budú prvky animovať. Nastavuje sa ich nepriehľadnosť tak, aby sa stali úplne viditeľnými, spolu s ich vertikálnym umiestnením na animáciu smerom k ich predvolenej polohe toku textu. Všimnite si, ako krok 6 nastavuje, aby bol každý prvok rozsahu posunutý o 1em nadol.

@keyframes animateOverlay { to { opacity: 1; top: 0; } }

Vytvorte nový súbor s názvom code.js . Tento prvý krok vyhľadá všetky prvky pomocou znaku prekrytie trieda - z toho a pre slučka sa použije na neskoršie použitie kódu. Tieto prvky sú k dispozícii až po načítaní stránky, takže je potrebné ich umiestniť do poslucháča udalostí v okne prehliadača, ktoré sa spustí po dokončení načítania.

indow.addEventListener('load', function(){ var nodes = document. querySelectorAll('.overlay'); for(var i=0; i

Každý tu nájdený element musí mať predefinovaný obsah HTML, aby sa každé písmeno nachádzalo v elemente span. To sa dosiahne čítaním jeho obyčajného textu pomocou innerText a potom použijete sekundu pre slučka na individuálne pridanie každého písmena k novej verzii HTML - doplňte jeho značku span. Po prečítaní každého písmena je nadradený uzol innerHTML je aktualizovaný novým HTML.

var words = nodes[i].innerText; var html = ''; for(var i2=0; i2' } nodes[i].innerHTML = html;

19. Pulzujúce kruhy

Pulzná animácia použitá na webe Peek-a-Beat je jednoduchá, ale efektívna a nie je ťažké ju reprodukovať. Skladá sa z troch kruhov vo vnútri SVG - jednoducho animujeme ich mierku a nepriehľadnosť.

ako miešať farby na plátne

20. Rozširujúce sa zvýraznenie

Toto je veľmi jednoduchá, ale skutočne efektívna technika. Prechod sa vykonáva pomocou :: predtým pseudoprvok. Po prvé, pseudoelement je umiestnený v dolnej časti a má celú šírku, ale na výšku má iba niekoľko pixelov.

Pri interakcii s prvkom sa šírka a výška pseudoprvku prevedú na 105% veľkosti rodiča (zmena je zvislejšia oveľa dramatickejšie), ako aj prechod farby textu.

21. Zvýšený titul

Ensemble Correspondences používa na vyjadrenie pohybu v hudbe jednoduchú animáciu. Dizajn voľne predstavuje noty.

22. Ikona točiacej sa ponuky

Animované tlačidlo ponuky sa vytvára pomocou SVG. Animácia sa objaví, keď používateľ interaguje s tlačidlom ponuky. Prebiehajú dva prechody: kruhová skupina okolo ponuky sa otáča o 360 stupňov a ikona ponuky v strede mení farbu.

Najkomplikovanejšou časťou je funkcia časovania. Využitie kubický-bezier aby sme získali úplnú kontrolu, sme schopní pomaly spustiť animáciu, prebehnúť strednou časťou a na konci ju opäť spomaliť.

23. Podčiarknuté od stredu

Animácie CSS: podčiarknuté od stredu

Kliknutím zobrazíte animáciu v akcii

Animácia spočíva v umiestnení :: po pseudoprvok do dolnej časti a potom jeho zmena mierky pri interakcii s tlačidlom.

24. Rozširovanie rohov

Webové stránky Princezná Alexandra Auditorium má vizuálny spôsob, ako zobraziť kategórie svojich prehliadok. Každá z výstavných kariet má trojuholníkový roh nastavený farbou, ktorá predstavuje kategóriu, a potom pri umiestnení kurzora myši sa zobrazí názov kategórie.

Efekt sa dosahuje pomocou :: predtým a :: po pseudoprvky, prechod veľkosti trojuholníka a vyblednutie názvu pri interakcii s prvkom.

ako perspektívne pokriviť v ilustrátore

25. Posuvná šípka

Greenwichská knižnica má na svojich gombíkoch skutočne zaujímavý prechod. Pri interakcii s tlačidlom sa stávajú dve veci: textová časť tlačidla je zakrytá a šípka sa potom animuje mimo pravej strany tlačidla a späť zľava.

Farebný prechod je dosiahnutý pomocou vlastnosti prechodu a šípky pomocou jednoduchej animácie kľúčových snímok. Prechod aj animácia používajú na synchronizáciu pohybov rovnaké trvanie.

Čítaj viac:

  • 1
  • dva

Aktuálna stránka: Efekty animácie CSS

Predchádzajúca stránka Výukové programy pre animácie CSS