Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic!
Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il più compatibile possibile con la maggior parte dei browser e per voi avere un codice sempre aggiornato e stabile.
Segnalatemi pure eventuali bugs nei vari browser, qui oppure su GitHub!
Please note: The actual DEMO work only on Chrome Browser and Safari (Magic CSS3 animations works in any browser
)
32 commenti
Shelley Gammon
Wonderful work. Do you have a way to implement this into WordPress?
miniMAC
Hi!
is simple, you download the magic.css file from GitHub, and you put that in your actual theme folder on wordpress, then you put this code on your header.php file:
https://gist.github.com/miniMAC/3ab0e2d7699869b06b8b
After that you can use the instructions how to use from GitHub
Marc Backes
I really like your work. It’s elegant and modern.
I wish you would publish your posts on English though, that more people would understand it. It doesn’t even matter if the English would not be all that great (mine is neither).
Please think about it.
But big thumbs-up for this blog! Keep up the good work.
miniMAC
Many thanks Mark! Really, i appreciate your comment and you gave me something to think about
Diego
WOW!
Effetti veramente fantastici!
Complimenti vivissimi.
WOW!
What Awesome effects!
Thumbs-UP!
miniMAC
Grazie Diego
Fabbryzz
Complimenti, hai realizzato un’ottima libreria e fa molto piacere che per una volta certe risorse si riescano a trovare anche in italiano.. ormai non ci speravo più. Anche a me piace molto smanettare con i css, però visto che con le funzioni in Javascript sono ancora un po’ indietro avrei una domanda da farti: è possibile ripetere l’effetto ad ogni passaggio del mouse sull’elemento? (dopo la prima volta devo sempre ricaricare la pagina) ..e come dovrei fare per ottenere i medesimi effetti al click del mouse invece che allo stato hover?
Intanto ti ringrazio per la libreria e se vorrai anche per l’eventuale chiarimento. Ciao!
miniMAC
Ciao Fabbryz, per fare quello che dici tu basterebbe per l’hover una semplice regola CSS con :hover e li metti il nome della magic animation. Invece per il click, li devi creare una funzione javascript, magari usando il .toggle
Luke
Really nice work but your demo page is all wrong. Your fixed positioning on the testbox and retrobox doesn’t work so when you scroll down to try out the bottom half of the effects you can’t see the effect. The video in the background gave me real problems! It keeps bugging out and it’s really annoying! I’d take it out if I were you. It doesn’t add to the demo. I’m trying to see the effects of the css not a massive video trying to load. It’s unfortunate because it is good work. I’m using Firefox by the way.
Daniel
Thank You!
This works like a charm on Safari Mac / iPhone, but is stuttering a bit on Chrome…do you have an idea?
Matteo Poile
Great works!
Could you please set the position of diamond box in the demo to fixed?
When I try an animation at the end of the page I can’t see it in action.
Thanks
Sabin
Hi there
You can please tell me where I can find the background video. I love this space Video. It’s beautiful.
Best Regards
Sabin
miniMAC
Hi, this video is from a paid channel called videohive
Sabin
O.k., thanks
Sabrina
Hey, nice work! Really good…
Could you please help me? Some weeks before, the background of this page http://www.minimamente.com/example/magic_animations/ was stars in movement, but now it’s changed. Could please tell me how or where can I find the old background? I really need that, please
And congratulations again.
miniMAC
Hi, you can find this video on videohive
grace
Ciao!
compliementi per l’articolo molto interessante.
Sto ancora applicandomi con jquery utilizzando WordPress quindi avrei una domanda: una volta inserito il il file magic.css nel mio template e richiamato nell’header del file con /css/magic.css”> non riesco a capire come proseguire. Dove inserire il jquery? e come utilizzare le animazioni? Grazie per il supporto
miniMAC
Ciao Grace, si devi usare jQuery come negli esempi che ho messo su GitHub
pooja
hi is this work on latest firefox browser
andrea
Ciao , complimenti , very good work.
Stavo cercando degli effetti così interessanti e vorrei chiederti ti occupi anche di creare dei mediaquery, poichè devo fare un restyling del mio sito e stavo cercando qualcuno che si occupasse di renderlo responsive.
Premetto che uso wordpress e ho un tema personalizzato, dal mio web master ed è ora di renderlo più efficace. Chiaramente non pretendo tu lo faccia gratuitamente , anzi , per questo ti chiedo come posso contattarti in privato
Grazie
Andrea
miniMAC
Ciao Andrea, puoi contattarmi da qui http://www.minimamente.com/contatti/