25+ Animations in Web Elements by using jQuery and CSS3

jQuery animation image

How to create an animation to elements by using dreyanim plug-in The dreyanim is a jQuery and CSS3-based plug-in for creating animations to elements like text paragraphs, images, or other elements in web pages easily. You may choose an animation style from the available 25+ animation options by using this plug-in. In the next section, … Read more

Create animated intro by using jQuery

jQuery animated intro

Animated intro by jQuery The animated intro can be eye-catching as a user lands on your website; for getting the user attention. For creating animated text or mixed content intro, you may use the Gif file, flash etc. as an easier solution. However, it can be heavier than using the simple animated text. In this … Read more

jQuery / JavaScript animated weather cards: Sunny, Snow, Windy, Rain, and Storms

jQuery weather card

Creating weather cards for your websites In this tutorial, I am going to share an awesome jQuery based solution for creating the animated weather cards. You may switch among the sunny, snow, windy, rain and storm cards as using this nice plug-in. It uses SVG figures and jQuery code for creating animations. For different weather … Read more

31 Animated Bootstrap Popovers and Modals by velocity.js

bootstrap popover animated

Creating animated modal and popovers with Bootstrap and velocity.js I have covered a number of plug-ins for creating simple and advanced modal windows that are based on Bootstrap framework. You can read by visiting the links below: Creating simple modals by using Bootstrap framework is written here. A nice jQuery plug-in (bootstrap3-dialog) is also covered … Read more

jQuery explode / burst image plug-in: 2 demos

jquery image burst

Explode images by using jQuery The jquery.imgexplode explodes the image with a variety of options available in that jQuery plug-in. The plug-in is quite simple to use. Just specify the image with an id or class in the image tag and refer this in the jQuery code with different options. You may use a button for triggering the … Read more

Create Bootstrap 3 Progress bars: 6 Demos

bootstrap progress bar animated

The progress bar component in web pages You may need progress bars on web pages for different reasons, for example, showing the progress of uploading a file and letting the user know by way of progress bar that shows the percentage of the file being uploaded. Update: Bootstrap 5 Progress bar tutorial is live. Similarly, … Read more

CSS color property: 2 Demos of Text Color Animation and Links

CSS color

CSS color property The color property is used to define the color of the text in CSS. You may set colors for different sections or elements separately. For example, you may set different colors for paragraph text, text in div elements, anchor text, etc. You may set the color by using color names like green, … Read more

Animating Images with CSS: 2 Demonstrations Using the ‘animation’ Property

CSS animation

The animation property of CSS 3 The CSS 3 animation property is used to create animations for different web elements including images. For that, you may use the shorthand animation property or specify different animation-related properties separately. The shorthand of animation property can be used as follows:  -webkit-animation: aniname 0.9s ease-in-out 0.3s 4 reverse forwards … Read more

CSS Gradient Background with Animation: 2 Demos

CSS gradient background

Generating the gradient background in CSS The gradient CSS property can be used for the smooth transition of different colors that otherwise need to be done by using images. You may use the gradient property for different reasons; one of the purposes is to use it as background for the whole web page or different elements. In … Read more

jQuery transition effect in HTML elements with animation

jquery effect sweep

Creating transition effect in HTML elements by jQuery In this demo, you are going to see and learn how to create transition effect in two HTML elements with jQuery. You may use the different type of content in the HTML elements like headings, text paragraphs, images etc. The plug-in allows using only two elements currently. Upon … Read more

jQuery Rotate Animation using CSS3 Transform: 4 Demos

CSS3 animation

The rotate animation by using CSS3 and jQuery The jQuery rotate plug-in can be used for creating animations in different elements of the web page including images, icons, or other elements quite easily. This is a light-weight plug-in, with only 1Kb of JS file. So, if you are already using jQuery in a web project … Read more

3D Flip Animations by using jQuery: 3 Demos

jQuery flip animation

3D flip animations and jQuery In this tutorial, a jQuery plug-in is used for creating 3D flip animations. The plug-in name is “flip” which can be downloaded from this link. You may specify the back and front content differently for the “card” used for animation. The animation may occur as you bring the mouse over … Read more