We remember a few years ago, Flash is one of favorite technologies used by web designers to add animation and effects to the website. Nowadays, Flash is dead, HTML5 and jQuery replaces the flash capability to create animated website element and video player.

jQuery provides various types of UI effects. You can create image sliders with beautiful transition effects, creates a toggle effect (hide and show elements), animated loading progress, parallax scrolling effect for landing page, grid layout and much more.

In today’s post, we present the best collection of 90+ jQuery animations and effects that you can use for your next project. They are equipped with documentation that will explain to you step by step to implement the jQuery plugin.

Hopefully, this curated list of jQuery effects is useful for you, don’t forget to leave a comment about which your favorite plugins.

See Also: 30+ jQuery Price Sliders

96Flatpickr

flatpickr_a_lightweight_javascript_datetime_picker

Flatpickr is a new plugin built with javascript that yields design agnostic datetime pickers become incorporated into your website or app.

DOWNLOAD

95Interactive drag & drop mockup coloring

interactive_drag_drop_mockup_coloring

A fun drag & drop experiment website mockup by dragging and dropping a color droplet from a palette.

DOWNLOAD

94Bounce.js CSS3 animations generator

bounce_js_css3_animations_generator

Bounce.js lets you create tasty CSS3 driven animations in no time.

DOWNLOAD

93Offline.js Every app goes offline

offline_js_every_app_goes_offline

Offline.js is a library to automatically alert your users when they’ve lost internet connectivity, like Gmail.

DOWNLOAD

92Barba.js: A plugin for page transitions

barba_js_a_plugin_for_page_transitions

Barba.js is a lightweight and dependency free javascript plugin to produce fluid and smooth transitions betwixt your website pages.

DOWNLOAD

91Flickity Touch & responsive slider

flickity_touch_responsive_slider

Flickity is a javascript plugin for creating touch and responsive gallery sliders.

DOWNLOAD

90Algolia Places: Address autocomplete plugin

algolia_places_address_autocomplete_plugin

Algolia Places is a JavaScript plugin to show any input into a lovely and easy-to-use address autocomplete component.

DOWNLOAD

89AniJS A library for CSS animations

anijs_a_library_for_css_animations

AniJS is a declarative handling library for CSS animations. The main objective is always to provide an eloquent, an easy task to translate, and quick to develop environment.

DOWNLOAD

88shine.js Library for pretty shadows

shine_js_library_for_pretty_shadows

shine.js is a javascript library for producing pretty shadows. It works in browsers that support textShadow or boxShadow and auto-prefixes if required.

DOWNLOAD

87Responsive Elements JS plugin

responsive_elements_js_plugin

Responsive Elements is a good javascript plugin as possible effortlessly integrate into your website for changing the part of your elements in line with the size they occupy.

DOWNLOAD

86mojs Motion graphics library

mojs_motion_graphics_library

mojs is a motion graphic javascript library for the web for creating stunning animations.

DOWNLOAD

85PhotoSwipe JS photo gallery

photoswipe_js_photo_gallery

PhotoSwipe is a javascript plugin for creating awesome lightbox photo galleries.

DOWNLOAD

84fullPage.js Fullscreen scrolling pages

fullpage_js_fullscreen_scrolling_pages

fullPage.js is a jQuery plugin for producing stunning fullscreen scrolling websites.

DOWNLOAD

83Salvattore jQuery Masonry layouts

salvattore_jquery_masonry_layouts

Salvattore is a jQuery Masonry alternative for producing awesome designs without CSS inline design. This project was made and coded by Rolando Murillo and Giorgio Leveroni.

DOWNLOAD

82Grade.js: A library to generate gradients from images

grade_js_a_library_to_generate_gradients_from_images

Grade.js is a JavaScript library released by Ben Howdle that automatically yields free gradients through the top two principal colours in supplied images.

DOWNLOAD

81Presentation slideshow template

presentation_slideshow_template

A simple but nice presentation template coded with few lines of CSS and jQuery that can be used to generate gorgeous web slides.

DOWNLOAD

80Fitter Happier Text JS plugin

fitter_happier_text_js_plugin

