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