2251 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has referred 1+ members
  • 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.

2251 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has referred 1+ members
  • 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

2251 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has referred 1+ members
  • 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 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

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 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));
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 :(

2251 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has referred 1+ members
  • 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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by