25 Simple & Lightweight jQuery Effects

Hello there, Today I want to give a number of useful jQuery effects we have gathered for you. These plugins will allow you to create some amazing animation on your own website and its eye catching presence.

See Also: 20 Useful jQuery and CSS3/HTML5 Tutorials

These plugins are very lightweight and simple to utilize, it will help you to create various effects from smooth transitions to overlapping animations, these effects are designed to generate animated switches between varying elements.

If you find concerning an alternative jQuery effects around that you simply think that could be put up within the selection. please share links on the comments part.

Raindrops.js

raindrops.js_raindrops_effect_plugin_for_jquery

Raindrops.js is a jQuery plugin to create raindrop effect on water. There are lots of option/settings to customize this plugin.

DemoDownload

cta.js

cta.js_animate_your_'actiontoeffect'_paths

cta.js or “Call to Animation” is a light-weight performant library to animate your “action-to-effect” paths.

DemoDownload

ClickSpark.js

clickspark.js_javascript_library_to_create_beautiful_particle_effects

ClickSpark.js is an open source particle effect tool for the frontend. It’s based on JavaScript and HTML5. ClickSpark.js adds beautiful particle effects to your JavaScript events.

The special feature is that image files can be used as single particles. It’s easily configurable and flexible.

DemoDownload

Overlapping Letters

overlapping_letters

Overlapping Letters is a jQuery plugin that automatically adds span tags to letters by using javascript.

DemoDownload

StackBlur.js

stackblur.js_fast_and_almost_gaussian_blur

StackBlur.js is a fast, almost Gaussian blur for canvas. It’s based on implementation of StackBlur algorithm.

DemoDownload

Flippant.js

flippant.js_javascript_library_for_flipping_elements

Flippant.js is a mini dependency-less UI lib for flipping over DOM nodes.

DemoDownload

jQuery Shakker

jquery_shakker_jquery_plugin_for_image_shakking

jQuery Shakker is a jQuery plugin to give any image a shaky effect. It’s pretty easy to use.

DemoDownload

Letter by Letter JS

letter_by_letter_js_jquery_plugin_for_typing_letter_by_letter_effect

Letter by Letter JS is a lightweight jQuery plugin to present text letter by letter on a HTML page. This text can appear as if was just being typed, or it can fade in more gently.

DemoDownload

reveal-it.js

revealit.js_jquery_plugin_for_animated_fadein_text_effects

reveal-it.js is a jQuery plugin that gradually reveals text from left to right to produce a fade-in effect.

DemoDownload

Effect Ideas for Card Stacks

effect_ideas_for_card_stacks

Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element.

DemoDownload

pageSwitch

pageswitch_javascript_library_to_create_page_switch_effects

pageSwitch is a javascript library to create page switch effects. It supports 121 switching animations.

DemoDownload

Geometryangle

geometryangle_jquery_plugin_for_geometrical_backgrounds

Geometryangle is a jQuery plugin to create fancy geometrical background for websites. Fast frame rate and highly customizable.

DemoDownload

jQuery Star Flashing Effect

jquery_star_flashing_effect

A tutorial about creating stars flashing effect by using jQuery and very easy to use.

DemoDownload

Pilpil

pilpil_progressive_image_loading

Pilpil is a tiny, pure JavaScript library for Progressive Image Loading with a blur effect to reduce the page load time; as seen on Medium.

DemoDownload

Material Design Hierarchical Display

material_design_hierarchical_display

A jQuery plugin to create Material Design hierarchical display animation effect.

DemoDownload

Fly to

fly_to_add_to_cart_fly_effect_with_jquery

Fly to is a lightweight jQuery plugin to create add to cart with cool fly effect.

DemoDownload

Creating Material Design Ripple Effects with SVG and Javascript

creating_material_design_ripple_effects_with_svg_and_javascript

An in-depth tutorial on how to build the ripple effect outlined under Google Material Design’s Radial Action specification and combine it with the powers of SVG and GreenSock.

DemoDownload

Image Figure Caption Effects

image_figure_caption_effects

This script transforms any image into a HTML5 compliant figure element with a nice caption.

DemoDownload

Fixed Background Effect with CSS and jQuery

fixed_background_effect_with_css_and_jquery

A simple templates that takes advantage of the background-attachment CSS property to create a fixed background effect, with the addition of a navigation to browse through the different sections.

DemoDownload

Motion Blur Effect with SVG and Javascript

motion_blur_effect_with_svg_and_javascript

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.

DemoDownload

PleaseWait.js

pleasewait.js_javascript_library_to_create_beautiful_loading_page

PleaseWait.js is a simple library to show your users a beautiful splash page while your application loads.

DemoDownload

jQuery Bloodforge Smoke Effect

jquery_bloodforge_smoke_effect

jQuery Bloodforge Smoke Effect plugin lets you to add a smoke effect background to any HTML element on the page

DemoDownload

Barba.js

barba.js_fluid_and_smooth_transition_between_websites_pages

barba.js is a small, flexible and dependency free library that helps you creating fluid and smooth transitions between your website’s pages.

DemoDownload

ShakeBorder

shakeborder_shake_and_border_effects_with_jquery

ShakeBorder is a jQuery plugin to create shake and border effects. It can be customize and very easy to use.

DemoDownload

Kubist

kubist_transforms_an_image_into_cubismlike_composition

Kubist transforms an ordinary image into cubism-like composition

DemoDownload

Rain & Water Effect Experiments

rain_water_effect_experiments

Some experimental rain and water drop effects made with WebGL and shown in different demo scenarios.

DemoDownload

Animated Heat Distortion Effects with WebGL

animated_heat_distortion_effects_with_webgl

A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.

DemoDownload

normalmap.js

normalmap.js_interactive_lighting_effects_with_jquery

normalmap.js is a library for creating simple interactive lighting effects using normal maps.

DemoDownload

TheaterJS

theaterjs_javascript_typing_effect_plugin

TheaterJS is basically a javascript typing effect plugin. Its particularity is to mimic human behavior.

DemoDownload

Leave a Reply

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

Close
Please support the site
By clicking any of these buttons you help our site to get better :)