2163 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
Nitro_Themes says

Hey man

here is some ideas. I do a lot of animated content in my templates with js. So there is a few different ones that you can look at below.

Cheers

Lester

//--------// start animations //--------//
function startF(){    
    setTimeout(function () {
        $('.top1').css({marginTop:-181}).stop().delay(0).animate({marginTop:0},1200,'easeOutQuint');
        $('.sound_control').css({marginTop:-150}).stop().delay(0).animate({marginTop:0},1500,'easeOutQuint');
        $('.sound_control_txt').css({marginTop:-200}).stop().delay(0).animate({marginTop:5},1800,'easeOutQuint');
        $('.splash').css({marginLeft:-500}).stop().delay(400).animate({marginLeft:0},1200,'easeOutQuint');
        $('ul#slide-list').css({marginBottom:-500}).stop().delay(400).animate({marginBottom:0},1800,'easeOutQuint');
        $('.bot1, #fs').css({marginBottom:-100}).stop().delay(0).animate({marginBottom:0},1200,'easeOutQuint');
        $('#progress-back').css({marginBottom:-100}).stop().delay(0).animate({marginBottom:0},1200,'easeOutQuint');
    }, 200);
};
5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

Thanks Lester.

2163 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
Nitro_Themes says

No problem man, i hope you can figure some of it out. Pretty straight forward i guess.

Cheers

Lester

5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

No problem man, i hope you can figure some of it out. Pretty straight forward i guess.

Cheers

Lester

Thankyou, I am using a template off TF.

So far so good, fits the whacky purpose we are aiming for.

Demo here

2163 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
Nitro_Themes says

Cool hehe.

36 posts
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
Jaegers says


No problem man, i hope you can figure some of it out. Pretty straight forward i guess.

Cheers

Lester

Thankyou, I am using a template off TF.

So far so good, fits the whacky purpose we are aiming for.

Demo here

You should correct this script to run only when portion of the page with flyout products is visible on screen, i.e. is in viewport.

See jQuery solution

5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

@Jaegers if I knew how to use that code, it would be great. I added it but Not sure why, but isnt working lol

36 posts
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
Jaegers says

@Jaegers if I knew how to use that code, it would be great. I added it but Not sure why, but isnt working lol
When added, this function can be used as follows..
(function ($) {
    if ($(".la_products").isOnScreen()) {
        // stuff that animates products
    }
}(jQuery));
5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says


@Jaegers if I knew how to use that code, it would be great. I added it but Not sure why, but isnt working lol
When added, this function can be used as follows..
(function ($) {
    if ($(".la_products").isOnScreen()) {
        // stuff that animates products
    }
}(jQuery));
So I have this?
$.fn.isOnScreen = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

};

(function ($) {
    if ($(".la_products").isOnScreen()) {
        $('.box').each(function(){

                var vtime = $(this).attr('data-time');
                var vanimate = $(this).attr('data-animate');
                var me = $(this);
                me.hide();

                setTimeout(function() {
                    $(me).show().addClass(vanimate);
                }, vtime);

            });
    }
}(jQuery));

Still doesnt work, I must be doing something fundamentally wrong :(

2163 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
Nitro_Themes says

What are you trying to do exactly? Are you trying to animate something in after the page loads?

This is just basic js animations that you have to assign to your classes.

Cheers Lester

by
by
by
by
by
by