Fitter Happier Text is a javascript plugin for creating performant, fully fluid headings.

DOWNLOAD

79Animating checkbox and radio buttons SVG + JS

animating_checkbox_and_radio_buttons_svg_js

A nice checkbox and radio buttons animations utilizing SVGs and javascript. The way of animating the SVG paths is by Jake Archibald.

DOWNLOAD

78Auto-hiding header with CSS and jQuery

autohiding_header_with_css_and_jquery

a Medium-style auto-hiding header with few lines of CSS and jQuery.

DOWNLOAD

77ProgressBar.js Responsive progress bars

progressbar_js_responsive_progress_bars

ProgressBar.js is a lightweight javascript plugin for creating beautiful and responsive progress bars with animated SVG paths.

DOWNLOAD

76Midnight.js jQuery plugin to switch headers

midnight_js_jquery_plugin_to_switch_headers

Midnight.js is a jQuery plugin that switches between multiple header designs while you scroll, which means you always have a header that appears great with all the content below it.

DOWNLOAD

75Pace.js Progress bars for websites

pace_js_progress_bars_for_websites

Pace.js is a new plugin for effortlessly showing fancy progress bars while is your website is loading. Pace will even immediately monitor your ajax requests, event cycle lag, document ready state, and elements in your web page to decide the progress.

DOWNLOAD

74Chocolat.js Lightbox jQuery plugin

chocolat_js_lightbox_jquery_plugin

Chocolat.js is a totally free jQuery plugin for producing lightboxes. Its lightweight, responsive-ready and very effective.

DOWNLOAD

73Paral & Lax Easy parallax effect

paral_lax_easy_parallax_effect

A cool and simple parallax effect made with some lines of CSS and jQuery. Coded by Daniel Riemer.

DOWNLOAD

72CLNDR.js jQuery calendar plugin

clndr_js_jquery_calendar_plugin

CLNDR.js is a jQuery plugin for producing calendars. Unlike many calendar plugins, this 1 doesnt generate markup.

DOWNLOAD

71Vex JS dialog library

vex_js_dialog_library

Vex is a modern dialog library which can be highly configurable, easily customisable, and gets out of the way.

DOWNLOAD

70Content filter with CSS & jQuery

content_filter_with_css_jquery

An incredible tutorial describing how to produce a slide-in filter panel driven by CSS and jQuery.

DOWNLOAD

69Adaptive Background JQuery plugin

adaptive_background_jquery_plugin

Adaptive Background is a jQuery plugin for extracting dominant tints from images and putting it on to its moms and dad.

DOWNLOAD

68lazySizes Lazy load JS plugin

lazysizes_lazy_load_js_plugin

lazySizes could be the ultimate and lightweight lazyLoader which lazy lots images, iframes and scripts.

DOWNLOAD

67TheaterJS Typing effect plugin

theaterjs_typing_effect_plugin

TheaterJS is a typing effect mimicking human behavior. A javascript plugin created by Zhouzi.

DOWNLOAD

66Unison.js A plugin to name breakpoints

unison_js_a_plugin_to_name_breakpoints

Unison.js is a tiny plugin that allows you to declare named breakpoints in one destination and immediately sync them across your javascript and markup.

DOWNLOAD

65Book preview with BookBlock

book_preview_with_bookblock

A tutorial for producing an appearance inside effect for guide previews made up of the BookBlock script released by Codrops.

DOWNLOAD

64MixItUp 2 Powerful jQuery sorting plugin

mixitup_2_powerful_jquery_sorting_plugin

MixItUp 2 is a jQuery plugin for managing any categorised or ordered content like portfolios, galleries and blog sites.

DOWNLOAD

63pagePiling.js Plugin for scrolling sites

pagepiling_js_plugin_for_scrolling_sites

pagePiling.js is a jQuery plugin to create a scrolling pile of sections for the website.

DOWNLOAD

62Switch: A simple javascript plugin

switch_a_simple_javascript_plugin

A powerful javascript plugin for creating iOS design switches from simple checkboxes. The plugin comes with a couple of options and callbacks that help you to get incorporate a switch in your UI in several ticks.

DOWNLOAD

