How to Create an Animated jQuery Image Tile Effect?

13 Jan , 2014  jQuery 

Tile Animation jQueryThis tutorial explains on how to create an animated jQuery image tile effect with the help of CSS3. Toggle tile animation effects for images.

Animations for images can be effective for auidence to stay back on your website. When something on your website is animated, it draws the attention of the audience. Animations on images makes the website look more cool and all the more fun to the users.

Today, we are going to learn on how to create an animated jQuery image tile effect using CSS3 transitions. This tutorial takes the reference from the jQuery plugin jq-tiles. In this tutorial, we are going to create animation with tile effects when the toggle button is clicked.

Overview:
  • Add a Toggle Button to show and hide the image.
  • Add tile animation and fade transitions on the image when the toggle button is clicked.
  • jQuery and CSS3

Check out the demo below before proceeding on how things work:

DEMO | DOWNLOAD

The code in this tutorial is given below followed by its explanation:

HTML Markup:

The CSS3 Styles:

The jQuery Script:

Explanation of animated jQuery image tile effect code:

The CSS3 transition is prevented initially on the page load by the following code:

The transition can occur only when the help of the class tag css3-preload to the target area, with the help of the below CSS3 code:

Once, the page is loaded completely and the jQuery script waits for a trigger by the user. This trigger is a click by the user on the “toggle” button placed on the page. This button is the starting point of the animation. When the toggle button is clicked, the following code is triggered:

We need to define the number of tiles to appear on the x-axis and the y-axis along with the speed of the animation using the below code:

These values are sent to the function by name sliced. Where the tiles of some size are made with the help of the following code:

These tiles are replaced in the image. First the image is found with the ‘img‘ tag and tiles array is created and a new tile div is pushed in the place of the images. Each tiles have the following CSS which has the transition effects for the tiles as they disappear:

Then, the below code sets the image to invisible mode, set the background for the tiles and adjust the position of these tiles:

The below functions animate the tiles as they disappear:

When they disappear, the class “tile-animated” is added to these tiles which has the CSS style as shown below, which creates fading effects:

This is how the tiles are generated, animated and then disappears.

DEMO | DOWNLOAD

Hope you enjoyed this tutorial, we would come up with more such articles and tutorials. If you have any doubts and clarifications on this example, please feel free to contact us and drop a message in the comment section.



, ,

Comments are closed.