Browse By

100 Magical Effects of jQuery Part II

You can utilize jQuery to handle events, generate animations, and even add an Ajax support into your web applications in a very easy way. Certainly you can use JavaScript to execute all the jQuery functions, but if you use it, your programming times will reduce and your effectiveness will increase, and that’s the real magic of jQuery. On this roundup we will show you the most captivating and creative jQuery tools and effects to inspire you, from animations to slideshows, you will find plenty of effects on this article, hope you enjoy it.

On the old times, text were just system fonts and large contents, but now we have learned that you can do a lot more things with texts. This section covers all type of text effects, from transitions, to stylish customizations, you will find a lot of ways to pimp up your texts with our beloved jQuery.

51. jQuery FontEffect

jQueryeffects51 100 Magical Effects of jQuery Part II

FontEffect is a jQuery plugin that adds some effects to the HTML texts.

52. jQuery text gradient

jQueryeffects52 100 Magical Effects of jQuery Part II

A decent attempt to create a text gradient effect in jQuery, For sure that this effect deserves to get featured in here.

53. jQuery label effects

jQueryeffects53 100 Magical Effects of jQuery Part II

Nice effect series to stylize your text using  jQuery.

54. Fade Colors Using jQuery

jQueryeffects62 100 Magical Effects of jQuery Part II

Add fading gradients to your text with this pretty jQuery effect.

55. Cross browser text-shadow

jQueryeffects54 100 Magical Effects of jQuery Part II

A fixed version of this jQuery effect that adds a shadow behind your texts.

56. Grab bag, jQuery text effects

jQueryeffects55 100 Magical Effects of jQuery Part II

A short list of jQuery effects that works with texts, adding effects to them.

57. jTicker

jQueryeffects56 100 Magical Effects of jQuery Part II

A nice text effect with jQuery, you can find all the information about it on the original link.

58. Effects jTypeWriter

jQueryeffects57 thumb 100 Magical Effects of jQuery Part II

With this jQuery effect, you can apply different looks to your texts that emulate a typewriter.

59. 3D Flying Text in jQuery

jQueryeffects58 thumb 100 Magical Effects of jQuery Part II

On this site you will find the way to create a flying 3D text effect with jQuery.

60. Airport

jQueryeffects59 thumb 100 Magical Effects of jQuery Part II

If you want to emulate the classic airport’s billboards that have ever-changing texts, this effect does that.

61. Flying Text With Fade Effect

jQueryeffects60 100 Magical Effects of jQuery Part II

With jQuery you can create nice effects, such as this fading flying text effect.

62. Codename Rainbows

jQueryeffects61 100 Magical Effects of jQuery Part II

With just a little code knowledge you can get these text effects without even opening Photoshop.

63. Fading color effect

jQueryeffects63 thumb 100 Magical Effects of jQuery Part II

Implementing this jQuery effect will add a subtle gradient to show up every time you roll over a link.

64. Playing with jQuery Color Plugin and Color Animation

jQueryeffects64 100 Magical Effects of jQuery Part II

On this link you will find how to make colorful menu elements with jQuery.

65. It’s a Rainbow! – Color Changing Text and Backgrounds

jQueryeffects65 100 Magical Effects of jQuery Part II

Rotate between different color tones whilst displaying a single picture.

66. Font Size Based On Word Count

jQueryeffects66 100 Magical Effects of jQuery Part II

Depending of the amount of words that your text block possesses, the jQuery effect will establish the proper font size for it.

67. Use the jQuery UI to Control the Size of Your Text

jQueryeffects67 100 Magical Effects of jQuery Part II

Elegant slider made with jQuery that allows you to adjust the font size of a block text according to your needs.

68. Simple jQuery Text Resizer

jQueryeffects68 100 Magical Effects of jQuery Part II

Simple but helpful jQuery text resizer to optimize your website’s performance.

69. jQuery Approach

