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 6 of 6
  1. #1
    Junior Member
    Join Date
    Jun 2013
    Posts
    1
    Member #
    36477
    Hello.
    If you go to this page:
    http://www.orangesoda.com/blend/features/#Overview

    ...and then click a link on the left side, it vertically scrolls you down the page to your selected section. I'm interested in knowing how this is done, but I don't even know what term to google by. Does anyone know the name of this scrolling technique & possibly a good tutorial?

    Thanks

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    What you're looking for is called "parallax". I don't know of a good tutorial to build something like this and I wouldn't go that route if I were you, since a single page with a gimmicky navigation is still a single page without much to say (yes, I know they have other pages on their site, but I'm talking about that specific page).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    That's just a bit of jQuery that makes the page scroll slower. There's several ways to do it, but I think Paul Und's is the best:
    Code:
    $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
      e.preventDefault();
      var target = this.hash,
      $target = $(target);
      $('html, body').stop().animate({
          'scrollTop': $target.offset().top
      }, 500, 'swing', function () {
          window.location.hash = target;
      });
    });
    });
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Senior Member kralcx's Avatar
    Join Date
    Jan 2010
    Location
    3rd Planet from the Sun
    Posts
    140
    Member #
    20799
    Liked
    18 times
    Here's a tutorial on parallax scrolling
    http://webdesign.tutsplus.com/tutori...search_index=2

  6. #5
    Junior Member
    Join Date
    Jun 2013
    Posts
    4
    Member #
    36482
    Quote Originally Posted by Ronald Roe, post: 251911, member: 27211
    That's just a bit of jQuery that makes the page scroll slower. There's several ways to do it, but I think Paul Und's is the best:
    Code:
    $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
      e.preventDefault();
      var target = this.hash,
      $target = $(target);
      $('html, body').stop().animate({
          'scrollTop': $target.offset().top
      }, 500, 'swing', function () {
          window.location.hash = target;
      });
    });
    });
    Great the javascript code is best

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by kralcx, post: 251921, member: 20811
    Here's a tutorial on parallax scrolling
    http://webdesign.tutsplus.com/tutori...search_index=2
    It isn't a parallax effect. It's just smooth scrolling.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


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 02:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com