it.hideout-lastation.com
Crea widget completamente animati con Shift.css
L'animazione Web offre un modo per attirare l'attenzione delle persone e per inserirle ulteriormente in un sito web. Ci sono molti strumenti là fuori per creare animazioni gratuite, ma Shift.css è uno dei più nuovi del gruppo.
È un framework open source gratuito creato per creare animazioni dinamiche all'interno di qualsiasi contenitore . E queste animazioni non sono bloccate in un'unica sequenza . È possibile creare animazioni personalizzate per ciascun elemento nel blocco e applicarle in un determinato ordine .
La pagina dimostrativa di Shift può 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 per creare il tuo effetto di animazione personalizzato .
La libreria viene fornita con due file, una libreria .css e .js ed entrambi devono essere aggiunti alla testata del documento .
Non riesco a trovare alcun repo GitHub per questo progetto, quindi è necessario scaricare i file direttamente dal sito web Shift.css.
Il prossimo passo è definire un elemento contenitore con alcuni contenuti. I nomi delle classi sono importanti, quindi ogni elemento animato deve avere l' .shift-element classe applicato .
Insieme a queste classi, puoi anche aggiungere 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.
- data-animation : nome dell'animazione
- ritardo dati : ritardo totale (in secondi) prima dell'avvio dell'animazione
- data-duration : lunghezza totale (in secondi) dell'animazione
Il nome dell'animazione deve essere un'animazione predefinita creata per la libreria Shift. Al momento ci sono 15 nomi di animazione tra cui scegliere . Puoi vederli elencati nella parte inferiore della homepage di Shift.css.
Basta copiare / incollare tutto ciò che vuoi nell'impostazione del nome dell'animazione e dovresti andare! Ad esempio, se volessi utilizzare l'animazione di dissolvenza in uscita, aggiungerei data-animation="shift_exitFade" come attributo di dati a qualunque elemento debba essere animato in quel 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 i nuovi sviluppatori che desiderano creare stili di animazione più complessi senza scrivere codice dettagliato da zero.
![Perché dovresti andare in vacanza senza tecnologia [Infografica]](http://hideout-lastation.com/img/tech-design-tips/873/why-you-should-go-tech-free-vacation.jpg)
Perché dovresti andare in vacanza senza tecnologia [Infografica]
Abbiamo già scritto in precedenza sulla necessità di disconnettersi dai nostri gadget e aggeggi per il nostro benessere personale. Per lo meno, rimuovere la nostra dipendenza dalla tecnologia, almeno per le feste in famiglia, ci aiuterà a riconnetterci con le persone che ci stanno a cuore.Per aggiungere a quel mucchio, abbiamo qui un'infografica di Modis che sta cercando di creare un caso per una vacanza senza tecnologia, il tipo che può davvero aiutarti a ricaricare correttamente. Ol
8 modi in cui i robot di Twitter ci stanno davvero aiutando
A seconda della tua esperienza su Twitter, potresti aver incontrato la tua giusta dose di fastidiosi e spammosi bot di Twitter che continuano a seguirti . E smetterti di seguirti quando non ti segui. Detto questo, non tutti i bot di Twitter sono quelli che normalmente trovi vendendo prodotti discutibili o che ti inviano link sospetti
