The animation section contains the collection of different scripts and code snippets. A number of these posts are jQuery animation plug-ins for various HTML elements like image animations, popovers and modal, links, and transition effect for different elements. Hope you will find it useful to be used in your projects.
Create scroll animation by jQuery The circus-scroll-tween is a simple and easy to use plug-in for creating the text or other content animation on the scroll. You may set different options like delay to start the animation, wheel distance, and type of easing from the available values. Demo1 Developer page Download plug-in How to set … Read more
Create CSS3 animations in DOM element The CSSAnimate.js is a small jQuery plug-in for creating animations by using the CSS3 transitions. You may create different types of animations like skew, scale, rotate, etc. in DOM elements. If CSS3 is not supported by the browser then it will provide the fallback to the default animate method … Read more
Create text animation in web pages The textbanner is a simple to use plug-in for creating text animation on your web pages. You only need to specify the div or paragraph that needs to be animated in the jQuery code. Just a single line of code will create the animation with default settings while you … Read more
The pagecrossfade plug-in for generating fading effect The pagecrossfade will generate the fading effect by using jQuery and CSS3 as a user navigates from one page to another in your website. You may control the easing and duration of fade-in and fade-out as crossing between the pages. The plug-in is tiny in size; the only … Read more
Create the moving background image The backgroundMove.js is a tiny plug-in for creating the moving background as the mouse moves in the specified element. For example, your div has a background image. By using this plug-in, the background image moves with the movement of the mouse. You may adjust the movement strength by using an … Read more
Creating the 3D Fancy-Buttons The Fancy-Buttons is a jQuery based plugin for turning the ordinary and “boring” buttons in 3D widget look. Basically, you may use this plug-in for 3D effect in any HTML element for hover and click state. For example, a div containing text or even a form etc. The options for this … Read more
What is RollingBorder plug-in? The RollingBorder is small-sized jQuery plug-in for creating border animation that may be used as focus state. The usage can be getting the user’s eye as visiting the webpage to the specific section where two lines are moving to the border of that element. How to use it? Include the style … Read more
Create horizontal and vertical parallax effect I have shared quite a few plug-ins related to the parallax scrolling earlier. You may learn about these plug-ins here, here and in this page. A parallax tilt effect plug-in is also covered in this post. The unique thing about the paroller.js plug-in (which is the topic of this … Read more
Create burst animation for images The boomjs is a jQuery based plugin that creates burst animation for the element in DOM. You may specify the container and image by using the jQuery code with two available options. The options are to specify the size of pieces by using the piece_size option while you may also … Read more
The marquee effect with CSS3 The Css3Marquee plug-in uses jQuery and CSS3 for creating the marquee effect as an alternative to the HTML marquee which is not smooth in all browsers. You may customize the speed and direction of the marquee effect by using the data attribute or jQuery code. Developer’s page Download plug-in Setting … Read more
The jQuery coolType plug-in The coolType plug-in adds character by character of a given string in HTML elements with a cool typing effect. The animated effect is like the fast command line typing that you may use for displaying news items or customer reviews, announcements, etc. that a visitor’s eye can catch easily. The development … Read more
The border color animation plug-in The BorderColorAnimate plug-in is a simple way out of implementing the border color animation for any HTML element in DOM. The border color can be animated on click or as the mouse is entered into the specified element. You may customize it to be used for other events as well. … Read more
Create gooey effect in HTML canvas The light-weight jquery-wobblewindow-plugin can be used for creating the gooey effect on HTML5 canvas in your web pages. The minified size is only 7K while cool animation happens as the mouse bring in and out of any specified HTML element. Demo 1 Demo 2 Demo 3 Developer’s page Download … Read more
How to create simple animation on the scroll? You may create animation for different HTML elements in DOM by using the dctb-animate-scroll jQuery plug-in. For example, displaying image and text in a div or paragraph as a user scrolls down to that element with animation. Developer’s page Download plug-in How to implement animate scroll plug-in? … Read more
Scroll to top with animation The scrollpress is a nice plug-in if you want to let users scroll top by pressing a button with smooth animation. The page scrolls up smoothly while the button animates in a nice way. You may style the button with CSS and optionally use the font-awesome or other icons. The … Read more