Quante volte avreste voluto dare un tocco "dinamico"alla vostra pagina, ma non avete sufficienti conoscenze in Javascript? Da oggi questo problema è risolto, grazie ai CSS3! Utilizzando infatti le proprietà @keyframes e animation potrete animare il vostro contenitore senza l'ausilio di linguaggi esterni.
Il funzionamento è molto semplice. Prima di tutto create la vostra normale pagina con estensione HTML e inseritevi un <div> (non è necessario assegnargli alcun ID o Classe):
Passiamo ora all'analisi dei codici. All'interno del tag <style> abbiamo inserito il selettore DIV assegnandogli la proprietà:
Il primo parametro, esempio, è il nome che abbiamo dato alla nostra animazione. La possiamo definire una sorta di variabile. Il secondo parametro, 5s, si riferisce alla durata della nostra animazione. Basta impostare il numero dei secondi che vogliamo (5) seguiti dall'unità di misura s. Infine, l'ultimo parametro indica quante volte vogliamo far ripetere la nostra animazione. Impostando infinite, essa ricomincerà da capo ogni volta, mentre, se avessimo messo 1, sarebbe avvenuta solo una volta. Possiamo impostare qualsiasi numero di ripetizioni.
Esistono altri parametri, ma per ora mi limiterò a spiegarvi quelli essenziali.
Passiamo all'analisi della seconda proprietà, cioè @keyframes:
Qui è molto più semplice perche basta dichiarare tale proprietà e inserirvi i parametri from e to, rispettivamente l'inizio e la fine dell'animazione. Io, per esempio, l'ho fatta partire da una distanza di 0 pixel dal top della pagina, facendola finire 300 pixel più in basso. Non dimentichiamo di inserire il nome dell'animazione (che abbiamo dichiarato precedentemente in animation) affianco a @keyframes
Avremmo potuto usare anche delle percentuali:
Utilizzando le percentuali, avreste potuto inserire molti più parametri (0%, 10%, 27%, ecc.), infatti sarebbe la sintassi più corretta.
Non dimenticare mai di settare la position del <div> su relative, per il corretto funzionamento del codice.
Utilizzare sempre i prefissi -moz-, -webkit- e -o-. Non è supportato da IE.
Questo è tutto. Ora avete il vostro <div> animato! Basta personalizzarlo, e potrete creare layout inimitabili!
Il funzionamento è molto semplice. Prima di tutto create la vostra normale pagina con estensione HTML e inseritevi un <div> (non è necessario assegnargli alcun ID o Classe):
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Passiamo ora all'analisi dei codici. All'interno del tag <style> abbiamo inserito il selettore DIV assegnandogli la proprietà:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il primo parametro, esempio, è il nome che abbiamo dato alla nostra animazione. La possiamo definire una sorta di variabile. Il secondo parametro, 5s, si riferisce alla durata della nostra animazione. Basta impostare il numero dei secondi che vogliamo (5) seguiti dall'unità di misura s. Infine, l'ultimo parametro indica quante volte vogliamo far ripetere la nostra animazione. Impostando infinite, essa ricomincerà da capo ogni volta, mentre, se avessimo messo 1, sarebbe avvenuta solo una volta. Possiamo impostare qualsiasi numero di ripetizioni.
Esistono altri parametri, ma per ora mi limiterò a spiegarvi quelli essenziali.
Passiamo all'analisi della seconda proprietà, cioè @keyframes:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Qui è molto più semplice perche basta dichiarare tale proprietà e inserirvi i parametri from e to, rispettivamente l'inizio e la fine dell'animazione. Io, per esempio, l'ho fatta partire da una distanza di 0 pixel dal top della pagina, facendola finire 300 pixel più in basso. Non dimentichiamo di inserire il nome dell'animazione (che abbiamo dichiarato precedentemente in animation) affianco a @keyframes
Avremmo potuto usare anche delle percentuali:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Utilizzando le percentuali, avreste potuto inserire molti più parametri (0%, 10%, 27%, ecc.), infatti sarebbe la sintassi più corretta.
Non dimenticare mai di settare la position del <div> su relative, per il corretto funzionamento del codice.
Utilizzare sempre i prefissi -moz-, -webkit- e -o-. Non è supportato da IE.
Questo è tutto. Ora avete il vostro <div> animato! Basta personalizzarlo, e potrete creare layout inimitabili!
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
Ultima modifica da un moderatore:
