2206 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+5 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
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
Australia says

Thanks Lester.

2206 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+5 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
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 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

2206 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+5 more
Nitro_Themes says

Cool hehe.

36 posts
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 2 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

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 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
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 2 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));
5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 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 :(

2206 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
+5 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