Introduzione all'animazione dei poligoni con css

come usare il clipping path per creare un'animazione

come usare il clipping path per creare un'animazione


 
 

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

 
 

tags: web design web development css animazioni


Questo sito fa uso di cookie, anche di terze parti, per migliorare la tua esperienza di navigazione. Accettando questa informativa dai il consenso al loro utilizzo. È possibile modificare le impostazioni dei cookie o ottenere ulteriori informazioni qui: Politica dei cookies.