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 : 2732  
 
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 END 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…

Cuixot - prosciutti e salumi mallorchini

Progetto: Cuixot de Porc Negre Mallorquí grafica web development SEO PHP/MYSQL, HTML, AJAX, Javascript, CSS  frontend/backoffice Pcore CMS Link al sito: Cuixot - Productos de la raza de cerdos negros de Mallorca

Arianna Mazzetta

Sito per la dott.essa Arianna Mazzetta, biologa nutrizionista grafica sviluppo web piattafrma blog sito dinamico CMS personalizzato SEO PHP/MYSQL, HTML, AJAX, Javascript, CSS, Responsive design Link a Arianna Mazzetta, biologa nutrizionista http://ariannamazzetta.it/    

Mediterrani Events

Progetto: Mediterrani Events - Rosa Miranda grafica web sviluppo web  SEO PHP/MYSQL, HTML, AJAX, Javascript, CSS area frontend/backoffice Pcore CMS Link a Mediterrani Events - Agencia de eventos, comunicación y azafatas  

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…

Utilizziamo i nostri cookie e quelli di terzi per migliorare i nostri servizi, compilare informazioni statistiche e analizzare le vostre abitudini di navigazione. Questo ci permette di personalizzare i contenuti che offriamo e di mostrarvi le pubblicità relative alle vostre preferenze. Cliccando su "Accetta tutto" acconsentite alla memorizzazione dei cookie sul vostro dispositivo per migliorare la navigazione del sito web, analizzare il traffico e assistere le nostre attività di marketing. Potete anche selezionare "Solo cookies di sistema" per accettare solo i cookies necessari al funzionamento del sito web, oppure potete selezionare i cookies che desiderate attivare cliccando su "Impostazioni". Tradotto con www.DeepL.com/Translator (versione gratuita)" o "Rifiuta".

Accetta tutti Solo cookies del sistema Configurazione