61Roll.js Scroll tracking with javascript

roll_js_scroll_tracking_with_javascript

Roll.js is a tiny javascript library to help you keep track of place, scrolling, and pagination.

DOWNLOAD

60DropzoneJS Drag & drop file upload

dropzonejs_drag_drop_file_upload

DropzoneJS is a good available source library that delivers drag & fall file uploads with image previews.

DOWNLOAD

59Underline.js Animate text underline

underline_js_animate_text_underline

Underline.js is a javascript library to draw and animate the most perfect and playful text underline.

DOWNLOAD

58baguetteBox.js Javascript lightbox

baguettebox_js_javascript_lightbox

baguetteBox.js is a new lightbox plugin built in pure Javascript to create image galleries. It provides support for responsive images, CSS3 transitions, touch screen devices, etc.

DOWNLOAD

57Slick jQuery carousel plugin

slick_jquery_carousel_plugin

Slick is a totally responsive jQuery carousel plugin that supports many of good use choices and touch swiping.

DOWNLOAD

56Mobile menu animations

mobile_menu_animations

Three awesome menu animations for mobile devices created using simply few lines of CSS. Designed and coded by Virgil Pana.

DOWNLOAD

55Article intro effects

article_intro_effects

Accumulation of effects applied to title headers of articles with a fullscreen image produced by Codrops.

DOWNLOAD

54ReadRemaining.js jQuery plugin

readremaining_js_jquery_plugin

ReadRemaining.js is a jQuery plugin to tell your readers how long theyll have to get through your article.

DOWNLOAD

53Particleground Particle backgrounds with jQuery

particleground_particle_backgrounds_with_jquery

Particleground is a jQuery plugin for snazzy background particle systems.

DOWNLOAD

52Intro.js JS plugin for step-by-step- guides

intro_js_js_plugin_for_stepbystep_guides

Intro.js is a javascript plugin for creating better introductions to web sites and features with step-by-step guides.

DOWNLOAD

51Favico.js Animated badges for favicons

favico_js_animated_badges_for_favicons

Favico.js is a plugin for animating your favicon with badges. You can customise form of animation, background colour and text color.

DOWNLOAD

50At.js Autocomplete library

at_js_autocomplete_library

At.js is a github-like textarea autocomplete library supporting ContentEditable mode too.

DOWNLOAD

49Datedropper jQuery plugin

datedropper_jquery_plugin

Datedropper is a jQuery plugin that provides a fast and simple way to manage dates for input areas.

DOWNLOAD

48Slidr.js JS library for creating slides

slidr_js_js_library_for_creating_slides

Slidr.js is an easy, lightweight javascript library for adding slide transitions to your page.

DOWNLOAD

47Slideout.js Touch navigation menu

slideout_js_touch_navigation_menu

Slideout.js is a lightweight and dependency-free plugin for creating touch slide navigation menu for web and mobile apps.

DOWNLOAD

46Morphing buttons concept

morphing_buttons_concept

Some stunning morphing buttons produced by Codrops team, where in fact the action element morphs into a component.

DOWNLOAD

45Lightgallery.js: Full-featured JS plugin for lightbox galleries

lightgallery_js_fullfeatured_js_plugin_for_lightbox_galleries

Lightgallery.js is a robust and versatile JavaScript plugin released by Teamwave to making awesome lightbox galleries. It is fully responsive, supports touch gestures, includes many of good use choices and it’s also effortlessly customisable via CSS.

DOWNLOAD

44Bricks.js: A light & fast masonry plugin

bricks_js_a_light_fast_masonry_plugin

Bricks.js is a javascript plugin for creating masonry layouts.

DOWNLOAD

43Headroom.js A plugin for hiding headers

headroom_js_a_plugin_for_hiding_headers

Headroom.js is a lightweight, superior JS widget that allows you to definitely conceal your header once you scroll.

DOWNLOAD

42One page scroll jQuery plugin

one_page_scroll_jquery_plugin

A wonderful jQuery plugin for creating an Apple-like one web page scrolling website with One Page Scroll plugin.

DOWNLOAD

41Product grid with filter system

product_grid_with_filter_system

