Desizn Tech logo
  • Home
  • Freebies
  • Showcase
  • Tutorial
  • Photography

Replace Flash with jQuery:Tutorials and Resources

Posted April 6, 2010 & filed under javascript, Round Up, Showcase

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

  • jQuery Tutorials for Designers

  • 15 Handpicked Fresh and Useful jQuery Tutorials

  • 51+ Best of jQuery Tutorials and Examples

  • 40+ Excellent jQuery Tutorials

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.

More about Kawsar Ali

About the author

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

Tags: Jquery, jQuery Fade, menu, Slider, Slideshow


Related posts:
  • Images galleries-Flash/CSS : Where to get them?
  • Playing with jQuery Color Plugin and Color Animation
  • 15 Website for jQuery Enthusiast and Addicts
  • 15 Handpicked Fresh and Useful jQuery Tutorials
  • WordPress and jQuery: Troubleshooting, Implementing Sidebar Tabs and More

Comments

Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.

Cheap Tablet PC

Stay Connected

rss twitter facebook google pinterest
Get free updates in your inbox!

Subscribe via rss

Our Supporters

  • Cloud Storage
  • Dedicated Server
  • Modern Furniture
  • Online Business Printing
  • Online Backup
  • Logo Design
  • Wow Gold
  • Web Hosting UK
  • Secure and protect your business with SiteLock.
  • Festklänningar
  • Blogroll

    AnimHut
    Designmodo – Web Design
    Design Superhero
    Inspireyourway
    iBrandStudio
    OurTuts
    Skyje
    TextureQualityPro
    Stock Images
    Vector Pack
    365icon
    TexTuts
    • About
    • Contact
    • Contribute
    • Privacy Policy

    Copyright © 2008-2013 Desizn Tech

    Theme by Kawsar Ali.