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,114
    Mentioned
    448 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/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,114
    Mentioned
    448 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).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •