Sukurkite visiškai animuotus valdiklius su „Shift.css“

Interneto animacija siūlo kelią patraukti žmonių dėmesį ir atkreipti juos toliau į svetainę. Yra daug įrankių sukurti nemokama animacija bet Shift.css yra vienas iš naujausių krūva.

Tai yra nemokamai atviro kodo sistema sukurta dinaminis animavimas bet kurioje talpykloje. Ir šios animacijos nėra užrakintos į vieną seką. Jūs iš tiesų galite sukurti pritaikytas animacijas kiekvienas elementas į bloką ir juos taikyti tam tikra tvarka.

The „Shift“ demonstravimo puslapis gali parodyti jums daug geriau nei galiu paaiškinti žodžiais.

Vienas dalykas, kurį pastebėsite, yra tai, kad kiekvienas konteinere esantis elementas yra atskiras HTML elementas. Nesvarbu, ar tai yra SVG, ar bet koks vaizdas, viską galite animuoti atskirai sukurti savo pasirinktinį animacijos efektą.

Bibliotekoje yra du failai, a .css ir .js abu turi būti pridėta prie dokumento galvutės.

Šiam projektui nerandu jokių „GitHub“ repo, taigi jums reikės atsisiųsti failus tiesiogiai „Shift.css“ svetainėje.

Kitas žingsnis yra apibrėžti konteinerio elementą turinio. Klasės pavadinimai yra svarbūs, kad kiekvienas animacinis elementas turėtų būti turėti klasę .pamainos elementas taikomos.

Kartu su šiomis klasėmis taip pat galite pridėti HTML5 duomenų atributus nustatyti, kaip veikia animacija. Šiuo metu yra tik trys, tačiau jų pakanka, kad būtų galima pritaikyti visą animacijos efektą.

1. duomenų animacija: Animacijos pavadinimas
2. duomenų atidėjimas: Bendras vėlavimas (sekundėmis) prieš pradedant animaciją
3. duomenų trukmė: Bendras animacijos ilgis (sekundėmis)

Animacijos pavadinimas turi būti a iš anksto nustatyta animacija sukurta „Shift“ bibliotekai. Šiuo metu yra 15 animacinių pavadinimų. Juos galite pamatyti Shift.css pagrindinio puslapio apačioje.

Tiesiog Kopijuoti įklijuoti ko tik nori į animacijos pavadinimo nustatymą ir jūs turėtumėte būti geras eiti! Pavyzdžiui, jei norėčiau naudoti išėjimo išnykimo animaciją data-animation = "shift_exitFade" kaip duomenų atributas bet kuriam elementui, kuris tokiu būdu turėtų animuoti. Lengva.

Norėčiau, kad ši biblioteka būtų su daugiau galimybių „JavaScript“, nes tai leistų kūrėjams daugiau kontroliuoti vietos ir funkcijų. Tačiau paprasta (ir nemokama) animacijos sistema negaliu skųstis.

Shift.css puikiai tinka naujesnių kūrėjų kurie nori sukurti sudėtingesni animacijos stiliai be rašymo kodo iš naujo.