jQuery is a great JavaScript library, you can give a direction to your creativity when it comes to making stylish Image galleries, Menus, Animation Effects and attractive text effects using jQuery. Today we will show you tutorials on how to create mouse over text animation effects with jQuery with the help of these superb 23 examples. You can give color effects, scrolling effects, hovering, Fly, neon and light effects and much more through jQuery.
Apple-like Retina Effect With jQuery
Check this tutorial to know how the author has turned a static image into a fully functional "Retina effect" with only jQuery and CSS.
More Information on Apple-like Retina Effect With jQuery
jQuery Text Animation Effect – Fading color for inline text links
A simple UX trick that can be easily implemented into your web sites. With a few lines of jQuery it will make your text links fade to another color on rollover.
More Information on Fading color effect for inline text links using jQuery
Simple Banner Rotator Animation Effect With jQuery, php & MySQL
You can now create and randomly display banners on your site. Each of the banners features a neat jQuery animation effect, which you can customize to fit your own needs.
More Information on Simple Banner Rotator With PHP, jQuery & MySQL
jQuery Animation Effects Plugin – Approach
Approach is a jQuery plugin that allows you to animate style properties based on the cursor's proximity to an object.
More Information on jQuery Approach
MicroTut: The jQuery Hover Method
When building a navigation menu, or any other jQuery script, it is often necessary to have a robust method with which to define a mouse over and mouse out state. This is where the hover() method comes along.
More Information on MicroTut: The jQuery Hover Method
How to Create a 3D Tag Cloud in jQuery
With browsers rendering JavaScript faster than ever before, it's a great opportunity to get creative with jQuery. This tutorial will show how to create a scrolling 3D tag cloud
More Information on How to Create a 3D Tag Cloud in jQuery
Neon Text Effect With jQuery & CSS
Check this tutorial to know how to create a neon glow text effect with CSS and jQuery.
More Information on Neon Text Effect With jQuery & CSS
jParallax
jParallax is a jQuery parallax plugin. It turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport.
Circulate
we can animate the "top" value with one easing function while animating the "left" value with a different easing function.
Colortip – a jQuery Tooltip Plugin
This jQuery tooltip plugin is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.
More Information on Colortip – a jQuery Tooltip Plugin
Color Fading Menu Effect with jQuery
Here author will demonstrate how to perform colour fading menu effect with jquery and image merging.
More Information on Color Fading Menu with jQuery
Grid Accordion
A grid of cells expand both vertically (like a regular accordion) as well as horizontally to display the content they contain.
More Information on Grid Accordion
Leopard Desktop with jQuery using jqDock
Check how to use jQuery to create a completely coded Dashboard, just like Leopard! This can be handy in hiding a whole lot of gadgets or widgets you don't have space for
More Information on Leopard Desktop with jQuery using jqDock
BBC Radio 1 Zoom Tabs
The mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
More Information on BBC Radio 1 Zoom Tabs
JQuery Based Flipped Image Gallery with Bounce Effects
Image galleries are most important element of any website. Here, I have created a simple jQuery based flipped image gallery. On mouce hover the images will expand. Its simple and stylish gallery.
More Information on JQuery Based Flipped Image Gallery with Bounce Effects
Create a Stunning Sliding Door Effect with jQuery
Mouse over and mouse out event will move the corners diagonally out and in according to the mouse event.
More Information on Create a Stunning Sliding Door Effect with jQuery
How to Make a Threadless Style T-Shirt Gallery
There's a thumbnail which is a full sized image in a container div, which is smaller than the full sized image. The image is centered within it, but doesn't show entirely because overflow:hidden is turned on. When the mouse hovers over the thumbnail, overflow:hidden gets turned off, and the entire image is displayed.
More Information on How to Make a Threadless Style T-Shirt Gallery
flashlight
Your mouse works as a flashlight and you can read the content only where you are moving your mouse.
More Information on flashlight
Sproing! – Make An Elastic Thumbnail Menu
It Magnifies menu items when they are hovered over. Also Menu items expand upwards.
More Information on Sproing! – Make An Elastic Thumbnail Menu
Halftone Navigation Menu With jQuery & CSS3
It allows you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
More Information on Halftone Navigation Menu With jQuery & CSS3
a Smooth Animated Menu with jQuery
Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Here author will do just that by building a menu and animate it with some smooth effects.
More Information on a Smooth Animated Menu with jQuery
AnythingZoomer: jQuery Zoom Animation Effect
This is a jQuery zoom animation plugin, so you'll need to load the jQuery library first, then the plugin file, then invoke the new function on the area you wish to have zooming.
More Information on AnythingZoomer
jQuery PhotoShoot Plugin 1.0
The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder.
More Information on jQuery PhotoShoot Plugin 1.0
Did you like this collection of Beautiful jQuery Text Animation Effects Examples with Tutorials ?
Share your thoughts by commenting below
0 comments:
Post a Comment