Building an interactive map with jQuery instead of Flash
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.
Animated Sharing Bar With jQuery & CSS
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.
The youlove.us scrolling background effect explained
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.
Crafting an Animated Postcard With jQuery
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.
Building an Animated Cartoon Robot with jQuery
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.
Cloud of Bacon
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.
A Colorful Clock With CSS & jQuery
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.
jQuery OS X Stack and Drop Stack
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.
Old School Clock with CSS3 and jQuery
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.
Making a 3D Engine in jQuery
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!
Puffing Smoke Effect 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.
Plugins
jParallax
jParallax is a jQuery plugin that allows animation of simple parallax animations by animating the background-position of <div> elements.
jFlip
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.
The Sexy Curls jQuery Plugin!
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!
Easy Slider 1.7 – Numeric Navigation jQuery Slider
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.
AnythingSlider jQuery Plugin
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
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.
Flot
Flot
is a pure JavaScript plotting library for jQuery. It produces graphical
plots of arbitrary datasets on-the-fly client-side. Like Flash, this
plugin provides smooth and attractive graph for simple uses with nice
features, zooming and mouse tracking.
jCrop
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.
No comments:
Post a Comment