How jQuery is Killing Flash + jQuery Tutorials & Plugins to Beat Up Flash Animations
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.
Why should we use jQuery instead of Flash
There are a bulk of differences regarding the benefits and disadvantages between these two guys, but in this article, we just list some their most important features.
The second and the most problem with Flash is it isn’t available on the iPhone, and many other mobile devices. According to Adobe, 98 percent of desktop computers and laptops currently support Flash, but the truth is it’s not compatible with all browsers including those on the iPhone, iPad and cell phones. Unlike Flash, jQuery supports screen reader accessibility. By using accDND (a jQuery plugin), we can enable keyboard and screen reader which is an accessible drag & drop functionality plugin for jQuery. jQuery wins again!.
One other area to look at is video. This is where HTML5 comes into the picture — which is a completely different post in and of itself.
In most cases, though, jQuery can do better than Flash. From here, we’ll round up some tutorials and jQuery plugins that are simply awesome. Each of these teaches how to get a desired “Flash” effect, but with jQuery instead.
This tutorial helps you build an interactive map with jQuery instead of Flash. It helps you build the markup for the maps and a couple of jQuery functions to make it all work. It’ll be an interactive map that shows some information and the location of the various Marine Science outposts across the state. Information of the the locations are represented by dots, and clicking them, will display an info box.
Using pure jQuery, we can make an animated sharing bar which will enable your website visitors to share posts on a number of social networks. It runs smoothly on all browser versions.
If you have checked out the design of YouLove.us, you would be excited with its colorful animated background. Here they explained how they created their beautiful animated background. The technique is very simple. It will scroll only the body background while every element above it is transparent.
Learn the basics of setting up a continuous animation with an illustrated postcard which Flash usually does. This tutorial is a good one for you to learn how to work with animation loop in jQuery and the easing plugin.
A tutorial on CSS-tricks to create an incredible animated cartoon robot. It was created by layering several empty divs over each other with transparent PNGs as background images. This effect simulates a faux 3D animated background dubbed the â€œparallax effectâ€ originating from old-school side scrolling video games. This is one of the best examples of where jQuery is replacing Flash.
In this tutorial, you will be inspired with the camera effect. The tutorial runs multiple animations (of arbitrary duration) at the same time, queues animations and even animates complex properties like colors or clipping rectangles.
Here’s a colorful clock created with jQuery and CSS only. This is really an interesting post to check out. It’s not a tutorial about the jQuery animate() function, but the jQuery helps CSS animation property works correctly. I highly recommend checking out all of the Tutorialzine Tutorials for jQuery inspiration.
A sexy menu created using jQuery and CSS with OS X style docks and stacks navigation. It’s super lightweight (~1kb) and is a really creative “outside the box” method of navigation for a website. It might be a little awkward having the navigation in the bottom right or left of the browser window but it would certainly be creative and saves lots of space.
Transform:rotate is a new feature of CSS3 which lets you rotate HTML elements. This tutorial will help you create an awesome “tick tock” clock that animates very smoothly. The jQuery code in this tutorial helps the clock get correct time information then inject all the CSS3 style for each element.
Here they create a 3D engine that will allow us to create shapes simply by creating an array of points. This engine will have a Camera, a Scene and an Object. Perfect 3D cube in jQuery!
An excellent tutorial features an impressive animation effect of cartoon-ish smoke which animates from factory smoke stacks. This tutorial provides a configurable jQuery plugin with instructions based on blog’s header of the author, so that you may create a similar animation effect for your website.
jParallax is a jQuery plugin that allows animation of simple parallax animations by animating the background-position of <div> elements.
Create page flip using jQuery plugin instead of Flash. This plugins is useful for us to create the page flip effect that can be used in flipping page of a book. It could be a great idea for a comic book web site.
Another great jQuery plugin which lets you share in the beauty of the page fold. Remember in the past, we always use Flash to create this effect for ad slot. Today, forget Flash and try it with jQuery. Everything is the same except you’re not relying on Flash, guys!
This is really a nightmare with Flash because jQuery does it perfectly and even better than Flash does. There are a bulk of jQuery Slider Plugins out there, but Easy Slider is arguably the best one with a lot of features and options.
This is another awesome jQuery slider that comes with cool features. AnythingSlider is a plugin that was built to make implementing it and customizing it much easier than other plugins.
Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360Â° view of something or someplace. It’s a great alternative to widely used Flash techniques.
jCrop is a powerful image cropping engine for jQuery. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
If we are missing anything here, feel free to drop your line to make a friendly conversation. Any comment or suggestion is appreciated! What do you think? Will Flash last past this next decade?