jQueryeffects69 100 Magical Effects of jQuery Part II

A rollover jQuery effect that makes that every time you place your cursor in front of the text, it changes in terms of color and size.

70. Zooming with jQuery

jQueryeffects70 100 Magical Effects of jQuery Part II

Simple complement that allows you to zoom a text many times for a better reading.

71. AutoCompleter

jQueryeffects71 100 Magical Effects of jQuery Part II

Useful jQuery implementation that shows an auto complete box when you’re entering a text.

72. 3D Tag Sphere

jQueryeffects72 100 Magical Effects of jQuery Part II

Create an elegant 3D tag sphere that works just like a tag cloud.

73. jQuery Word Counter

jQueryeffects73 100 Magical Effects of jQuery Part II

The previous screenshot shows you a jQuery tool where you can edit the limit of characters within a HTML textarea.

Carousels / Slideshows

This section is about image presentations and the effects that have been made to fulfill that task. Carousels like its name says, are image galleries where you can see the pictures moving all the time. Slideshows are similar than carousels but less 3D and more gallery-like, anyway, they’re both quite similar and that’s why we decided to include them on the same category.

If you want to find more brilliant galleries made with jQuery, visit our article “100 best jQuery image gallery plugins”.

74. Cloud Carousel

jQueryeffects74 100 Magical Effects of jQuery Part II

Reflections and a natural movement are two of the most relevant aspects of this carousel.

75. Step Carousel Viewer

jQueryeffects75 100 Magical Effects of jQuery Part II

Nice carousel, although you probably will perceive this more like a slideshow than a carousel.

76. BlogSlideShow

jQueryeffects76 100 Magical Effects of jQuery Part II

A fancy image viewer to fancy a little your website, it’s done entirely with jQuery.

77. BoxSlider 2.0

jQueryeffects77 100 Magical Effects of jQuery Part II

Classic slideshow created with jQuery, ideal for implementing on many websites.

78. Slick Auto-Playing Featured Content Slider

jQueryeffects78 100 Magical Effects of jQuery Part II

Simple slider, functional and easy to adjust to your site’s needs.

79. Simple Controls Gallery

jQueryeffects79 thumb 100 Magical Effects of jQuery Part II

Great picture gallery created with jQuery.

80. CrossSlide

jQueryeffects80 100 Magical Effects of jQuery Part II

2KB of JavaScript are the essence of this lovely jQuery cross slider.

81. Highslide JS

jQueryeffects81 100 Magical Effects of jQuery Part II

Easy going jQuery image previewer, you can check the code and adjust it to your site.

82. FancyBox

jQueryeffects82 thumb 100 Magical Effects of jQuery Part II

Quoting their exact words, FancyBox is a tool for displaying images, HTML content and multi-media in a Mac-style “lightbox” that floats on top of web page.

83. Galleria

jQueryeffects83 100 Magical Effects of jQuery Part II

Nice gallery that you can use anytime on your site, specially on minimalistic places.

84. Polaroid Photo Viewer

jQueryeffects84 100 Magical Effects of jQuery Part II

Injecting jQuery into your web designs can help you make things like this Polaroid photo viewer.

85. Sliding Boxes and Captions

jQueryeffects85 100 Magical Effects of jQuery Part II

A basic idea with a great result, just playing with boxes and animations to generate this gallery.

86. ImageFlow

jQueryeffects86 100 Magical Effects of jQuery Part II

A friendly gallery developed with jQuery, works in a very elegant way.

87. Image Rotator with Preview

jQueryeffects87 100 Magical Effects of jQuery Part II

You will find quite amusing the images that these guys used making this image gallery.

88. Coin Slider

jQueryeffects88 100 Magical Effects of jQuery Part II

Great jQuery gallery, fabulous effects and transitions.

89. PieceMaker

jQueryeffects89 100 Magical Effects of jQuery Part II

