Print this page

30+ cool and useful jQuery and JavaScript effects and animations #1

Tuesday, 05 May 2015
(15 votes)

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today. jQuery is free, open-source software licensed under the MIT License.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications. [...]

 

jQuery Effects

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



FancyBoxes: jQuery Animated Boxes Plugin

FancyBoxes: jQuery Animated Boxes Plugin

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.
Source →

Easy jQuery Loading Effects Plugin

Easy jQuery Loading Effects Plugin

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.
Source →

jQuery Random fade In Plugin

jQuery Random fade In Plugin

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.
Source →


jQueryTween: Lightweight Animation jQuery Plugin

jQueryTween: Lightweight Animation jQuery Plugin

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.
Source →

jQuery Text Revealing Effect

jQuery Text Revealing Effect

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.
Source →

Related Searches


Birdman.js: Random Text Appearing jQuery Plugin

Birdman.js: Random Text Appearing jQuery Plugin

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.
Source →

Starfield: Starry Background jQuery Plugin

Starfield: Starry Background jQuery Plugin

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.
Source →

PleaseWait: JavaScript & CSS Loading Effects Generator

PleaseWait: JavaScript & CSS Loading Effects Generator

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.
Source →


mmenu: Mobile Sliding jQuery Menus

mmenu: Mobile Sliding jQuery Menus

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.
Source →

CSS & jQuery Material Design List Popup

CSS & jQuery Material Design List Popup

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.
Source →

LESS & jQuery Flat To-Do-List

LESS & jQuery Flat To-Do-List

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.
Source →


jQuery Material Design Preloader

jQuery Material Design Preloader

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!
Source →

FakeLoader.js: Spinning Loaders jQuery Plugin

FakeLoader.js: Spinning Loaders jQuery Plugin

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.
Source →

Readmore: Read More & Close jQuery Plugin

Readmore: Read More & Close jQuery Plugin

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.
Source →


Wookmark: Image Organization jQuery Plugin

Wookmark: Image Organization jQuery Plugin

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.
Source →

Related Searches

Fullscreen Page Transitions Layout jQuery Plugin

Fullscreen Page Transitions Layout jQuery Plugin

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.
Source →


jRumble: Rotate, Shake & Rumble Elements jQuery Plugin

jRumble: Rotate, Shake & Rumble Elements jQuery Plugin

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.
Source →

Image Hover Move jQuery Plugin

Image Hover Move jQuery Plugin

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.
Source →

Adipoli: jQuery Image Hover Plugin

Adipoli: jQuery Image Hover Plugin

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.
Source →


jQuery & CSS3 Related Posts Slide Out Boxes

jQuery & CSS3 Related Posts Slide Out Boxes

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.
Source →

jQuery Responsive Portfolio Gallery Plugin

jQuery Responsive Portfolio Gallery Plugin

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.
Source →

Responsive jQuery and CSS List Flip Effect

Responsive jQuery and CSS List Flip Effect

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.
Source →


jQuery & CSS3 Thumbnail Proximity Effect

jQuery & CSS3 Thumbnail Proximity Effect

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.
Source →

jQuery & CSS Hover Click Trigger Effect

jQuery & CSS Hover Click Trigger Effect

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.
Source →

Slide In: Intuitive CSS & jQuery Hover Effect

Slide In: Intuitive CSS & jQuery Hover Effect

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.
Source →


CSS & jQuery Grid Zoom Effect

CSS & jQuery Grid Zoom Effect

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.
Source →

jQuery & CSS Windows 8 Animated Grid

jQuery & CSS Windows 8 Animated Grid

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.
Source →

jQuery Pinterest Grid Creator

jQuery Pinterest Grid Creator

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

Source →


Minimit: jQuery Gallery Plugin

Minimit: jQuery Gallery Plugin

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.
Source →

jQuery Photo Stack Gallery Plugin

jQuery Photo Stack Gallery Plugin

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.
Source →

Justified.js: Adjustable jQuery Gallery Plugin

Justified.js: Adjustable jQuery Gallery Plugin

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.
Source →


 

Also see:

List of jQuery menus for Web Developers #1

JQuery SVG Libraries to add animations and conceive interactive experiences  →

10 Cool and Useful Premium JavaScript Plugins for your next projects  →

 


.work Domain Name


Is it not a great idea to follow me to be recieve my last posts? Follow me now!


7480 times

Tuesday, 05 May 2015

Ibrahim Jabbari

I am Ibrahim Jabbari Web Designer / Developer since 2006, This is my blog, I'll share my experiences, Useful resources and all update news from IT world with you all, I hope you enjoy surfing my blog. Connect with me on Facebook, Twitter and and Instagram.

www.ibrahimjabbari.com