JavaScript & jQuery

(69 submissions) | Mar 2, 2017

A list of cool and useful jQuery and JavaScript effects and animations for multiple purposes.

  • A cool effect made using CSS and JavaScript depicting the planet Mars rotating in 3D effect, as well as some text which together compose a cool presentation slide or card. The sphere has a constant rotation speed, but you can drag it as well to increase it.

  • A cool CSS and JavaScript transition effect that can easily be implemented on any website. The transition can be used for sliders and other types of elements on the site, like cards (like in the example).

  • A cool jQuery library that allows you to create simple tilt effects without taking up to much load time. The library is really lightweight and easy to install. It allows glare effects, simple parallax, floating, scale on hover and more.

  • This useful snippet created using pure JavaScript with little to none HTML or CSS use. It is a background color changing with a transitional effect, by clicking the screen an effect of bubble explosion will trigger the color to change.

  • A text effect made with jQuery showing a glitch. It is a cool code experiment if you want to achieve a mysterious effect on texts and the overall feel of your site. The Pen was created by Tim Rijkse, and you can grab it for free.

  • An attractive code snippet featuring a hover animation with a blurry lens effect. Purely crafted using jQuery making it a cool and attractive choice to integrate with interactive sites.

  • A superb project that generates a depth of field effect, letting you select where it is applied when hovering on any part of the image. The nice result is achieved through PNGs with alpha transparency and SVG filters in the mighty CSS3. It only works with Google Chrome, Safari, and FireFox.

  • A jQuery plugin to make your galleries become alive, applying stunning effects, highly customizable, and its performance is very fast and smooth with many features along with a minified version.

  • A JavaScript plugin that enables you to blur any HTML element through SVG filters and it allows you to generate the blur effect in the percentage you want.

  • A jQuery plugin for hierarchical animation effect displaying an image laid out in an array of material design tiles. It uses hierarchical timing, which is a transition that focuses your user’s attention.

  • jQuery TextFX is a plugin for text animation making it quite appealing. It requires you to install jquery.transit.js along with it since it uses CSS transforms instead of jquery.animate() transitions. It was made by Chris Cates and can be used freely.

  • A 3D tilted effect made in jQuery which activates when the user scrolls. It is similar to the effects of cover flow, and it’s perfect for photography websites and portfolios with tons of images. Licensed under the GNU General Public License.

  • Raindrops is a jQuery plugin for creating beautiful raindrops and wavy effects for any kind of web elements. It is inspired by an article about making a dynamic 2D water effect, adapting a JavaScript library and a jQuery plugin with the physics.

  • A nice CSS and jQuery effect for a navigation menu that reveals its items once the button is clicked, laying backwards the page content.

  • A library in JavaScript for creating animated SVG icon that morph into the next one. It applies the concept of Delightful details of the Material Design trend.

  • A jQuery effect that gradually reveals text from left to right with a fade-in effect. It is perfect for presentations, allowing you to modify the speed and other features. This plugin is free, it was created by erspark2002 and it is licensed under MIT.

  • Birdman is a jQuery plugin that allows you to animate text as in the credits of the movie “Birdman”, making sets of letters appear randomly. This plugin is free to download and can be used in any kind of project (commercial or personal). It was created by Christoph Matthies and it’s licensed under MIT.

  • Starfield is a simple jQuery plugin for adding a cool starry background to any website. To use it, you just need to add the .starfield() method on a selected div and modify the star density, the mouse scale and seed movement. It was created by rocketwagon.

  • A set of CSS and JS loading effects generator that allows you modifying the loading of a single page. It has around 10 effects in different shapes and sizes. You can also modify the color of the background and whether to have a message or not. It was created by Pathgather.

  • A jQuery plugin for creating slick, app look-alike sliding menus for your mobile website with only one line of JavaScript. It allows your app or mobile website to portray two menus, one in each side of the screen, resembling popular apps like Facebook, and very handy if your creation has lots of information to display.

  • A CSS and jQuery navigation that looks like a 3D effect when it appears. It is complemented with beautiful typography and outlined icons for major impact. It uses CSS transforms and transitions to make it smooth and neat. It can be used freely.

  • A neat code snippet displaying a todo list that activates its animations when hovered and clicked It was created with JavaScript and LESS. You can remove instances by clicking on the check mark and add new ones by clicking on the plus sign in the right corner. It was made by Andy Tran.

  • A jQuery plugin that resembles the Material Design preloader created by Google. It is really simple and lightweight, and it gives your designs a different and colorful appearance. To use it, just add the jQuery plugin and the CSS file provided, and initiate the plugin.

    It was created by Aaron Lumsden and it’s free!

  • FakeLoader is a jQuery plugin for creating stylish loading effects that spin. Basically, you can create any shape you want and animate it into a loader that will make your website or mobile app look awesome while it loads. It was created by João Pereira and made free to download and use.

  • The Wookmark jQuery plugin allows the organization of images in a neat, responsive grid. The plugin automatically recognizes the size of the window and adjusts the images to fit on the screen. The tool will also try to arrange the elements in such a way that columns always tend to be the same height whenever possible, creating a harmonic appearance.

  • A simple responsive layout jQuery plugin with fancy page transitions that show four flexible boxes. When clicking on a box, it will expand to full screen, and the others will scale down and fade out. When closing the current view, it will move back to the initial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

  • jRumble is a jQuery plugin that can rotate, shake, vibrate or rumble any selected element in order to create a hover effect or make it stand out from the rest of the page. The effects have many tweaks and twists available, as well: Remote and hover triggers, pulsating, constant, hyper-fast and so on.

  • Adipoli is a simple yet powerful jQuery plugin used to provide beautiful image hover effects. There is a wide variety of options included in this tool, you can add grayscales, transparencies, overlays, pop-ups and many more techniques on your pictures, which can be of great help to improve the design of you website.

  • A plugin made with jQuery that helps you create a responsive portfolio gallery applying a mouse over effect. First, we will see a transparency when we hover on an image, this will give us two links for extra info. Second, the transparency will slide over the next image relative to the position where it was previously (it will make sense once you check the demo), which gives it a very enjoyable fluidity.

  • A responsive list organized as a grid with multiple elements on the same line made with jQuery and CSS. When hovering on top of the elements, they flip with a fancy animation and light up in different colors. Once we click the element, it takes the whole space on top of the others by sliding in from the side.

  • A stylish thumbnail proximity effect made with jQuery and CSS3, that scales the images when hovering over them. The cool part is that not only the selected image is enlarged, but also the ones close to it relative to their distance, giving a smooth result.

  • WobbleView is an implementation of the popular wobble effect for any view in your app made in Swift. It can be used to easily add dynamics to user interactions and transitions. It allows a cool effect on mobile apps, similar to those used by recent versions of Skype. The plugin was released under the MIT license and it was created by inFullMobile.

  • A jQuery and CSS plugin that allows you creating a plugin that ensures the element can only be hovered over and clicked inside the circular area. It plays with the circular element with the border-radius property, in which is common to see that the active area of that element does not match its shape, since it has stayed as a square.

  • A plugin made in jQuery for creating simple fade effects randomly. It includes some parameters to change the duration (with an initial value of “slow”) and repetition (true by default). The creator of this plugin is Yuusaku Miyazaki and it’s licensed under MIT.

  • A simple CSS and jQuery snippet for creating a hover effect. It has the quality of identifying what element is hovered over next and that way it goes towards that direction (only up, down, left and right); this makes this hover effect kind of intuitive, although it is just a mind trick. It can be uses, modified and implemented freely.

  • A cool effect for zooming content, especially when it’s in a gallery. The magic of this snippet relies in its smooth hover effect, which lets the hovered image flow through the container (thanks to the movement of the mouse). This is an easy to use snippet, made with CSS and JavaScript by Codepen’s user Marco Barría.

  • Sara Soueidan has recreated these icon animations seen on Windows 8′s dashboard by taking advantage of the CSS3 3D transform property. These animations make tiles slide in various directions, do flips, turns, color variations, half sliding and more. It uses beautiful flat icons and follows the famous Metro style from Microsoft.

  • Gridify is a simple script that helps you create Pinterest-style grids for use in a website or mobile app. It works with jQuery, JavaScript or YUI.

  • A jQuery plugin for creating a slick image gallery. The idea is to have the albums show as a slider first, once selected, the images in the album will appear as a stack. When we click on the image, it will animate to the back of the stack, showing the next picture. CSS3 properties can be added for styling and customization.

  • A fantastic jQuery plugin that will allow you to create justified image galleries (no spaces between images), perfect for photography or illustration portfolios. You are able to modify the height (even by rows), margin and number of photos to make the gallery fit your design.

    This plugin was created by Nitin Hayaran and you can download it for free.

  • A plugin made with CSS and JavaScript, perfect for creating HTML presentations and slideshows. The presentations can be manipulated with the keyboard arrows, making it simple to navigate through them. It comes under the MIT license and it was created by Caleb Troughton.

  • OneBook3D is a jQuery plugin for creating flip books. It was designed especially for book-style presentations, supported in major browsers, including IE 11. Thanks to WebGL, it has enhanced speed and rendering for animations, and it’s fast in mobile devices also.

  • A sharp JavaScript library that enables your users to upload files to your website through an interactive interface. Simply have them click on the upload zone and an explorer window will let the visitor select the file. Once the upload starts, a thumbnail will preview the file as it loads.

  • A swipeable cards interface. It is a swipe-left / swipe-right for yes and no input as seen in apps like Jelly and Tinder. To use it, just drag the cards out of the stack, and into the stack again. If you drag to little, the cards come into place until you do that correctly.

  • A countdown cube effect jQuery plugin that does, well, what its name says: Countdown time with a pretty set of cubes. The cool part is that these cubes use CSS 3D animations to rotate in all sorts of direction, giving it a neat touch to this basic, straightforward application. It was created by Ali Cigari.

  • A great tutorial that shows how to take advantage of SVG paths animated with JavaScript to create good looking checkboxes and radio buttons by using pseudo-elements. In the examples shown, the options highlight when clicked and animated lines mark the boxes, providing a fantastic look and feel.

  • The purpose of this online tool (also available as a code snippet) is to triangulate any picture you drop into the browser. It uses the Delaunay triangulation algorithm, and it behaves the same way as the triangulation image generator. It was created by Georg Fischer, who stored this resource on Github under the MIT license.

  • A scrambled text effect inspired by the award-winning science fiction film LOVE. It consists of a simple paragraph that appears to be written by a machine. The text can be altered in any way, and this snippet can be integrated anywhere.

  • Bespoke.js is a super clean and minimal modular presentation plugin for modern browsers, designed to foster a rich ecosystem. This plugin provides a simple control API, manages events and adds classes to the slides allowing really smooth CSS transitions.

  • ItemSlide.js is a jQuery carousel plugin created by Idan Abarbanel and Nir Lichtman. This plugin features gesture handling, allowing you to make your elements slide through swiping, scrolling, clicking to slide and even get rid of elements by swapping up.

  • OriDormi is a small JavaScript library used for folding DOM elements as if they were paper, and boy, it looks amazing. The library allows us to bend these elements in many different ways, and it also features built-in support for touch events. Any image can be integrated into this snippet, so it’s ready to use.

  • A cool plugin with several jQuery effects for creating animated icons for menus. It includes 6 variations, clicking the code brackets icon will vertically center the page into your browser, you can use CSS brackets, use SVG, Unicode characters, pseudo-elements and more.

  • A nice and lightweight set of buttons made in CSS and a bit of jQuery. They are part of a set but can be used individually as well without losing properties or qualities. When hovered over, each icons transforms from a circle to a drop. It was created by Chris Kelley.

  • A beautiful and flat code snippet composed of a carousel created with jQuery and CSS. It is made of parallelograms with a thumbnail and a little label for the name right below. You can style it any way you want and use it for free (personal and commercial).

  • A compelling CSS and jQuery experiment to achieve a velocity effect that creates the visual effect of blurring. It can be used on modals, texts and any other element on a website. This effect was created and made free by Lucas Bebber.

  • A code snippet that shows a blur effect with a random motion. This uses very little CSS and jQuery, and it is really lightweight, making it easy to implement in any project. It was created by Lucas Bebber.

  • SweetAlert is a useful JavaScript plugin that replaces those awful default JavaScript browser alerts and replace them with other designs, beautifully styled and centered on the page. They look great no matter if you’re on a desktop, mobile or tablet. You can even add your own images into the prompts.

  • An effect that allows us to make a thumbnail grid, very similar to Google’s image search. When we click on a thumbnail, a larger image appears along with more content such as text and a link, for instance. The rest of the page is moved, so the image fits the whole screen. This view is very clean and practical, making for a pleasing viewing experience.

  • A gorgeous code snippet made in CSS and jQuery for list elements. It animates the selected item of a list, adding a little close button on the right and highlighting it with a bigger size and another color. This snippet was made by Codepen’s user Lewi Hussey.

  • A good looking experimental jQuery plugin that allows you to group thumbnails by using a piling effect. Once you click on the image piles, they will ”fly” into their correct locations. Thumbnail position can be customized, and the grid is adaptable, which means it will rearrange itself depending on the space available.

  • Mosaic is a jQuery plugin that auto-generates sliding boxes and captions for our content. We can add all sorts of fade and slide animations in any given direction, which are activated when hovering over the images. These animations can also control captions.

  • A beautiful set of CSS transforms and transitions compressed within a jQuery plugin that allows you to show stacks of cards in different ways. Among its effects, you can find fan right and left, rotated spread (horizontal and vertical), linear spread right and left, and many more. remember they only work in browsers that support transitions and transforms.

  • An expandable image gallery made with CSS and JavaScript. It makes an element expand on click, occupying the whole screen and the going back again when clicked. It is a free resource, easy to implement, and it also comes with an article about the creation process.

  • WOW, a JavaScript plugin, allows you to reveal animations when you scroll. It is easily customizable animation settings like style, delay, length, offset, iterations and more. It uses Animate.css. It is smaller than other JavaScript parallax plugins, it’s simple to install, it’s fast and lightweight, and it’s free.

  • shine.js is a nice and useful JavaScript library for creating shadows and shine effects to elements. You can install it via bower or direct download, add the script, change the light direction. and more. Among its features you have:

    – Dynamic light positions
    – Customizable shadows
    – No library dependencies, AMD compatible
    – Uses text or box shadows based on content
    – Works in browsers that support textShadow or boxShadow and auto-prefixes if necessary

    It was designed by Naim Sheriff and coded by Benjamin Bojko. It is free to download, improve and use.

  • A nice set of stylish effect made in jQuery. Among them, you can find translate, rotate, scale, skew, opacity and radius. the scripts are really simple to modify and implement, and they can be grabbed for free. They were created by Satoshi Okami.

  • A jQuery plugin that controls animations for tween.js, the JavaScript animation engine, which makes work easier. It supports the most popular transitions like transform, opacity, color and backgroundPosition. You can use this plugin in any project, whether it is personal or commercial.

  • The Box Gravity code snippet is a beautiful outcome that apply, in a 3D-like style, a box that follows the mouse as the gravitational pole. It is a simple JS, CSS and HTML snippet, easy to use into any web or mobile project.

  • AniCollection is an online set of animations made in CSS3. They work for multiple purposes like focus the attention of the user, entrances, exists, fading effects, flippers, rotations, sliding effects and more. The effects can be saved and then downloaded in a bundle in CSS, HTML, jQuery or AniJS.

Leave a comment

6 comments for JavaScript & jQuery Effects
  • Thank u so much.
    Reply · | 2016-05-31T00:56:07+0000
  • Thanks... Its awesome :)
    Reply · | 2015-06-12T06:52:05+0000
  • Wow!!! these all are cool effect, i would also like to share something.....this is a rolling effect using jquery :
    Reply · | 2015-05-18T04:35:23+0000
    • Hi Rex. Thanks for your suggestion! remember you can add it through our submit form.
      Reply · | 2015-05-19T11:07:13+0000
This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator