Replace Flash with jQuery:Tutorials and Resources

Flash been around for sometime. While some web designer loves to work with flash the other despisethe usage of flash on webpage. In this post we are lobbying to increase the use of jQuery on websites.

Image Credit:  Response Time: Eight Seconds, Plus or Minus Two

If you have a whole website built on flash because of the fancy transition, the load time is unfavorable on the user end and also bad for the search engines. As many researches has shown that average time people are willing wait for a webpage to load varies between 0.4-4 seconds. Therefore it might not be wise to use flash to create an entire website. Flash has it’s places for example:  games,  splash pages, banners, online interactive application and

Three Simple Reasons Why You Should Use jQuery

  1. jQuery faster, lighter (only 155kb, Minified), cross browser compatible.
  2. You can almost have the same effects and functionality that you get using flash using jQuery. ( The included tutorials in this post is a proof that)
  3. Flash is not compatible on many mobile devices such as iPhone and mobile browsing is increasing day by day.

If you want more information on flash vs jQuery head over logicpool for detailed comparison.
Now that we have explained to you why you should use jQuery when creating webpage, here are some tutorial that you can use to achieve Flash like effect, hopefully with less coding, timing.

Making a Mosaic Slideshow With jQuery & CSS

This tutorial in detail explains how to create a image slideshow with Mosaic transitions.  You can modify the speed and also how the mosaic is viewed.

A Fresh Bottom Slide Out Menu with jQuery

Using a jQuery animate method this tutorial shows you how to create an interactive menu. The coding is fairly simple and understandable

Simplest jQuery Slideshow

Web Developer Jonathan Snook shows how to create a jQuery slideshow without any plugin. It is as simple as six lines of code. You can modify the interval between the images

Mask Your Input Forms and Make It Beauty

This tutorial improves usability and user experience using jQuery. You will learn how to and blurr or focuses when selected the inputs in the form.

Learning jQuery: Your First jQuery Plugin, “BubbleUP”

A step by step tutorial that explains how to easily create a jQuery plugin. You can use the same technique described in the tutorial for navigation, menu or images.

The Easiest Javascript Sliding Door Effect Tutorial with jQuery

Sliding is door is quite famous for navigation. In this tutorial the technique is applied to images to show image description. It could very useful if you are creating a gallery site

Rotated Background with Slide Up Menu using JQuery and CSS

This tutorial is very innovative. Forget about Flash.  Using CSS and jQuery you will learn how to have background that rotates while the navigation is overlayed.

How to Build a jQuery Brush Stroke Navigation

As the titles states, this tutorial shows how to simulate brush strokes in navigation sprites and jQuery.

NivoSlider Plugin Tutorial

This is more of plugin showcase. Nevertheless, the page includes a tutorial on how implant the plugin. What is so awesome about the plugin is the transition between slides. They are flash-like smooth transitions.

Using jQuery for a Simple Animated Fade Effect

A very simple yet effective tutorial on how to achieve the fade effect using three line of code.

Create An Awesome Image Gallery Using CSS3 and jQuery

Using CSS3 transform property and jQuery , this tutorial creates an image gallery that is very dynamic.

Positioning Backgrounds with jQuery

Learn how to create a navigation with different effect using jQuery background position plugin.

jQuery Blinds Slideshow/Slider

jQuery blinds another fresh slider that deserves attention. It is very easy to implant, smooth animated transition and cross browser supported.

Grungy Random Rotation Menu with jQuery and CSS3

A creative menu that rotates using jQuery.

Making a Photoshoot Effect With jQuery & CSS

This is a tutorial of the future. A very creative, unique jQuery that shows how to mimic the photoshoot using jQuery.

Making an Interactive Picture with jQuery

Want an image with hints and description ? No problem. Using this tutorial you will be able to create and interactive picture.

Building an Interactive Map with jQuery Instead of Flash

Very ingenious use of jQuery. This tutorial explains how the author crated an interactive map using jQuery .

More Useful jQuery Resources

Finally,  I would like to point out this article it is not totally disregarding flash. As I have mentioned above flash is useful for certain things, but for the web perhaps seeking out if there is alternate options( which is jQuery), might be best for user experience and faster websites.


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • SPEC INDIA

    You have an outstanding good and well structured site. I enjoyed browsing through it.

  • http://www.brettwidmann.com Brett Widmann

    This is a really great set of resources. Thanks for sharing.

  • http://www.perceptionsystem.com Yatin Sadhu

    Hi,

    I visited this collection. Very nice collection. I save this link and i will use.

    Thanks,
    Yatin

  • http://www.huddydesign.com Sarah

    Nice article but PLEASE proof-read it next time before posting!

  • http://www.jordanwalker.net Jordan Walker

    Out with flash in with jQuery.

  • Hermitbiker

    This seems to be a really great tutorial on how to “Replace Flash With jQuery”…. not to mention other resources for doing this job well !! Thanks “Desizntech” for the share !!

  • http://codrops.tympanus.net Mary Lou

    Nice collection! Thanks for including our tutorials! Cheers, ML