A ready-made exemplary case of a product grid with filtering system utilizing Isotope.

DOWNLOAD

40Strip Responsive lightbox plugin

strip_responsive_lightbox_plugin

Strip is a jQuery lightbox plugin that only partially covers the web page. This will make it less intrusive and leaves room to connect to the page on larger screens while giving smaller mobile phones the classic lightbox experience.

DOWNLOAD

39flowupLabels.js Labels like placeholders

flowuplabels_js_labels_like_placeholders

flowupLabels.js is a tiny plugin in order to make augments form labels behave like placeholders, but with a twist.

DOWNLOAD

38Trampoline effect with CSS and SVG

trampoline_effect_with_css_and_svg

A little playful content navigation effect that makes use of the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline.

DOWNLOAD

37FlowType.js Auto adjust font size plugin

flowtype_js_auto_adjust_font_size_plugin

FlowType.js is a javascript plugin for automatically adjust font-size and line-height in relation to a component width.

DOWNLOAD

36Minigrid Minimal cascading grid layout

minigrid_minimal_cascading_grid_layout

Minigrid is a minimal and lightweight javascript plugin for producing masonry-style grid layouts.

DOWNLOAD

35iconate.js Trendy animations for icons

iconate_js_trendy_animations_for_icons

iconate.js is tiny performant javascript library for cross-browser icon change animations in your projects.

DOWNLOAD

34Simple accordion with CSS and jQuery

simple_accordion_with_css_and_jquery

A simple accordion comprised of CSS with a few line of jQuery. It also show ups the number of components of any subcategory.

DOWNLOAD

33Coreographer-js: A JS library for complex animations

coreographerjs_a_js_library_for_complex_animations

Coreographer-js is a vanilla javascript library released by Christine Cha for creating complex animations predicated on activities like scroll, mousemove, etc.

DOWNLOAD

32MediumEditor plugin

mediumeditor_plugin

MediumEditor is a clone of medium.com inline editor toolbar written utilizing vanilla JavaScript .

DOWNLOAD

31Monocle list CSS + JS

monocle_list_css_js

A snippet for producing a monocle effect, with some listed items under a magnified area. Coded by hakimel.

DOWNLOAD

30Animated page transition with Ajax

animated_page_transition_with_ajax

A tutorial that explains how exactly to produce an ajax powered page change, with a slide-in content animation triggered by a side tabbed navigation.

DOWNLOAD

29NProgress.js progress bar

nprogress_js_progress_bar

NProgress.js is an awesome javascript plugin for creating nanoscopic progress bars.

DOWNLOAD

28jQuery Tip Cards plugin

jquery_tip_cards_plugin

jQuery Suggestion Cards is a plugin for producing a card layout that let your user flip through it like you see on Google guidelines.

DOWNLOAD

27ScrollTrigger: A small library for scroll animations

scrolltrigger_a_small_library_for_scroll_animations

ScrollTrigger is a lightweight javascript library that can be used to trigger classes on HTML elements based on scroll place.

DOWNLOAD

26Morphing modal window

morphing_modal_window

A call-to-action button that animates and turns into a full-size modal window with a morphing effect.

DOWNLOAD

25Intense images JS plugin

intense_images_js_plugin

Intense images is a stand alone javascript library for viewing images on the complete, complete screen.

DOWNLOAD

24Scrollanim: CSS3 + JavaScript scroll animation library

scrollanim_css3_javascript_scroll_animation_library

Scrollanim is a lightweight CSS3 and JavaScript library that you could embed in your web project generate stunning scroll animations.

DOWNLOAD

23Parallax.js

parallax_js

Parallax.js is a tiny, simple JavaScript library that responds to the orientation of a smart device, offsetting layers depending on their depth within a scene.

DOWNLOAD

22Credit card form JS plugin

credit_card_form_js_plugin

Card takes any credit card form and also make it the best area of the checkout process . All things are created with pure CSS, HTML, and Javascript no images required.

DOWNLOAD

21Jelly Scroll effect

jelly_scroll_effect

The following is a great jelly scroll effect for internet sites and apps made with javascript. Developed by Lego Mushroom.

