Introduzione All'Animazione Dei Poligoni con Css

come usare il clipping path per creare un'animazione

by admin admin 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 admin admin Date: 26-11-2015 web design web development css animazioni visite : 1896  
 
 
 
 

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…