Create a gallery with fade-in effects using Mootools
I was working on a photo gallery a couple of days ago and I thought I’d write a tutorial on adding neat effects on a gallery of items (usually photos).
Demo | Mootools Gallery (1427 downloads)
The problem
I was showing 12 photos on a page and I didn’t like how it loaded – it simply looked too static. So I though of adding a nice fade in effect to each item. This could be even more useful when loading the photos via an AJAX request, which I intend to add to that gallery at a later time. First, let’s take a look at the gallery HTML:
<ul class="gallery"> <li class="clear"> <a href="#"><img alt="img_01" src="img/01.jpg"/></a> <h2>Image #1</h2> </li> <li> <a href="#"><img alt="img_02" src="img/02.jpg"/></a> <h2>Image #2</h2> </li> ... <li> <a href="#"><img alt="img_12" src="img/12.jpg"/></a> <h2>Image #12</h2> </li> </ul>
I’m gonna add some basic CSS on this list, just to make it look like a grid, rather than a list – of course you can apply any styling on it.
.gallery {width: 540px; margin: 0 auto;}
.gallery li {opacity: 0; filter: alpha(opacity = 0); float: left; width: 100px; padding: 5px 10px 15px;}
.gallery li.clear {clear: left;}
.gallery li img {border: 1px solid #ccc; width: 100px;}
You can’t tell from the missing li elements, but I’m clearing each 4th element to create a 4×3 grid. Ok – so far the grid is in place, but we need the animation part – we could use any javascrpit framework, but for this project I had to use Mootools – for those of you that haven’t seen it and don’t what it is about, here’s a quick overview from their site: MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.
The solution
First, we need to fetch all li elements:
var li = $$('ul.gallery li');
then apply the animation effect:
li.each(function(e) {
e.set('tween', {duration: 500, transition: 'back:in'}).tween('opacity', 0, 1);
});
A few comments on this last piece of code:
- e.sets(…) – set the duration to 500 and transition to “backIn” to all tweens
- e.tween(‘opacity’, 0, 1) – animate (or tween) opacity from 0 to 1, using the options defined above
If you run this code you can clearly see that it doesn’t exactly produce the desired effect – all photos fade-in at once, because of the way the code is executed. The trick is to add an incremented timeout to each element:
var i = 0; //the current timeout
li.each(function(e) {
i += 100; //adding the increment
setTimeout( function() {
e.set('tween', {duration: 500, transition: 'back:in'}).tween('opacity', 0, 1);
}, i);
});
And that’s all! We now have a nice item-by-item fade-in effect. It’s worth mentioning that this effect can be changed by tweaking the three variables: the delay for each item, the speed of the effect and the tween effect. On the demo page I’ve made it possible to change the delay & speed, so you can make an idea of how they affect the general effect. The third parameter can be changed using any mootools transition (http://mootools.net/docs/Fx/Fx.Transitions).
