Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Feb 2013
    Posts
    1
    Member #
    35373
    Hello all! Im new hear, im working on a personal portfolio site. I have some experience with htlm, and dreamweaver. but I haven't used them in 4 years. I have an idea i would like to do for my main page. But im not exactly sure about what direction to take. Basicly I have two gears. I have animated the gears to rotate. I would like to make it so that when the user scrolls through the middle content box, the gears would animated too, and when they scroll back, the gears would reverse as well. Anybody know of a way you would tackle something like this? I had heard an idea of using java script, and an animated .gif that would be linked to the scroll wheel. Does anybody know of any good reference tutorials for something like this? Any help would be much appreciated!PageHOME3.jpg

  2.  

  3. #2
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    I'm surprised no one has answered this question. I think it should be in the javascript forum, maybe.

    I haven't done an exercise like this before, but you're probably going to be using 2 different things here:

    1. jQuery's .scrollTop (calculates the pixels from the top of the window).

    and

    2. CSS3 rotate or maybe an animated .gif.

    Here's a link I found to a basic rotation example. I'm not a jQuery expert, so I can't write this out for you, but conceptually, you'll want something like this:

    calculate the window height with scrollTop -> when people go past 50% of the pixel height, append css to the gear .div -> the css is css3 rotate -> vice versa for reversing gears when scrolling up.

    That's a lot of coding. Good luck.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:14 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com