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

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.

591 posts
  • Exclusive Author
  • Ghana
  • Has been a member for 0-1 years
  • Sold between 100 and 1 000 dollars
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

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

Gawd you guys are fast lol

2263 posts Bird is the word..
  • Elite Author
  • United States
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Referred between 200 and 499 users
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
+3 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
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

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

591 posts
  • Exclusive Author
  • Ghana
  • Has been a member for 0-1 years
  • Sold between 100 and 1 000 dollars
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 :)

2263 posts Bird is the word..
  • Elite Author
  • United States
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Referred between 200 and 499 users
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
+3 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 ;)

591 posts
  • Exclusive Author
  • Ghana
  • Has been a member for 0-1 years
  • Sold between 100 and 1 000 dollars
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
  • Sold between 10 000 and 50 000 dollars
  • Author had a File in an Envato Bundle
  • Referred between 1 and 9 users
  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
  • Argentina
  • Exclusive Author
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.

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 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