From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
After making the Developer/Designer Page Layout Concept we wanted to try out some different effects for the pieces animation on the image. There are quite a lot of possibilities to animate the fragments, so we made some demos showing the different effects. The animations are powered by anime.js.
The demo is kindly sponsored by NomNom. If you would like to become a demo sponsor, you can find out more here
Attention: In these highly experimental demos we use some modern properties like CSS Flexbox, CSS variables, the new CSS grid layout and filter without fallbacks.
Note that Safari seems to be a serious party pooper when it comes to performance.
Have a look at the different demos:
We hope you enjoy these examples and find them useful!
References and Credits
- Photography from Unsplash.com and Visual Hunt
- anime.js by Julian Garnier
- imagesLoaded by Dave DeSandro
Wow! I love it!…as usual.
Amazing~ thank you.
That is great. Thanks for all the inspirations.
fantastic!
what a great idea!
Tanx Mary Lou
Looking at the code. And still confuse how to use it.
Manoela: The Ballerina works for me. I just don’t like it that all these work does not work on IE. I still love you though.
mesmerizing, as always
Demo 4 would be way cooler if it didn’t swipe away like that! Super cool otherwise though.
Totally agree with you.
awesome and helpfull. thanks
This is insane! Your creativity is out of bounds
Tanx Mary Lou.
Fantastic!
this is an amazing idea.
Hi, Mary! Excellent works! You – BEST!
The Ballerina is perfect for about page. Ok – Only one rack is missing for ie and edge – Tanks
hi, the image moves with the cursor, from the main.js? thanks
Sadly,..will not work at all in IE V11.
But BEAUTIFUL work once again!
beautiful 🙂 thx!!