Introduzione all'animazione dei poligoni con css

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

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 END DEVELOPMENT.