9. Animation of HTML Elements
In addition to transition effects, you can also create motion, animate scrollbars, animate color transitions, animate along a curved path, and smoothly resize elements using the animation library in YUI.
You can animate an element on a web page by first defining the element in your markup, and then creating a new animation object using the ID of the element and lastly, calling the animate function.
<div id="test"></div>
<script>
var myAnim = new YAHOO.util.Anim('test', {
width: { to: 400 }
}, 1, YAHOO.util.Easing.easeOut);
myAnim.animate();
</script>
Properties for the animation can be defined when you instantiate the animation object or by using their respective properties.
10. Overlays and the Lightbox Technique
Take a look at how to create the famed 'Lightbox' effect by using the Overlay object in YUI.
An overlay is a widget based on the Container object, which means the Container library is a prerequisite. You also need to use the Yahoo DOM Event class.
First add your prerequisites, Yahoo DOM Event, and Container.
<script type="text/javascript" src="../yui/build/yahoo-dom-event/
yahoo-dom-event.js"></script>
<script type="text/javascript" src="../yui/build/container/
container.js"></script>
You also need to add the styles needed for the lightbox. These are included in the source download for brevity. Then, you start a JavaScript block and define the functions in the YAHOO.example namespace.
In your init function, create and render the overlay widget that will contain the larger version of the image. Next, create an overlay object that is 100% in height and width of the viewport and append this div to the body of your document. This will contain your transparent background image that makes the page appear to fade behind the larger image version. Finally, add a listener event to both the 'show' link and the close button to both show and hide the overlay.
YAHOO.example = function() {
var $D = YAHOO.util.Dom;
var $E = YAHOO.util.Event;
return {
init : function() {
overlay_img = new YAHOO.widget.Overlay("overlay_img",
{ fixedcenter:true, visible:false, width:"330px" });
overlay_img.render();
// Dynamically build a second, hidden overlay div to
// contain the transparent background image
var overlay = document.createElement('div');
overlay.id = 'overlay';
// Assign 100% height and width
overlay.style.width = $D.getViewportWidth()+'px';
overlay.style.height = $D.getViewportHeight()+'px';
document.getElementsByTagName('body')[0].appendChild(overlay);
overlay.style.display = 'none';
// Assign event listeners
$E.addListener("show", "click", YAHOO.example.lb_show, null);
$E.addListener("close", "click", YAHOO.example.lb_hide, null);
},
Once the init() function is defined, create two additional methods to correspond to the assigned listening events. The first is lb_show() and the second is lb_hide(). These are very simple functions that alter the visibility of the two overlay elements.
lb_show : function() {
$D.get('overlay').style.display = 'block';
$D.get('overlay_img').style.visibility = 'visible';
},
// hide both overlay elements
lb_hide : function() {
$D.get('overlay').style.display = 'none';
$D.get('overlay_img').style.visibility = 'hidden';
}
};
}();
The last action in your JavaScript block is to call the init function when the page loads. Use the Yahoo.util.Event by its full name because the variable $E is out of scope outside of the Yahoo.example namespace.
YAHOO.util.Event.addListener(window, "load", YAHOO.example.init);
In your markup, add an image with the id "show" so you can use this image to trigger the lightbox overlay when the image is clicked. Then, add the markup for the hidden div you will use to show the larger version of the image. Here, you can see the 'close button' that has an onclick event listener assigned to call lb_hide().
<a href="#" id="show"><img src="images/IMG_0076.jpg"
style="height: 200px; width: 150px; border: 0;" /></a>
<div id="overlay1" style="visibility:hidden">
<div class="hd"><span>Keyhole</span><a href="#" id="close"
class="container-close"></a></div>
<div class="bd"><img src="images/IMG_0076.jpg" /></div>
<div class="ft"><span>Some sort of comment on the photo</span></div>
</div>
Download the Source Code
Download the source code for this article here.
Conclusion
YUI has a variety of widgets that make adding interactive web features easier than ever. The documentation and examples gallery are extremely useful in implementing a feature in YUI. One of the best things about YUI is that it offers a lot of great features, simple interfaces, a light footprint on page loads, and you can use a single library for about any feature you need.
References
About the Author
Diona Kidd is an owner and developer at Knowmad Technologies, an open source web development and programming firm providing content management systems, e-commerce, and custom programming services.
IE 7
Firefox 2.0
