Ok, put that Javascript snippet on your site.

$(window).on('scroll', function () {
        var scrollPosition = $(window).scrollTop() + $(window).height();
        var timeout = 100;

        $('.ws-post').each(function () {
            var element = $(this);
            var elementPosition = element.offset().top;

            if (false === element.hasClass('ws-post--ready') && scrollPosition >= elementPosition) {
                setTimeout(function () {
                    element.addClass('ws-post--ready');
                }, timeout += 100);
            }
        });
    });

The code above will add a class on your elements, if the user scroll down on your site and the element is in the viewport.
Don’t forget to style the elements, to make the effect more fancy.

.ws-post {
    transform: scale(0);
    -webkit-transform: scale(0);
    visibility: hidden;
    opacity: 0;
    transition: transform 100ms cubic-bezier(0, 0, 1, 1), visibility 0ms linear, opacity 100ms cubic-bezier(0, 0, 1, 1);
    -webkit-transition: transform 100ms cubic-bezier(0, 0, 1, 1), visibility 0ms linear, opacity 100ms cubic-bezier(0, 0, 1, 1);
}

.ws-post.ws-post--ready {
    transform: scale(1);
    -webkit-transform: scale(1);
    visibility: visible;
    opacity: 1;
}

Leave a Reply

Your email address will not be published. Required fields are marked *