As CSS3 gains more buzz, more and more developers are finding great ways to utilize it. In my last post, I went over the great ways to develop buttons and how to effectively use imagery transitions. Now we will move on and talk about the great ways to use CSS3 for animation and 3D effects.
For the web design world, advancements don’t come quick. It takes years of hard work to accomplish new overhauls such as HTML code and CSS levels. When new advancements are made, it makes us feel all giddy inside, and the anticipation kills us.
Who doesn’t love motion effects, right? shadows following the motion of movements while in a fighting scene, some of my favorite scenes are from The Matrix, Kung Fu Hustle, etc. I don’t event know how this effect is called, but sure is an awesome effect. The good news is that now-a-days we can create animations and play with them. It’s no an easy task to control distance and motion (the complex the code, the better control). The amazing part is that something like this can be done with 5 lines of jQuery!
In 1996, Macromedia released their product called Macromedia Flash which is a vector-based animation platform. With Flash, web designers were now able to create animations using a timeline and vector design tools as a video. Furthermore, Flash was and still is a great solution for web designers to provide visitors smooth view in such small file size. The only thing that web surfers need to enjoy the sites using flash is to install Macromedia Flash Player.
However, with the arrival of JavaScript in 1997, there has been a war between Flash and JavaScript because Flash was afraid JavaScript would one day replace them with all the animation it supports. Why? Because a ton of JavaScript frameworks are becoming increasingly popular as a result of their high scalability, performance and usability. Some include jQuery, MooTools, script.aculo.us, Prototype, among others but especially jQuery, as of late.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAX interactions for rapid web development. Although you may have enough Javascript skills to build your own Javascript code, using jQuery instead of can simplify the process (think hundreds of lines vs. a few lines of jQuery). Furthermore, there are thousands of plugins for jQuery published and large community support for this project. jQuery deserves being the heaviest competitor with Flash.