5483 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

I have a page that I want to animate some divs on so they slide in from the right of the page ( hidden on load ) and are centered to the width of the page at a specific position, but do not appear until 10 seconds AFTER the page has fully loaded.

Can you kindly point me in the right direction, I could have a bash myself, but will end up spending 3 days buggering about.

will add an image of what I am after in cpl mins.

592 posts
  • Has sold $100+ on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Ghana
IsaacA says

I have a page that I want to animate some divs on so they slide in from the right of the page ( hidden on load ) and are centered to the width of the page at a specific position, but do not appear until 10 seconds AFTER the page has fully loaded.

Can you kindly point me in the right direction, I could have a bash myself, but will end up spending 3 days buggering about.

will add an image of what I am after in cpl mins.

An image will greatly help

5483 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

Gawd you guys are fast lol

2268 posts Bird is the word..
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
jonathan01 says

You could also use basic css transitions with a delay to do this bud. Here’s a great little explanation and tut:

http://css3.bradshawenterprises.com/transitions/

I used something like you mentioned on one of my freebie sites:

http://cr3ativstyles.com
5483 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

ahhh I know how to do css animations, it was the delay that was buggering me up. Cheers Jon will have a looksy ;)

592 posts
  • Has sold $100+ on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Ghana
IsaacA says

ahhh I know how to do css animations, it was the delay that was buggering me up. Cheers Jon will have a looksy ;)

The transition-delay property can help you there :)

2268 posts Bird is the word..
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+8 more
jonathan01 says


ahhh I know how to do css animations, it was the delay that was buggering me up. Cheers Jon will have a looksy ;)
The transition-delay property can help you there :)

That’s what I gave him a link to bud ;)

592 posts
  • Has sold $100+ on Envato Market
  • Sells items exclusively on Envato Market
  • Located in Ghana
IsaacA says



ahhh I know how to do css animations, it was the delay that was buggering me up. Cheers Jon will have a looksy ;)
The transition-delay property can help you there :)
That’s what I gave him a link to bud ;)

Yeah, credit for that.

224 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Had an item featured in an Envato Bundle
+4 more
WPAlchemy says
$(document).ready(function() {
    setTimeout(function() {
        /* Do animation here */
    }, 10000);
});

CSS delays start counting as soon as CSS is loaded, and not when the page finished loading.

5483 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 WPA , my primary concern was cacheing. Hence I thought jQuery would work better. Will have a play, and thanks guys sincerely appreciate your help :)

You Rock

by
by
by
by
by
by