Introduzione all'animazione dei poligoni con css

come usare il clipping path per creare un'animazione

by Janeth Kent Date: 26-11-2015 web design web development css animazioni

Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari.

Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità...

Ma cos'è il clipping ?

Il clipping o ritaglio, è quell'’operazione che ci consente di visualizzare un'esatta porzione di un elemento di una pagina web, nascondendo la parte esterna all’area individuata. Può essere effettuata su qualsiasi elemento HTML, e su qualsiasi elemento grafico o SVG.

Possiamo gistinguere in:

  • il clipping path, ovvero la linea che separa l'area visibile e quella non visibile (nascosta).
  • la clipping region è l’area visibile, quella all’interno del clipping path.

Vediamo come Bryan James spiega come utilizzare i poligoni per realizzare un ventaglio in CSS con Sass.

1. Creare un set di div

Quello che stiamo cercando di ottenere è un effetto in cui un insieme di forme triangolari partano in seguenza a ventaglio da un punto centrale. Prima di tutto bisogna creare tanti div per quanti poligoni abbiamo bisogno.

 
<div class="polygon-wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>


   .polygon-wrap {

    div {

    position: absolute;

    width: 500px;

    height: 275px;

   top: 0;
 
   left: 0;

   }

  }


2. Stato originale dei poligoni

Per poter aggiungere la transizione che prevede che i poligoni scorrano come un ventaglio, dobbiamo impostare lo stato originale degli stessi e aggiungiamo un background.

.polygon-wrap {

div {

-webkit-clip-path: polygon(50% 95%, 50% 95%, 50% 95%);

background-color: #46008C;

}

}


3. 

3. Animazione con trigger

Ricorriamo al metodo trigger per far si che si verifichi l'animazione. Ci limiteremo a mettere un stato "hover" sull'elemento wrapper.

4. Creare Poligoni

I poligoni si creano con poche linee di codice. Possono assumere qualsiasi forma: non sono vincolati a punti o a lati. Tuttavia, nel caso voleste applicare una transizione, come stiamo facendo ora, ricordatevi di usare lo stesso numero di punti, e di utilizzare lo stesso punto all'interno dell'array:

.polygon-wrap:hover {

div:nth-child(1) {

-webkit-clip-path: polygon(19% 42%, 26% 32%, 50%
95%);

}

}

In questo modo abbiamo creato delle forme triangolari.

5. La transizione

È ora possibile creare un insieme ampio di transizioni con il for-loops di Sass.

.polygon-wrap {

div {

transition: 0.2s;

@for $i from 1 through 7 {

&:nth-child(#{$i}) {

$tdelay: ((($i*0.1))+0.2s);

$tduration: ($i*0.05 + 0.25s);

transition-delay($tdelay);

transition-duration($tduration);

}

}

}

}

 

Vedi l'esempio su CodePen

 
by Janeth Kent Date: 26-11-2015 web design web development css animazioni visite : 4527  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

Flat UI Design - 8 siti ai quali ispirarsi

In questo post vi proproniamo una collezione di flat template professionali, perfetti per realizzare siti dal design semplice, pulito ma al tempo stesso accattivante. Brewery O come fare bella figura con un amico invitandolo a…

Le migliori risorse per web designer e sviluppatori web della settimana #2

Red Pen permette di caricare il tuo progetto grafico, condividerlo con una short URL ed ottenere un feedback. Non è necessario il logging in, e non è prensete un interfaccia per…

HTML5: 10 Tools online per Web Designer

Oggi vi proponiamo una collezione di 10 ottimi tools online HTML5 che sono stati progettati appositamente per web designer con lo scopo di semplificare l'attività di sviluppo. Tali strumenti online improntati…

HTML5: differenza tra NAV e MENU

HTML5 introduce due nuovi elementi con un ruolo apparentemente identico:   ( http://www.w3.org/TR/html-markup/nav.html )   (http://www.w3.org/TR/html5/interactive-elements.html#the-menu-element )     In realtà i due elementi sono tutt'altro che simili, ed è improbabile che siano utilizzati contemporaneamente.…

Le migliori risorse per web designer e sviluppatori web della settimana #1

Inauguriamo l'articolo settimanale sulle risorse per web designer, sviluppatori web e grafici! Nella realizzazione di un progetto web ci sono diversi aspetti di cui tenere conto in modo che il risultato…