Kotisivu » Toolkit » Tuesday.css on nyt kuumin animaatiokirjasto

    Tuesday.css on nyt kuumin animaatiokirjasto

    Nyt sinun pitäisi olla jo tuttu Animate.css kuten ensisijainen animaatiokirjasto Web-suunnittelijoiden keskuudessa.

    Mutta lohkossa on uusi lapsi tiistai, ja se on web-animaation ottaminen voiman avulla.

    Tämä uusi kirjasto ei ole paljon erilainen muodossa tai toteutuksessa. Mutta tiistaina tulee kourallinen uusia CSS-animaatioita että sinä ei löydä missään muualla.

    Nämä uudet vaikutukset ovat paljon hienompaa luonnossa niin he todella sulautuvat sivulle hienosti. Tässä on a pieni luettelo vaikutuksista voit valita:

    • Fade & expand
    • Fade & kutistuu
    • Leima ja pomppia
    • Kulmainen keinu
    • Pudota vasemmalta / oikealta
    • Squash / venytys
    • Sarana

    Jos käytät tätä luetteloa demo-sivulla, huomaat, että kaikki vaikutukset ovat yksi yhteinen asia: fysiikka.

    He kaikki tuntevat itsensä hyvin realistinen fysiikan perusteille, ja he näyttävät noudata painovoiman lakeja. Mikään näistä animaatioista ei ole ylhäältä tai ulkopuolelta. He ovat hienovarainen vielä havaittavissa ja mikä tärkeintä, he ovat uskottava.

    Luulen, että tiistai on yksi parhaista moderneista CSS-animaatiokirjastoista, koska se esittelee realistinen näkymä web-animaatiosta.

    Meidän ei pidä suunnitella hulluja käyttöliittymävaikutuksia, jotka erottuvat kipeästä peukalosta. Oveluus on aina pelin nimi, koska se on luo tunteen vuorovaikutteisuudesta mistä tahansa käyttäjän syötteestä, onko se napsautus tai selaus.

    Ongelmat ovat aina olleet kirjoittamassa näitä animaatioita tyhjästä ja saaneet ne näyttämään aivan oikeassa. Mutta nyt tiistaina huolet voivat lentää suoraan ulos ovesta.

    Vain lataa kopio GitHubista ja lisää .css tiedosto sivulle. Voit itse käytä CDN-versiota suoraan GitHubista jos et halua ladata mitään paikallisesti.

    Kun tämä on lisätty verkkosivullesi, vain liitä .elävöittää luokka yhdessä minkä tahansa omistusluokan kanssa GitHub-repossa. Koodi saattaa näyttää tältä:

     

    Se on tiistai.

    Katsokaa täydelliset asiakirjat nähdä luettelo kaikista in / out-animaatioluokista.

    Jos työskentelet JavaScriptin avulla, voit myös lisää nämä luokat dynaamisesti napsauttamalla / hover-tapahtumista. Näin voit lisätä animaatioluokan vain, kun käyttäjä napsauttaa painiketta, joka näyttää animoivan napsautuksella.

    Tiistaina voi tehdä niin paljon, ja se on todella uusi Animate.css pragmaattisia käyttöliittymän animaatioita varten.

    Ota kurkistus demo-sivu nähdä sen elävän toiminnassa, ja voit oppia lisää lukemalla niiden kautta “tekeillä” lähettää joka kertoo Shakrin tiimin luomisesta tiistaina.