Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Animation to Top of Page

    I am trying to get my #main div to animate over the top of my #header div and then stop at the top of the page. I am trying to avoid setting a predetermined height for the animation. The page it is on uses a fluid layout. Does anyone know how to make the #main div stop animating at the top of the page?

    http://jsbin.com/ivewah/5/edit

    I know that ideally a .slideUp/.slideDown function would be in order, but for some reason it interferes with the fittext plugin I am using. Just FYI

  • #2
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    Just to clarify...

    you're wanting to get your #main div to move/animate downwards 150px as it increases its opacity from 0 to 1, once it reaches the 150px you want the #main div to stop (either moving or animating).

    Correct?
    Last edited by dylanbaumannn; 02-10-2012 at 07:44 PM.

  • #3
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Sorry I should have been more clear. Basically I want the #main div to move up when the work link is clicked and then stop moving when it hits the top of the page. And then, when the about or contact links are clicked to animate down again to where it was previous. My page is based on % so I would like to keep px and ems out of it. Do you think this is possible?

    Does that make sense?
    Last edited by NateG; 02-10-2012 at 08:03 PM.

  • #4
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    It is possible, the only way that I know of (I'm relatively new to what you're attempting as well) is using HTML5.

    I'm unsure exactly how it's done (still researching right now) but here's an example of it in use http://slaveryfootprint.org/.

    (click the 'What' button, then start scrolling down)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •