Posts Tagged ‘animation’

Selectively Include jQuery Plugins

Introduction

I’m often using jQuery and a little PHP because of the recent interest in the jQuery animation. Therefore I need lots of jQuery plugins to load in every web page. I need some plugins on each page such as Color plugin for the navigation and IE font-face ClearType fix for adding font-face support to IE, but I don’t need other plugins to load unless there is a page element specifically used with those plugins.

The Code

 // Function to create script element dynamically
function createScript(src) {
 var script = document.createElement("script");
 script.src = "scripts/" + src + ".js";
 script.type= "text/javascript";
 $("body").append(script);
}
$(window).load(function() {
  // Load the custom fonts in IE
 $("body").ieffembedfix();
  // Top Navigation Menu Animation
 $("#horiNav a").hover(function() {
  if ($(this).attr("id") != "currentPage") {
   $("#currentPage").stop().animate({backgroundColor:"#FFF", color:"#87CEEB"});
   $(this).stop().animate({backgroundColor:"#A7D4F2", color:"#FFF"});
  }
 }, function() {
  if ($(this).attr("id") != "currentPage") {
   $(this).stop().animate({backgroundColor:"#FFF", color:"#87CEEB"});
   $("#currentPage").stop().animate({backgroundColor:"#A7D4F2", color: "#FFF"});
  }
 });
 if ($("#slideshow").length != 0) {
   // Load the Cycle plugin dynamically
  createScript("jquery.cycle.all.latest");
   // Cycle through the slideshow on the home page
  $("#slideshow").cycle({
   fx: "fade",
   timeout:"3000",
   pager:"#SSnav"
  })
   // Stop the slideshow once it is clicked
  .bind("click", function() {
   $(this).cycle("toggle");
  });
 }
});

Explanation

Here I defined a function that creates a script element before the end of body. The function basically used raw Javascript code to create script element and a line of jQuery code to append the new element to the body.

I used $(window).load instead of $(document).ready method to execute the jQuery code after the page is loaded. I then demonstrated the code for the font-face support for IE and the navigation color animation.

In order to selectively include jQuery plugins, check the existence of the element that requires to use those plugins first. I used if statement to check the length of the element. Include the jQuery plugins if the number of the specified element is at least one. Then execute rest of the code within the if statement. The screenshot below shows Firebug that the page has successfully loaded the required plugin.

Loaded required jQuery plugin successfully

Head over to wcf.robbychen.com to see it in action. Make sure to open Firebug when visiting the site to see which jQuery plugins are loaded. Right now only the homepage and Who We Are page use additional jQuery plugins.

Questions

If you have any question about the above code, feel free to post them in the comments below.

Final Revision for Scrolling Animation Code, Maybe

Introduction

After I revised the scrolling animation jQuery code yesterday, I was going to rewrite it using Mootools. However, I noticed that this code was doing two unnecessary actions. The first one is the removing of the first set of images, and another one is the appending of new sets of images. Several minutes after my eyes watched the scrollbar animate back and forth, I revised the code to the following.

The Code

if ($("#whoWeAreImages").length != 0) {
  // Scroll Animation for the images in the Who We Are page
 var $whoWeAreImages = $("#whoWeAreImages"),
 $wwaLink = $whoWeAreImages.find("a"),
 $wwaImg = $whoWeAreImages.find("img"),
 scrollWidth = $whoWeAreImages.attr("scrollWidth");
  // Do the following once the page is loaded
 $whoWeAreImages.css({overflow:"hidden"})    // Hide the images scrollbar
 .scrollLeft(0)    // Make sure the scrollbar is at the beginning when the page is reloaded
 .append($(this).html()) // Add one more set of images
  // Begin the animation
 .autoscroll({
  direction: 0,
  step: 50,
  onEvaluate: function() {
    // Click action for the images in the Who We Are page
   $wwaLink.fancybox({
    transitionIn: "elastic",
    transitionOut: "elastic"
   })
    // Scroll to the beginning once it scrolls to the beginning of the second set of images
   if ($(this).scrollLeft() >= scrollWidth) {
    $(this).autoscroll("pause");
    $(this).attr("scrollLeft", "0");
    $(this).autoscroll("resume");
   }
  }
 })
 .autoscroll("addpausesource", $wwaImg);
}
 

Explanation

In the above code, I removed the remove() action and added the append action at the beginning of the loop. It means that it will only has two sets of images available instead of an infinite loop that remove and append continuously to limit two loops which has slower performance.

After this revision, the animation lag still exists. This is probably the final revision of the code before I rewrite it using Mootools because I might discover some techniques during the rewriting of this code.

Revision for the Auto Scrolling Animation code

Introduction

Since I wrote the auto scrolling animation code with jQuery two days ago, I struggled with the browser performance while running this animation. It seems that the animation needs lots of CPU power and it sometimes appears to be lagging. In order to solve the CPU issue, I included a jQuery plugin named Autoscroll. As the name applies, it automatically scrolls the specified element. This has the same feature as the code I wrote, but it’s a plugin and it will immediately stop the animation when in hover state whereas my code stops animation few seconds after the cursor was hovered over the element.

The Source Code

The following is the revised code:

