Animazioni CSS e senza Javascript

Animazioni CSS e senza Javascript

Animazioni CSS e senza Javascript | Troppo spesso si è nella convinzione che per creare Animazioni si ha la necessità di utilizzare chi sa quale codice javascript, librerie jquery, gsap, swup e chi più ne ha più ne metta. In parte è vero, se si vogliono creare effetti accattivanti e renderli fluidi bisogna conoscere e impiegare javascript o librerie varie, ma non sempre è vero.

Usare solo i CSS per creare piccole animazioni | Animazioni CSS e senza Javascript

Se vogliamo realizzare piccole animazioni come ad esempio l’ingresso di un titolo animato, così come nel sito pelletcatania.it, lo possiamo fare con il solo uso dei fogli di stile. Quindi, possiamo affermare che è possibile realizzare Animazioni CSS e senza Javascript. Nello specifico il codice impiegato è il seguente:

<style>

  .title {
   position: relative;
   opacity: 0;
   animation: bounceInLeft 3s 1 forwards cubic-bezier (.215, .61, .355, 1);
  }
  @keyframes bounceInLeft {
      from,
      60%,
      75%,
      90%,
      to {
        animation-timing-function: cubic-bezier (0.215, 0.61, 0.355, 1);
      }
      0% {
        opacity: 0;
        transform: translate3d (-3000px, 0, 0) scaleX(3);
      }
      60% {
        opacity: 1;
        transform: translate3d (25px, 0, 0) scaleX(1);
      }
      75%
      {
      transform: translate3d (-10px, 0, 0) scaleX(0.98);
      }
      90% {
      transform: translate3d (5px, 0, 0) scaleX(0.995);
      }
      to {
      opacity: 1;
      transform: translate3d (0, 0, 0);
      }
  }
</style>

Basta sbizzarrirsi alla ricerca di una soluzione semplice col l’obiettivo di dare un minimo di effetti visivi al vostro sito, sviluppando codice css, php, html e javascript a quantità industriali. Una soluzione alla portata di tutti, la trovate recandovi sul sito di Animazioni.css dove troverete un serie di demo di effetti grafici semplici e pronti all’uso.
Oltre alle demo, sul sito troverete le istruzione di come andare ad impiegarle e di come installarle sul vostro di sito.

Animazioni CSS e senza Javascript

Animazioni CSS e senza Javascript | Inoltre, Animate.css vi mette a disposizione, andando in basso a destra nella pagina o sulla sidebar destra e cliccando su License and Contributing e successivamente cliccando su Edit this on GitHub verrete indirizzati verso la repo GitHub dell’autore, dove potrete scaricare gli snippets degli esempi mostrati e applicarli come più vi aggrada.

Animazioni CSS e senza Javascript

Animazioni CSS e senza Javascript | Una volta giunti sulla repo GitHub dell’autore cliccate su animate.css in alto a destra

Animazioni CSS e senza Javascript

a quel punto si aprirà una lista di directory e file e qui aprirete la directory source dove all’interno vi sono contenute altre directory ognuna delle quali denominate con l’effetti visti precedentemente sul sito Animation.css

GitHub

se entrate in una delle qualsiasi directory, troverete una lista di file.CSS, a sua volta, ognuno dei quali contiene il codice CSS specifico dell’effetto.

animazioni CSS GitHub

Animazioni CSS e senza Javascript | Non vi rimane che aprire il file o i file, copiare il codice ed assegnare la classe che troverete nel file css ad un elemento html del vostro sito oppure applicare la proprietà del file css di Animation.css ad una classe già presente nei vostri fogli di stile.

css & javascript

Ogni file css che troverai riporterà il nome di uno specifico effetto.

Buon divertimento!!

Se fossi interessato nella realizzazione di un sito web professionale con effetti WOW, non esitare a contattarci andando alla nostra pagina contatti.

CONTATTI