2324 posts
  • Author Level 5
  • Collector Level 3
  • Affiliate Level 1
  • Weekly Top Seller
+7 more
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);
};
5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 more
Australia
says

Thanks Lester.

2324 posts
  • Author Level 5
  • Collector Level 3
  • Affiliate Level 1
  • Weekly Top Seller
+7 more
Nitro_Themes
says

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

Cheers

Lester

5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 more
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

2324 posts
  • Author Level 5
  • Collector Level 3
  • Affiliate Level 1
  • Weekly Top Seller
+7 more
Nitro_Themes
says

Cool hehe.

36 posts
  • Author Level 3
  • Collector Level 2
  • Exclusive Author
  • 3 Years of Membership
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

5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 more
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
  • Author Level 3
  • Collector Level 2
  • Exclusive Author
  • 3 Years of Membership
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));
5492 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Australia
  • Author Level 3
+5 more
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 :(

2324 posts
  • Author Level 5
  • Collector Level 3
  • Affiliate Level 1
  • Weekly Top Seller
+7 more
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