if ($("#whoWeAreImages").length != 0) {
  // Scroll Animation for the images in the Who We Are page
 var $whoWeAreImages = $("#whoWeAreImages"),
     $wwa = $(".WWA:first"),
     $wwaLink = $whoWeAreImages.find("a"),
     $wwaImg = $whoWeAreImages.find("img"),
     scrollWidth = $whoWeAreImages.attr("scrollWidth"),
     wwaHTML = $whoWeAreImages.html();
  // Do the following once the page is loaded
 $whoWeAreImages.css({overflow:"hidden"})    // Hide the images scrollbar
 .scrollLeft(0)    // Make sure the scrollbar is at the beginning when the page is reloaded
  // Begin the animation
 .autoscroll({
  direction: 0,
  step: 50,
  onEvaluate: function() {
    // Click action for the images in the Who We Are page
   $wwaLink.fancybox({
    transitionIn: "elastic",
    transitionOut: "elastic"
   })
    // Remove the first set of images in order to limit loop
   if ($(this).scrollLeft() >= scrollWidth) {
    $wwa.remove();
    $(this).autoscroll("pause");
    $(this).attr("scrollLeft", "0");
    $(this).autoscroll("resume");
   }
  },
  onEdge: function(a) {
   if ($(this).attr("scrollLeft") != 0) {
     // Append the same images to the end of the last image if it finished scrolling to loop through the animation
    $(this).append(wwaHTML);
   }
  }
 })
 .autoscroll("addpausesource", $wwaImg);
}

Explanation

As you can see in the code, I optimized the code to use the chaining method for jQuery.

I also changed the way images were looped. When scrollLeft greater than or equals to scrollWidth, the first set of images will be removed/deleted, pause the animation, set scrollLeft to zero, and restart the animation.

This means that when the position of the scrollbar reaches the beginning of the second set of images (or second loop), delete the first set of images using :first pseudo selector and reset the scrollbar position to the beginning. Since the scrollbar position will be at the end of the first loop and the beginning of the second loop, remove the first loop and reset the scrollbar position have n0 effect on the animation. The animation would continue to loop through the images without interruption but it’s limited to two loops.

Although the code was optimized, the animation still has some lag. It will sometimes stop and continue without interaction, much like the under-powered graphics card. I have not yet find any solution to this issue yet. However, I found out that Mootools animation is sometimes more smooth than jQuery. I will try to use Mootools to animate the auto scroll later.

Do you believe that Mootools  animation is more smooth than jQuery? Please share your opinion in the discussion.

Auto Scroll Images jQuery Animation

Update (12/14/2010): I wrote the revised code for better performance.

Introduction

Based on the last past, I wrote a jQuery snippets to automatically scroll through the images horizontally. I used scrollLeft and scrollWidth attributes to achieve this animation. And if the scrollbar scrolled to the end of the element, it will append the original content in the element to the end of the element in order to loop through the images. Take a look at the source code below to see what I mean. Note that the HTML code is the same as last post.

The Source Code

 // Scroll Animation for the images
var div = $("#div");
 // Do the following once the page is loaded
div.css({overflow:"hidden"});    // Hide the images scrollbar
div.attr("scrollLeft",0);    // Make sure the scrollbar is at the beginning
 // Begin the animation
var scrollAnime = function() {
 div.animate({"scrollLeft":"+=20"}, 1000, "linear");
  // Append the same images to the end of the last image if it finished scrolling to loop through the animation
 if (div.attr("scrollLeft") >= div.attr("scrollWidth") - div.width() - 10) {
  div.append(div.html());
 }
  // Click action for the images
 $("#div a").fancybox({
  transitionIn: "elastic",
  transitionOut: "elastic"
  });
 }
 var beginAnime = setInterval(scrollAnime, 1000);

  // Stop the animation in hover state
 div.hover(function() {
  clearInterval(beginAnime);
 }, function() {
  beginAnime = setInterval(scrollAnime, 1000);
 });

CSS recommendation: (Optional if you don’t want the animation to show where to end/start the new loop of the images)

#div .lastImage {
 border-right:1px solid #000;
 padding-right:1em;
 margin-right: 1em;
}

Explanation

Firstly, as you can see in the source code, I use Fancybox jQuery plugin to view enlarged images. I put this piece of code inside the setInterval function together with the rest of the code so that it can recognize the new images which are generated inside the function. I also set the scrollLeft to 0 when the document is loaded to ensure that the scrollbar resets to the left when the page is refreshed. The default value for the third parameter of the animate function is swing. In order to make the ScrollLeft animation more smooth, I changed it to linear since there are only these two values available when used with jQuery, according to the API documentation. Other section in the source code above is explained in the comments after each line. One thing to note is that I found the usage for  the third parameter for the animate function  in the source code of image board jQuery plugin which is similar to my code above, except it will not loop through the images continuously, instead it goes back to the first image once it passed the last image.

You can see a demo of the above code at wcf.robbychen.com.

Since I don’t know how to write a jQuery plugin yet, I’m sure that there are similar plugins out there. If you find one, please share it in the comments section below.

Animate Objects along Paths using jQuery Path Plugin

jQuery Path plugin animates an HTML element along a specified path, much like Flash motion guide layer. The path can be a curve or a line. You can see a demo on this page and checkout its source code. According to the source code, the syntax for this plugin is integrated to the jQuery animate function:

$(“#div”).stop().animate({path: pathType}, time_in_millisecond);

One disadvantage of using this plugin that I’ve found is that there is no pre-set path type. Fortunately, the plugin documentation explains how to create bezier and arc path, as well as custom path types.