As the description says, PieceMaker is a great open source 3D Flash image rotator gallery.

90. Revealing Photo Slider

jQueryeffects90 100 Magical Effects of jQuery Part II

Useful jQuery image slider, it’s interesting the way the images react to the mouse click.

91. BBC Radio 1 Zoom Tabs

jQueryeffects91 100 Magical Effects of jQuery Part II

Inspired on the latest BBC Radio 1 website, we find this jQuery effect that can be used as a gallery.

92. Leopard Dashboard

jQueryeffects92 100 Magical Effects of jQuery Part II

Great Mac emulation with jQuery, these are the kind of thins that can make you love jQuery.

93. Z-Index and jQuery

jQueryeffects93 100 Magical Effects of jQuery Part II

On this effect made with jQuery, you will learn how to make a pile of pictures that work as a gallery.

94. Contextual Slideout Tips With jQuery & CSS3

jQueryeffects94 100 Magical Effects of jQuery Part II

An easy way to create some nice contextual slideouts with jQuery.

95. Zoomer Gallery

jQueryeffects95 thumb 100 Magical Effects of jQuery Part II

Pure Flash style, zero ActionScript, 100 % jQuery, this gallery works with a rollover effect that increases the picture’s size when highlighting it.

96. Advanced background slideshow

jQueryeffects96 100 Magical Effects of jQuery Part II

Full size background slider, a good way to place more than just a generic photograph.

97. Panning Slideshow

jQueryeffects97 100 Magical Effects of jQuery Part II

If you select the proper pictures, you will have in your hands a gorgeous slideshow.

98. Sliding Login Panel

jQueryeffects98 100 Magical Effects of jQuery Part II

Many developers can remember themselves doing a similar panel a few years ago on ActionScript and well, it’s  good to find it on jQuery.

99. Beautiful Background Image Navigation with jQuery

jQueryeffects99 100 Magical Effects of jQuery Part II

Astounding navigation system, it’s brilliant the treatment given to the image transitions.

100. iCarousel

jQueryeffects100 100 Magical Effects of jQuery Part II

Elegant jQuery carousel to display a series of pictures in a very clean way.

101. Awesome Bubble Navigation

jQueryeffects101 100 Magical Effects of jQuery Part II

Brilliant navigation system, it shows a different way of developing a site’s navigation. For sure it’s a great way to take advantage of jQuery.

102. Semitransparent Rollovers

jQueryeffects103 100 Magical Effects of jQuery Part II

An easy way to create a subtle translucent rollover effect with jQuery.

103. Spacegallery

jQueryeffects116 thumb 100 Magical Effects of jQuery Part II

A nice way to use jQuery, very tech-like gallery, ideal for tech and engineering applications.

104. Morphing Gallery

jQueryeffects117 100 Magical Effects of jQuery Part II

Pretty cool, it’s a different way of using jQuery on developing a gallery.

105. Pikachoose

jQueryeffects118 100 Magical Effects of jQuery Part II

There’s no Pikachu like you think after reading the title, only a fancy jQuery gallery.

Image Edition

This category gathers all the jQuery effects that are designed for editing images, effects such as cropping or rescaling are included on this part of the showcase, probably you will find more than one of this effects quite useful.

106. Crop Example

jQueryeffects102 100 Magical Effects of jQuery Part II

Useful jQuery effect that lets you crop an image to make the adjustments that you consider necessary.

107. jQuery Demo: Creating a Sliding Image Puzzle

jQueryeffects104 100 Magical Effects of jQuery Part II

If you want to have some fun, you should take a look at this amusing jQuery effect.

108. jCrop

jQueryeffects105 100 Magical Effects of jQuery Part II

Similar to the Photoshop’s crop, this is certainly an useful jQuery tool.

109. jQZoom

jQueryeffects107 100 Magical Effects of jQuery Part II

You can make a nice jQuery zoom just like the one on the previous screenshot, it offers different ways of zooming in and out.

