Trigger animation when scrolling

Question

Is there any chance of making these animations I've seen on this tutorial http://www.netmagazine.com/tutorials/getting-animations-trigger-right-time work for elements without an image (a row of text blocks for example)? Everything works fine but once I remove the image the effect stops working. Not sure if I made myself clear. Thank you!

< script >
if (Modernizr.csstransitions) {
    function preloadImages(imgs, callback) {
        var cache = [],
            imgsTotal = imgs.length,
            imgsLoaded = 0;

        $(imgs).each(function (i, img) {
            var cacheImage = document.createElement('img');
            cacheImage.onload = function () {
                if (++imgsLoaded == imgsTotal) callback();
            };
            cacheImage.src = $(img).attr('src');
            cache.push(cacheImage);
        });
    };
    $.fn.trans = function () {
        var t = arguments[0],
            d = arguments[1] || '';
        if (t) {
            $.each(this, function (i, e) {
                $(['-webkit-', '-moz-', '-o-', '-ms-', '']).each(function (i, p) {
                    $(e).css(p + 'transition' + d, t);
                });
            });
        }
    };

    document.write('<link rel="stylesheet" href="animations.css" />');

    $(function () {
        //preload images contained within elements that need to animate
        preloadImages($('.services img, .featured img'), function () {
            $('.services, .featured').appear({
                once: true,
                forEachVisible: function (i, e) {
                    $(e).data('delay', i);
                },
                appear: function () {
                    var delay = 150,
                        stagger = 800,
                        sequential_delay = stagger * parseInt($(this).data('delay')) || 0;

                    $(this).children().each(function (i, e) {
                        $(e).trans(i * delay + sequential_delay + 'ms', '-delay');
                    });
                    $(this).removeClass('animationBegin');
                }
            });
        });
    });
} < /script>

Answer 1

It appears that the article and the working demo aren't exactly in sync.

I managed to get the demo working in a fiddle

A couple things to note:

• You may need to use the modified version of appear as in the fiddle. Located here
• jQuery Appear has some logic that must relied on $(window).load, so the initialization logic has to run outside of a ready handler or trigger load.
• The demo's loading animations were triggered when all pending images finished pre-loading

With code copied directly from the original demo and initializing everything outside a ready block, getting it to work without images was basically a matter of getting rid of the preload callback:

Demo Fiddle

Code:

$(function () {
    $('.services, .featured').appear({
        once: true,
        forEachVisible: function (i, e) {
            console.log('adding delay: ' + i);
            $(e).data('delay', i);
        },
        appear: function () {
            var delay = 150,
                stagger = 800,
                sequential_delay = stagger * parseInt($(this).data('delay'), 10) || 0;

            $(this).children().each(function (i, e) {
                $(e).trans(i * delay + sequential_delay + 'ms', '-delay');
            });
            $(this).removeClass('animationBegin');
        }
    });
});

Answer 2

This looks like it kind of over complicates things. Try this i have done some amazing things using this. He provides the style sheet and the basic JS for scrolling animations.

http://www.justinaguilar.com/animations/scrolling.html