Rotate, skew, scale, fade effects with CSS 3, jQuery and Bootstrap

Adding cool CSS 3 effects in different elements

For making a website more interactive, you may use the power of CSS for displaying different elements in a web page with animations like rotate or other effects.

For example, if you have an e-commerce website, then a section of products can be displayed with fading effect as a user scrolls down to that section and use rotate effect as scrolling to special offers etc.

In this article, I am going to share a light-weight jQuery plug-in that uses CSS 3 effects for creating such animation in web page elements. Have a look at the following section for live demos and setting up guide with code for using this cool plug-in.

A demo of adding rotate effect as you scroll down

In this demo, the rotate effect is added as you scroll down the page. In the markup section, the Bootstrap CSS is used for the demo. You may use it with non-Bootstrap based projects as well.

In the demo page, scroll down to bring the block of element in view and those will display with rotating effect:

bootstrap css effect

See online demo and code

The markup for creating the rotating animation using CSS3 and jQuery:

 

You only need a line of jQuery after including the library and plug-in JS files. In the markup section, use the data-move-y and data-move-x data attributes for specifying the angle.

Get the complete code from the demo page.

A demo with fading effect

In this demo, the content boxes are displayed with the fading effect as you scroll down to that area. Have a look:

bootstrap css fading effect

See online demo and code

You may find the complete code of this demo in the demo page’s code section.

The demo of moving elements across the screen

In this demo, the block of “content” that actually can be product listings, service box or images are moved across the screen by using different values for data-move-y and data-move-x data attributes:

css3 effect across screen

See online demo and code

A demo of 3D effect for displayed elements

You may also move the objects with 3D effects by using this plug-in. For this, the three data attributes are used with the following values in the demo:

data-rotate-x=”90deg”, data-move-z=”-500px” and data-move-y=”200px”

bootstrap effect 3d

See online demo and code

The CSS used for this demo:

 

The markup:

 

A demo of scaling and skewing elements

In this demo, the objects are scaled and skewed by using the data-scale and data-skew attributes. Along with this, the offset property in the jQuery code also plays its role. Have a look:

bootstrap scale skew

See online demo and code

A demo of rotating images

In this demo, rather than using just a block of CSS, I have used images for rotation. Yet again, the images are used inside the Bootstrap classes. For implementing that, I simply used the img src tag of HTML inside the div where data attributes for rotating the elements are used:

css rotate images

See online demo and code

Get the complete code by clicking the above image or demo link.

 

Credit: abeMedia