110. jQuery Virtual Tour

jQueryeffects108 100 Magical Effects of jQuery Part II

An extension to Single Panorama Viewer, which is a great jQuery effect to take 360 degrees observations.

111. AnythingZoomer

jQueryeffects109 100 Magical Effects of jQuery Part II

You can zoom in over anything, from texts to images to check out all the little details.

112. ImgAreaSelect

jQueryeffects110 100 Magical Effects of jQuery Part II

Simple image area selector with jQuery, it shows you the coordinates and dimensions of the selection.

113. PanView

jQueryeffects111 100 Magical Effects of jQuery Part II

Hold down your mouse and start navigating across an image.

114. Rounded Images

jQueryeffects111A 100 Magical Effects of jQuery Part II

A nice way to stylize your pictures with jQuery by giving them  nice rounded corners.

115. jQuery Corner Demo

jQueryeffects112 100 Magical Effects of jQuery Part II

There’s more than one way of using rounded corners, as you can see on the previous screenshot.

116. PNG Overlay

jQueryeffects113 100 Magical Effects of jQuery Part II

A good way to fancy your images so they can get a good looking overlay vibe.

117. jQuery for Background

jQueryeffects114 100 Magical Effects of jQuery Part II

Insert an animated background to your buttons with jQuery.

118. Resizeable Background Image

jQueryeffects115 100 Magical Effects of jQuery Part II

The name says it all, a resizable background image with jQuery.

119. Circular Motion Effect

jQueryeffects119 thumb 100 Magical Effects of jQuery Part II

Nice circle series that together create a pretty cool navigation system.

120. Photo Zoom Out Effect

jQueryeffects120 100 Magical Effects of jQuery Part II

Great jQuery gallery, not just a simple slider, it plays with proportions whilst rolling over.

121. Photoshoot Effect

jQueryeffects121 100 Magical Effects of jQuery Part II

Using jQuery you can obtain fabulous effects such as this amazing photoshoot effect.

122. Interactive Picture

jQueryeffects122 100 Magical Effects of jQuery Part II

With this tool you can add interactivity to an image via jQuery, ideal for making descriptions of elements within a picture.

122. Cloud Zoom

jQueryeffects123 thumb 100 Magical Effects of jQuery Part II

Great cloud zoom effects, you will definitely love the glow effect used on this jQuery effect.

123. Apple-like retina effect

jQueryeffects124 100 Magical Effects of jQuery Part II

For those who are familiar with the Apple products, you will enjoy this jQuery effect.

124. Micro Image Gallery

jQueryeffects125 100 Magical Effects of jQuery Part II

Clean and elegant jQuery gallery, ideal for implementing on minimalistic websites.

125. Image Highlighting and Preview

jQueryeffects126 100 Magical Effects of jQuery Part II

Nice way of highlighting pictures within a document.

126. Image splitting effect

jQueryeffects127 100 Magical Effects of jQuery Part II

Very simple effect that can be used along with galleries and stuff.

127. ImjQMosaic

jQueryeffects128 100 Magical Effects of jQuery Part II

jQuery implemented as a highlighter tool in a mosaic style.

128. URL Screenshot Preview

jQueryeffects129 100 Magical Effects of jQuery Part II

With this tool you can show a preview to any URL after a rollover in front of a hyperlink.

Utilities and Extras

This part covers those jQuery effects and tools that did not fit on any of the previous categories, you will find some pretty interesting things on this final section of the showcase, enjoy it.

129. ColorPicker

jQueryeffects130 100 Magical Effects of jQuery Part II

It’s always useful to have a color selector at the reach of your hands, maybe you want to keep this under your selections.

130. Rotating Billboard System

jQueryeffects130A 100 Magical Effects of jQuery Part II

You can use this great effect on your site instead of a slideshow and without a single line of ActionScript.

131. jQuery Rotate

