Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website

This tutorial lets you explore the jQuery animation basics so that you can prepare for advanced and more complex designs. As we all know animation is considered the core of interactive web design and it is a major requirement for attracting more users consistently. With new improvements in technology, the web design scenario is also changing. Although HTML5 and CSS3 are becoming quite popular, still it is jQuery which is the foremost choice to create interactive web designs.

Most designers are able to work with JavaScript or basic jQuery codes. Making changes in the visibility factor of an element is commonly done in website design and it can be done using CSS visibility or display attributes. With jQuery this process can be simplified further.

Many believe that animation is a complex task. It is, if you attempt it from scratch. However, jQuery makes it simple by providing single standalone function that can be used for handling every animation type. It basically involves changing the CSS attribute values. Take a look at the basics of animation function.

$( “#panel” ).animate({

// CSS Properties and values

}, 5000, “linear”, function() {

// Completion Handler

});

This code explains the syntax used for animate function. All CSS values and properties are contained in first parameter, while next parameter contains the animation duration. Easing is defined in third parameter and the last parameter shows anonymous function used to handle animation completion. Now as you aware of the basics, lets move on to creating practical jQuery animations.

 Animating Various Image Parts

animations

This section explains how you can display images by animating various image parts. You can start by splitting an image in various small images. In the source code 12 images are contained which have been split by using the preceding image. Each image has the dimensions of 150px X 150px. The sub images are further divided into 6 blocks in 2 rows. Now position all 6 blocks in right hand corner by using following code:

<div id=”img_panel”>

<div class=”img_item”><img src=”1.jpg” /></div>

<div class=”img_item”><img src=”2.jpg” /></div>

<div class=”img_item”><img src=”3.jpg” /></div>

<div class=”img_item”><img src=”4.jpg” /></div>

<div class=”img_item”><img src=”5.jpg” /></div>

<div class=”img_item”><img src=”6.jpg” /></div>

<div class=”img_item”><img src=”7.jpg” /></div>

<div class=”img_item”><img src=”8.jpg” /></div>

<div class=”img_item”><img src=”9.jpg” /></div>

<div class=”img_item”><img src=”10.jpg” /></div>

<div class=”img_item”><img src=”11.jpg” /></div>

<div class=”img_item”><img src=”12.jpg” /></div>

</div>

Here 12 images have been separated into 2 columns by using two CSS classes, img_item and img_item2. Further look at CSS code which is used for positioning images:

 .img_item{

position: absolute;

right: 0px;

opacity:0;

top :0;

}

.img_item2{

position: absolute;

right: 0px;

opacity:0;

top:150px;

}

This code will hide all images in every row and position them on top of each other by making use of absolute positioning. Now take a look at jQuery code to generate an image with animations:

$(document).ready(function(){

var left = 0;

$(“.img_item”).each(function(i,val){

 $(this).animate({

left: left,

opacity: 1

 }, 1500 );

left += 150;

});

left = 0;

$(“.img_item2″).each(function(i,val){

$(this).animate({

left: left,

opacity: 1

}, 1500 );

left += 150;

});

});

First, you can use two selection statements to filter class items – img_item& img_item2. Now execute animate function on individual elements for converting opacity to 1 & left positioning relative to preceding image part. This will ensure that every image starts animation simultaneously.

Now you are ready to look at more animation aspects.

Designing Sequential Animations

If you require sequential animations, which means that the animation of one element should start after the completion of the preceding element, then you can use this HTML code.

<div id=”img_panel”>

<div class=”img_item”><img src=”1.jpg” /></div>

<div class=”img_item”><img src=”2.jpg” /></div>

<div class=”img_item”><img src=”3.jpg” /></div>

<div class=”img_item”><img src=”4.jpg” /></div>

<div class=”img_item”><img src=”5.jpg” /></div>

<div class=”img_item”><img src=”6.jpg” /></div>

<div class=”img_item”><img src=”7.jpg” /></div>

<div class=”img_item”><img src=”8.jpg” /></div>

<div class=”img_item”><img src=”9.jpg” /></div>

<div class=”img_item”><img src=”10.jpg” /></div>

<div class=”img_item”><img src=”11.jpg” /></div>

<div class=”img_item”><img src=”12.jpg” /></div>

</div>

It is different from previous code, as it uses single class of CSS instead of two. Mentioned below is the jQuery code for sequential animation.

  1. $(document).ready(function(){
  2. var left = 0;
  3. var items = $(“.img_item”);
  4. animateImg (items,0,0,0);
  5. });

After the page gets loaded, you can get all image elements by using this class, img_item. Then the items are passed into a function, animatelmg, which is for processing the animations. Animatelg function implemention can be done by following code:

  1. var indexNum = 1;
  2. var animateImg = function(items,left,height,indexNum){
  3. if(items.length>= indexNum){
  4. var item = items.get(indexNum);
  5. $(item).animate({
  6. left: left,
  7. top : height,
  8. opacity: 1
  9. }, 1500 ,function() {
  10. left += 150;
  11. indexNum++;
  12. if(indexNum  % 6 == 0){
  13. left = 0;
  14. height += 150;
  15. }
  16. animateImg (items,left,height,indexNum);
  17. });
  18. }
  19. };

In this case we have 6 images in 2 rows. Here you should check if you have reached at the end of a row by taking the module of index number. If yes, then increase the image’s top value. As animation complete function has been used for executing the animation, thus each animation will begin after the end of the preceding animation.

 


Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website
There are no comments.

Leave a Reply