Animated Image?

Hi all,

How do you get the image to fade in or 'appear' like in the demo?

I have it working on the homepage using

<div class="loaded">
<img width="248" height="248" alt="image" src="/devnew/images/image.jpg">

But it doesnt work on other pages?

I would like to have images on each page appearing to add a subtle animation, any thoughts?

Many Thanks

Gary

Hello,

In general you should use the same CSS classes or create your own CSS classes which will be animated when the "loaded" class is added.

Please remember that your own classes should be added to the animated stack like these ones:

Code: Select all

        document.getElements('.gkIcons').each(function(element, i) {
                elementsToAnimate.push(['queue_anim', element, element.getPosition().y, '.gkIcon']);
        });
       
        document.getElements('.gkPoints').each(function(element, i) {
                elementsToAnimate.push(['queue_anim', element, element.getPosition().y, 'li']);
        });
       
        document.getElements('.gkTestimonials').each(function(element, i) {
                elementsToAnimate.push(['queue_anim', element, element.getPosition().y, 'div div']);
        });