jQueryeffects131 100 Magical Effects of jQuery Part II

If you’re not happy with having straight grid and straight pictures, then you can use this jQuery effect to fix it.

132. The Sexy Curls

jQueryeffects132 100 Magical Effects of jQuery Part II

Beautiful jQuery effect to see the truth behind a website, which means seeing the code behind the design.

133. Simple Tooltips

jQueryeffects133 100 Magical Effects of jQuery Part II

Create little tool tips to add to your website’s elements with this jQuery tool.

134. Rezoner’s jEffects

jQueryeffects134 100 Magical Effects of jQuery Part II

I know that this one may fit on the galleries section, but because of its quality we moved it here.

135. jQuery Touchwipe

jQueryeffects135 100 Magical Effects of jQuery Part II

Obtain wipe gesture from touch screens, works with iPhone, iPad, iPod touch and Android.

136. Image Blur

jQueryeffects136 100 Magical Effects of jQuery Part II

This one could be inside the images area, but we think that it’s a pretty cool effect and deserves to be considered as unique.

137. Before / After

jQueryeffects137 100 Magical Effects of jQuery Part II

Great jQuery plugin to make comparisons, such as the one shown on the screenshot.

138. Music player with mouse gestures

jQueryeffects138 100 Magical Effects of jQuery Part II

A jQuery effect that will improve the interactivity of your websites by the using of click and drag properties.

139. Greyscale Hover Effect

jQueryeffects139 100 Magical Effects of jQuery Part II

Lovely hover effect that turns everything to a greyscale when rolling over.

140. Tetris with jQuery

jQueryeffects140 100 Magical Effects of jQuery Part II

Well what can we say about this one?, you will definitely have a lot of fun with this.

141. jQTwitter

jQueryeffects141 100 Magical Effects of jQuery Part II

If you need to add a Twitter box to your site, jQuery offers this nice solution for you.

142. jQuery Animation Plugin

jQueryeffects142 100 Magical Effects of jQuery Part II

An easy and effective way to set an image scale with a simple jQuery syntax.

143. jQuery easing animation

jQueryeffects143 100 Magical Effects of jQuery Part II

Similar to Flash’s McTween, this jQuery series has been made to help you make amazing animations.

144. Background Position Effect

jQueryeffects144 100 Magical Effects of jQuery Part II

Quote: Adds the ability to do background-position animations from  jQuery 1.2, and newer.

145. jQuery Bounce Page

jQueryeffects145 100 Magical Effects of jQuery Part II

A bouncing box where you can place text and animate it.

146. CanvasSwap

jQueryeffects146 100 Magical Effects of jQuery Part II

If you need to save space but still show a lot of pictures, you might want to check this jQuery tool.

147. Several jQuery Animations

jQueryeffects147 100 Magical Effects of jQuery Part II

A large list of jQuery animations developed by the people of Tutorialized for you to check out.

148. jScratchcard

jQueryeffects148 100 Magical Effects of jQuery Part II

Pretty cool, it emulates a scratch card, like the classic lotto tickets you buy on the market.

149. jQuery Flight Board

jQueryeffects149 100 Magical Effects of jQuery Part II

Similar to an effect that we showed you before, this is definitely a great idea.

150. Dock and Stack

jQueryeffects150 100 Magical Effects of jQuery Part II

And the final effect is a nice recreation of the Mac desk, which is something that many people really like. OK guys, that was it for this countdown, some of the nicest and most useful jQuery effects that are ready to give you a hand when developing your own projects, let us know your opinion and tell us about additional effects that we did not include on our showcase, see you next time.

 100 Magical Effects of jQuery Part II

3 thoughts on “100 Magical Effects of jQuery Part II”

  1. yuppers says:

    good read, post more!

  2. college scholarship says:

    nice post. thanks.

  3. bathroom renovation pictures says:

    Excellent site tons of excellent steam shower knowledge
    here

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>