CLOSE

jQuery
Effects

(66 submissions)

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

CLOSE
  • A nice CSS and jQuery effect for a navigation menu. It works by revealing a simple text menu once the button is clicked, putting apart the whole content window. The menu can integrate images if you need them, and the velocity can be modified at will. This snippet is free and was made by Codepen user ZCKVNS.

  • FancyBoxes is a jQuery-based HTML5 plugin that creates fancy animated boxes, that can animated opening for your containers and it has 11 animation types, 4 queue type and the best part is you pick all the colors. The documentation can be found at Github, as well as the free download.

  • A jQuery plugin that helps you create animated intro loading pages. The plugin can be installed and used easily, it's responsive, really light, you don't need to know jQuery to use it, and it has a GNU General Public License.

  • 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 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.

  • 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 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 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.

  • A smooth, lightweight jQuery plugin for collapsing and expanding long blocks of text with “Read more” and “Close” links. The required markup for Readmore.js is also extremely lightweight and very simple. No need for complicated sets of divs or hard-coded class names, just call .readmore() on the element containing your block of text and Readmore.js takes care of the rest.

  • 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 s...

  • 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.

  • A jQuery plugin provides extremely simple and practical navigation of pictures through an automatic slide that is triggered as soon as you hover on a picture. Its main difference from others could be its main flaw since it is really easy, but so much to the point where the user cannot control the slide movement.

  • 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.

  • The idea behind this jQuery and CSS3 plugin is to show relevant posts that might've been lost with time. A list of related posts with their respective thumbnails comes out of the edge of the screen and a shuffle button on the bottom allows you to repopulate the list with new entries.

  • 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.

  • 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 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. This script supports: - Image load - Window resizing - Items with a really long height - Dynamic item width - CSS3 Transitions The usage is fairly simple and quick so you can enjoy the tool right away. This script was created by Ng...

  • Minimit is an extremely powerful plugin aimed at advanced developers who want to create complex interactions and animations (like sliders and galleries), without spending so much time on coding logic. You still have to code the animation, the CSS and some of the logic of the element to make it work, but the possibilities are endless.

  • 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.

  • OneBook3d is a jQuery plugin that helps you create lovely digital books with a page flipping animation to include your photos and make compelling presentations. It works for books, magazines and portfolios, and it can be modified in size and page style. The plugin includes dark and light versions and can be embedded in websites.

  • 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.

  • Bespoke.js is a super minimal and lightweight modular presentation library for modern browsers, designed to foster a rich plugin ecosystem. The core library sets up the display, provides a simple control API, manages events and adds classes to the slides to allow CSS transitions. Other functionalities, from keyboard and touch interactions to bullet lists and hash routing, are implemented as a plugin.

  • ItemSlide.js is a jQuery plugin that enables carousels that work with touch gestures, a great way to display images or texts through a mobile device, or show it in a touch desktop device. With it, you can make your elements slide through swipe, scroll, and click to slide. This plugin was designed by Idan Abarbanel and developed by Nir Lichtman. It is free to download, improve and use.

  • 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.

  • This plugin can help us create smooth, interaction-focused sliding panels which come in a huge variety of ways (horizontal, vertical, responsive, slideshow, etc.) It has now become a highly configurable, versatile and powerful UI component since its origin as a MooTool effect.

  • 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 code experiment for creating little clickable boxes with jQuery. The clicked menu item expands and reveals a content area for some description or links. When the item is clicked again, the boxes will come back, reconstructing the initial background image.

  • 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).

  • Vage.js is a simple script for creating blur effect over images or any other HTML element with the help of SVG filters, perfect to be used as a background. The result allows the objects on the front to be focused and highlighted. It works on Mozilla Firefox, Google Chrome, Safari, Microsoft Internet Explorer (v7-9; v10+ not supported)

  • 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 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.

  • Here we have an image builder created with CSS and JavaScript based on the Delaunay Triangulation to create the effect of the triangles arranging to form the images. It was created by Zach Saucier and you can grab the code to make the modifications you need.

  • 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.

  • 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.

  • 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 browser...

  • 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.

  • 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.

  • 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.

  • 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 for now.

  • A jQuery and HTML5 text vibration effect that works by finding the path information to trace the character image. It is a lightweight creation, perfect for grabbing the attention of users in websites and mobile apps. This resource is free to use.

Leave a comment

0 comments for jQuery Effects
This a test message in global notification
Your download will start shortly.

Done!

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

Browse
Done

Thank You!

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

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle