SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Location
    Behind you...
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One-page Html5 Navigation!

    Hello,

    I'd like to know if anyone knows a tutorial on how to make a One-page navigation that goes to the next page upon pressing up or down arrow key or using the scroll of the mouse. Here's an example website that uses the same effect that I'd like to achieve.

    www(dot)myprovence(dot)fr

    Thanks in advance
    Waleed Mushtaq | Online Portfolio

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi Jazzz. Welcome to the forums.

    Despite the common perception that all things cool on the web must have something to do with HTML5, this sort of effect has nothing to do with HTML, but is provided by JavaScript (so I've moved this to the JS forum).

    This is a common scroll effect, in most cases provided by the jQuery JavaScript library. There are various scripts out there written to do this. Here's a tutorial on how to do it:

    http://designshack.net/articles/html...te-the-scroll/

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Location
    Behind you...
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I've checked the tutorial but i dont think its quite the same thing. If you notice in the link i provided, you only scroll between pages through either the mouse scroll wheel or keyboard up and down buttons. I already know how you can navigate to certain part of the page through jquery, but I'd like to know how can i achieve the scroll wheel and keyboard navigation effect.

    Thanks
    Waleed Mushtaq | Online Portfolio

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Ah, I see. You can always peek at the page's code, of course. They are using jQuery. They do reference the inspirations behind the script, such as http://www.adomas.org/javascript-mouse-wheel/, and the script has an MIT license:

    Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
    * Licensed under the MIT License (LICENSE.txt).
    This usually means you can use the code if you keep that credit in the code.

    Mind you, the script is very jerky in my browser (Chrome).


Bookmarks

Posting Permissions

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