Crea widget completamente animati con Shift.css
Animazione web offre un modo per attira l'attenzione della gente e disegnali ulteriormente in un sito Web. Ci sono molti strumenti là fuori crea animazioni gratuite ma Shift.css è uno dei più nuovi del gruppo.
È un framework open source gratuito fatto per creare animazioni dinamiche all'interno di qualsiasi contenitore. E queste animazioni non sono bloccati in una sequenza. È possibile creare animazioni personalizzate per ogni elemento nel blocco e applicare questi in un certo ordine.
Il Sposta la pagina demo posso mostrarti molto meglio di quanto possa spiegare a parole.
Una cosa che noterai è che ogni elemento all'interno del contenitore è un elemento HTML separato. Che si tratti di un file SVG o di un'immagine o qualsiasi altra cosa, puoi animare tutto separatamente crea il tuo effetto di animazione personalizzato.
La libreria viene fornita con due file, a .css e .js biblioteca, ed entrambi devono essere aggiunto alla testa del documento.
Non riesco a trovare alcun repo GitHub per questo progetto, quindi è necessario scarica direttamente i file dal sito web Shift.css.
Il prossimo passo è quello di definire un elemento contenitore con alcuni contenuti I nomi delle classi sono importanti, quindi ogni elemento animato deve avere la classe .shift-elemento applicato.
Insieme a queste classi, puoi anche aggiungi attributi di dati HTML5 per definire come funziona l'animazione. Al momento ci sono solo tre ma dovrebbero essere sufficienti per personalizzare un effetto di animazione completo.
- Dati-animation: Nome dell'animazione
- Dati di ritardo: Ritardo totale (in secondi) prima dell'avvio dell'animazione
- Dati-duration: Lunghezza totale (in secondi) dell'animazione
Il nome dell'animazione deve essere a animazione predefinita creato per la libreria Shift. In questo momento ci sono 15 nomi di animazione tra cui scegliere. Puoi vederli elencati nella parte inferiore della homepage di Shift.css.
Appena copia incolla tutto quello che vuoi nell'impostazione del nome dell'animazione e dovresti essere bravo! Ad esempio, se volessi utilizzare l'animazione di dissolvenza in uscita, aggiungerei Dati-animation = "shift_exitFade" come attributo di dati a qualunque elemento dovrebbe animare in questo modo. Vai tranquillo.
Desidero che questa libreria sia dotata di più opzioni in JavaScript perché consentirebbe agli sviluppatori di avere un maggiore controllo sul posizionamento e sulle funzionalità. Ma per un semplice (e gratuito) framework di animazione non posso lamentarmi.
Shift.css è perfetto per nuovi sviluppatori chi vuole creare stili di animazione più complessi senza scrivere codice dettagliato da zero.
