Luo täysin animoituja widgetit Shift.css n avulla

Web-animaatio tarjoaa mahdollisuuden tartu ihmisten huomiota ja piirtää ne edelleen osaksi verkkosivustoa. Siellä on paljon työkaluja luo ilmaisia ​​animaatioita mutta Shift.css on yksi uusimmista joukosta.

Se on a ilmainen avoimen lähdekoodin kehys tehty luomiseen dynaamiset animaatiot missä tahansa säiliössä. Ja nämä animaatiot ei ole lukittu yhteen sarjaan. Voit itse rakentaa mukautettuja animaatioita jokainen elementti lohkossa ja soveltaa niitä tietyssä järjestyksessä.

Vaihto-esittelysivu voi näyttää paljon paremmin kuin voin selittää sanoin.

Yksi asia, jonka huomaat, että jokainen säiliön sisällä oleva elementti on erillinen HTML-elementti. Olipa kyseessä SVG tai kuva tai mikä tahansa, voit animoida kaiken erikseen luo oma mukautettu animaatiovaikutus.

Kirjastossa on kaksi tiedostoa, a .css ja .js kirjaston ja molempien täytyy olla lisätään asiakirjapäähän.

En löydä GitHub-repoa tähän projektiin, joten sinun täytyy Lataa tiedostot suoraan Shift.css-sivustosta.

Seuraava vaihe on määritä säiliöelementti sisällön kanssa. Luokanimet ovat tärkeitä, joten jokaisen animoivan elementin on oltava sinulla on luokka .shift-elementti soveltava.

Näiden luokkien ohella voit myös lisää HTML5-tietojen määritteitä määritellä, miten animaatio toimii. Juuri nyt on vain kolme, mutta niiden pitäisi riittää mukauttamaan täyden animaatiovaikutuksen.

1. data-animaatio: Animaation nimi
2. data-viive: Kokonaisviive (sekunteina) ennen animaation alkua
3. data-kesto: Animaation kokonaispituus (sekunteina)

Animaation nimen on oltava a ennalta määrätty animaatio Shift-kirjastolle. Juuri nyt on 15 animaation nimeä. Näet ne luettelossa Shift.css-kotisivun alareunassa.

Vain kopioi liitä mitä ikinä haluatkaan animaation nimen asetuksiin ja sinun pitäisi olla hyvä mennä! Esimerkiksi, jos haluan käyttää poistumisfade-animaatiota, lisätään data-animaatio = "shift_exitFade" tietojen määritteenä mihin tahansa elementtiin, jonka pitäisi tuoda näin. Helppo nakki.

Toivon, että tämä kirjasto sai enemmän vaihtoehtoja JavaScriptissä, koska sen avulla kehittäjät voisivat hallita paljon enemmän sijoittelua ja ominaisuuksia. Mutta yksinkertaista (ja ilmaista) animaatiokehystä varten en voi valittaa.

Shift.css on täydellinen uudemmat kehittäjät jotka haluavat luoda monimutkaisempia animaatiotyylejä kirjoittamatta verbose-koodia tyhjästä.