DOWNLOAD

203D Curtain effect

3d_curtain_effect

A list of split blocks that reunite on scrolling, simulating a motion over the z-axis by using CSS transformations and jQuery.

DOWNLOAD

19Full screen vertical scroll jQuery

full_screen_vertical_scroll_jquery

FSVS is a straightforward complete screen vertical slider using CSS3 transitions then followed up by a jQuery fallback.

DOWNLOAD

18BackgroundCheck JS

backgroundcheck_js

BackgroundCheck is a javascript plugin for immediately switching to a darker or a lighter form of a feature depending on the brightness of images behind it.

DOWNLOAD

17Scroll effect CSS+JS

scroll_effect_cssjs

an incredible scrolling effect tutorial by Codrops.

DOWNLOAD

16Pt Create points, forms and spaces?

pt_create_points_forms_and_spaces

Pt.js is a javascript plugin for creating interactive backgrounds with points, forms and space.

DOWNLOAD

15ImageLightbox.js Responsive and touch-friendly plugin

imagelightbox_js_responsive_and_touchfriendly_plugin

ImageLightbox.js is a new lightweight, responsive and touch-friendly lightbox plugin released by Osvaldas Valutis.

DOWNLOAD

14in-view: A JS utility to detect elements inside the viewport

inview_a_js_utility_to_detect_elements_inside_the_viewport

in-view.js is a lightweight , dependency-free, JavaScript energy to detect whenever a DOM element gets in or exits the viewport.

DOWNLOAD

13Vivus.js SVG animation

vivus_js_svg_animation

Vivus is a little JavaScript class to make animations with SVGs in a website.

DOWNLOAD

12Page loading effects with SVG

page_loading_effects_with_svg

A set of creative page loading effects by Codrops that use SVG animations with Snap.svg.

DOWNLOAD

11scrollReveal.js On-scroll reveal animations with JS

scrollreveal_js_onscroll_reveal_animations_with_js

scrollReveal.js is a javascript plugin for creating nice animations and keep just how elements fade in, triggered if they enter the viewport.

DOWNLOAD

10ElastiStack JS dragging interaction

elastistack_js_dragging_interaction

ElastiStack is only a little script that lets you navigate through a stack of products by dragging away the first one.

DOWNLOAD

9Sir Trevor JS Inline editor

sir_trevor_js_inline_editor

Sir Trevor is rich content modifying entirely re-imagined for the web: an intuitive editor for web content which doesn’t presuppose such a thing how it is rendered.

DOWNLOAD

8Layzr.js Lazy load plugin

layzr_js_lazy_load_plugin

Layzr.js is a little, fast, contemporary, and dependency-free library for lazy loading images.

DOWNLOAD

7Fit.js Fit things into other things

fit_js_fit_things_into_other_things

Fit.js is a straightforward and lightweight javascript plugin that help you fit things into other activities.

DOWNLOAD

6Hopscotch Tour across pages

hopscotch_tour_across_pages

Hopscotch is a framework making it simple for designers to incorporate product tours with their pages.

DOWNLOAD

5Material Design preloader

material_design_preloader

A jQuery plugin that recreates the Material Design preloader.

DOWNLOAD

4Flippin 3D countdown CSS + JS

flippin_3d_countdown_css_js

An interesting snippet for creating a pleasant flippin 3D countdown animation with CSS and Javascript.

DOWNLOAD

3Scattered Polaroids gallery effect

scattered_polaroids_gallery_effect

A flat-style Polaroid gallery effect where in fact the items are scattered randomly in a container.

DOWNLOAD

2Font-To-Width: a plugin to adjust text lines width

fonttowidth_a_plugin_to_adjust_text_lines_width

Font-To-Width is a script by Nick Sherman and Chris Lewis that takes advantageous asset of large type families to fit pieces of text snugly within their containers.

DOWNLOAD

1Sliding out panels with HTML & CSS

sliding_out_panels_with_html_css

A quick tutorial by CodyHouse that displays how exactly to create a website hero manufactured from sliding panels with few lines of HTML, CSS and javascript.

DOWNLOAD

SHARE

LEAVE A REPLY