This is pretty impressive — what a modern browser and just a bit of CSS (lots of transforms and some animation), HTML and a single image can do.
Posts Tagged ‘Animation’
Love this effect and have to see about implementing it in a future project. Basically, it detects when content below “the fold” appears and animates it up via jQuery. The included video gives you a good view/demo:
This the plugin I’ve been using to implement more easing formulas in my jQuery Tools stuff, and then recently in .animate functions as well. Theoretically, you could add your own formulas to it as well. I’ll stick with the included stuff for now, and the immediate future.
Love all these demos that are popping making buttons more active — just by utilizing the latest and greatest CSS3!
Just use them sparingly as a bit of flair, and as always, it’s gotta be a modern browser.
Here’s a great tutorial over at onextrapixel.com that talks about animating colors on your web page with CSS3 being the primary setup, with a jQuery as a fallback.
I love that they point out the fact that the CSS is the more efficient way to go as CSS3 is hardware accelerated, meaning better performance on desktop and mobile devices alike that support it. But you still have a jQuery fallback for the devices and browsers that don’t support CSS3 (or CSS3 fully). Additional jQuery plugins are needed on top of the core.
Not to beat out by the Webkit-based browsers of Apple and Google, CSS Animations are coming to Mozilla’s Firefox as well. It’s in the nightly builds, but may be some time till we see it appear in the full version. David Baron of Mozilla writes in his blog:
Feedback I get over the next few weeks will determine whether this implementation is good enough to ship in Firefox 5, or whether it needs bug fixes before it can ship (hopefully in Firefox 6, if I get the feedback soon enough)
So recently, I came across a project that required some left to right sliding animation, instead of the standard jQuery actions of toggling between sliding up and down. This site below was awesome for working through doing a horizontal sliding motion.