OnePageScroll.js: Creating an Apple’s iPhone 5S Website

OnePageScroll.js: Creating an Apple's iPhone 5S Website

On the 9th of September, 2013, Apple announced 2 new versions of the iPhone called the iPhone 5S and the iPhone 5C. Like all new product announcements these days, the releases were accompanied with beautiful websites to showcase their products. I was interested in the new iPhone 5S website in particular because of the way the scroll works. On the iPhone 5S website, you can only scroll one step at a time, allowing the viewer to get only relevant information without accidentally scrolling pass things.

Today, I have decided to build a simple plugin called One Page Scroll that will let you quickly create a similar website to the iPhone 5S and iPhone 5c page, with one JS call. Without further ado, let’s begin diving into all the features available.

Note: This plugin has been tested on Windows’, OSX’s, iOS’s, Android’s Chrome, Firefox, Safari and IE10.

Create an Apple iPhone 5S website with OnePageScroll.js

[tut demo=”http://www.onextrapixel.com/examples/apple-iphone5s-website-one-page-scroll/” download=”http://www.onextrapixel.com/examples/apple-iphone5s-website-one-page-scroll/apple-iphone5s-website-one-page-scroll.zip”]

Using OnePageScroll.js in Website Design

How Does It Work?

Basically, the plugin will detect your mouse wheel and swipe gestures (Thanks to Eike Send’s jQuery Swipe Events) and determine which way the page should scroll. All the styles required to prevent normal scroll to trigger, position of each section, and animation will all be handled by the plugin itself. Once the user scrolls or swipes up/down, the plugin will automatically add a CSS3 transform that will move the whole page up/down by one section. The reason why I used the CSS3 transform is because this will let you customize the animation a lot easier than using jQuery.

You can see this in action in demos 2 and 3 where all you need to change is one line of CSS code and the animation will change accordingly.

How-Tos

Since this plugin is a jQuery plugin, make sure you’ve included: the latest jQuery plugin available here first, and then include both the jquery.onepage.js and onepage-scroll.css found here into your document’s . Once that is done, make sure you have the HTML markup as shown below:

HTML:

<body>
  ...
  <div class="main">
    <section>...</section>
    <section>...</section>
    ...
  </div>
  ...
</body>

Note: Having the div container “main” one level lower than the body is recommended since this will allow the plugin to easily set it to full page.

Now, put the function call inside a document ready like this:

JS:

$(document).ready(function() {
...
$(".main").onepage_scroll({
   sectionContainer: "section", 
   easing: "ease",
   animationTime: 1000,
   pagination: true,
   updateURL: false
});
...
});

With this setup, your website will now perform exactly the same way the Apple’s iPhone 5S website does. You can further customize this to your liking by playing around with these options:

  • sectionContainer In case you don’t want to use section tag for each page, you can change it here. This option accepts the usual jQuery selector. The default tag is section.
  • easing will let you decide which easing effect you want your page to perform while moving up/down. This options accept all the CSS3 easing options such as linear, ease-in, ease-out, ease-in-out or you can even use cubic-bezier to create a bounce effect. For more info on how to generate the cubic-bezier value, check out Ceaser created by Matthew Lein. The default option is ease.
  • animationTime will let you define how long the animation will perform. This option accepts only value in milliseconds. The default option is 1000.
  • pagination if set to true, will automatically add a pagination to your page on the right like you see on the iPhone 5S website. You can easily change the position via CSS. Toggle this to false to remove the pagination. The default option is true.
  • updateURL will let you choose whether to change the URL of the webpage automatically to reflect the section the user is viewing. This is perfect when you want the user to be able to distribute the URL for each section. The script will automatically read the URL and jump to that section on arrival. Set it to true to enable this. The default option is false.

For Further Customization

For this plugin, I have decided to add public methods so that you can programmatically trigger the movement of the page by simply calling these methods from anywhere on the document.

$.fn.moveUp() This method allows you to move the page up by one. This action is equivalent to scrolling up/swiping down.

JS:

 
$(".main").moveUp();

$.fn.moveDown() This method allows you to move the page down by one. This action is equivalent to scrolling down/swiping up.

JS:

 
$(".main").moveDown();

For example, you may want the page to move up/down when the user clicks the arrow key. All you need to do is to find a way to detect the arrow key and fire these methods to make the page move the way you want.

[tut demo=”http://www.onextrapixel.com/examples/apple-iphone5s-website-one-page-scroll/” download=”http://www.onextrapixel.com/examples/apple-iphone5s-website-one-page-scroll/apple-iphone5s-website-one-page-scroll.zip”]

Conclusion

What do you think? Will you use this plugin for your next website? I can’t wait to see what you guys will come up with using this plugin. If you have any questions, suggestions or you want to discuss adding new features, let us know in the comments.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.

Comments

    • Elke1910,
    • September 19, 2013
    / Reply

    great ! THANKS A LOT !!!! :-)

    • nathanbweller,
    • September 19, 2013
    / Reply

    Pete, this is great! Just to be clear, this is or is not a plugin for WordPress? I have a project I’m working on right now that I could really use a WordPress version for.

    1. / Reply

      This is not a WordPress plugin unfortunately but you can integrate pretty easily. All you have to do is have the markup laid out as I mentioned in the tutorial and call the function and it should work. :)

    • Richard,
    • September 19, 2013
    / Reply

    is it possible to make it scroll sideway?

    1. / Reply

      Not right now, but let me see what I can do to support that. The purpose of this plugin is to quickly and easily create a website like you see on Apple’s iPhone 5S website without any modification.

  1. / Reply

    Nice!

    • Daniel Chetian,
    • September 20, 2013
    / Reply

    I sawthis working great this morning on an ios7 device (safari). But now, even the demo looks broken (on mobile). Any idea?

      • aidanoxp,
      • September 21, 2013
      / Reply

      @danielchetian:disqus It should have been fixed. Can you check again. Thanks.

    • Steve C,
    • September 24, 2013
    / Reply

    Was just looking for something like this. Gonna give it a whirl now, thanks!

    • Ron,
    • September 30, 2013
    / Reply

    Does not work with the latest jquery…

    1. Yes true…glad you pointed this out.. I used this on one website but was using latest jquery and couldn’t make it work.

      For the author nice try. Please make it work with latest jquery…

    • Ron,
    • October 1, 2013
    / Reply

    I have one problem: on mobile screen seems like this scroll disables all buttons/input fields etc.. for example I can’t type my email in contact form. any ideas?

    • Noah Livingston,
    • October 4, 2013
    / Reply

    This is genius. Thanks so much for your work! I’d love to have the option of making one section scroll normally. Is this possible?

    • D.,
    • October 4, 2013
    / Reply

    Hi, great stuff as always!
    Is it possible to run this on IE8+ or Opera?

      • Germain Michaud,
      • October 11, 2013
      / Reply

      Work only in IE10!

    • avexdesigns,
    • October 7, 2013
    / Reply

    What is the result if you have some “screens” with longer content? Will the user be able to scroll down until the end of that content before moving on to the next “screen”?

      • Jewe,
      • October 24, 2013
      / Reply

      Im interested in that as well!

      1. / Reply

        It just cuts it off. :-/

    • disqus_N3A8ZSDA0Z,
    • October 10, 2013
    / Reply

    Is there anyway to make this autoscroll through the pages, reloading to the top of the page once it reaches the bottom?

    1. / Reply

      You could use a JavaScript function that calls the moveDown function every x seconds.

    • victorcao,
    • October 11, 2013
    / Reply

    Would this work with horizontal navigation?

      • ShiftyF97,
      • November 10, 2013
      / Reply

      i would use just a simple slider for that actually

    • Александр,
    • October 16, 2013
    / Reply

    Thank you very much!

    • Marta Wójcik,
    • October 23, 2013
    / Reply

    Can this work not only with scroll but also with keyboard arrows??

      • Marta Wójcik,
      • October 28, 2013
      / Reply

      I will answer to myself – yes it can :D

    • Denis,
    • October 26, 2013
    / Reply

    Please tell me how to make a link to Identify the “slide”. For example, on the 3rd or 5th? Thank you.

    1. / Reply

      Easiest/inline way: on the link you want to point somewhere, add an onclick attribute to the anchor, and set its contents equal to $(“.main”).moveTo(3);, or moveTo() whatever slide you’re trying to move to.

        • leighmasson,
        • April 2, 2014
        / Reply

        Hey Cassidy, I tried implementing this.

        In my navigation bar I added the following:

        Page 3

        NOTE- I added the ** only to prevent this site from abbreviating my links.
        Elsewhere in my document I have my anchor :

        ** Sample content on page 3**

        But this still does not work? Am i implementing this wrong?

    • Denis,
    • October 26, 2013
    / Reply

    How to specify a link to a specific slide?

    • hgw7m,
    • October 26, 2013
    / Reply

    I’m running into a problem that also seems to exist on Pete’s demo page here: http://www.thepetedesign.com/demos/onepage_scroll_demo.html: Nothing happens when you tap – on iPad – on the “Download from Github” links in the three sections. I’m having the problem with navigation links, you can see it here: http://www.rampguitars.com/onepage2.php (the page is not yet officially released). Nothing happens – on iPad – when you tap at a link in the top navigation bar or when you tap at the logo. Maybe same issue as Ron mentioned below with deactivating input fields. I’d be happy to hear hints to solve …

    1. / Reply

      I got the same problem on Ipad, or just on every tablet or smartphones.
      I don’t solve it but if someone got a solution or work on it, I’m interested.

    • Ben Cato,
    • October 30, 2013
    / Reply

    How can I scroll to each section with a previous and next button as well? Please help!!! Thanks

      • D Kirjakov,
      • November 1, 2013
      / Reply

      As described in the end of the article :

      $(“.main”).moveUp(); (oder moveDown)

      you could do something like this:

      $(‘#yourButton-or-Arrow’).on(‘click’, function () {
      $(“.main”).moveUp();

      });

      or with the keys, which works on the original iphone 5s page:

      $(document).on(‘keypress’, function(e) {

      if (e.keyCode == 38)

      $(‘.main’).moveUp’);

      else if (e.keyCode == 40)

      $(‘.main’).moveDown();

      });

      38 is for arrow-up key and 40 for arrow-down key.

      Here is a list of event key codes : http://www.webonweboff.com/tips/js/event_key_codes.aspx

      1. / Reply

        Thanks for this, works great but you have one tiny typo. This is the correct code:

        $(document).on(‘keypress’, function(e) {
        if (e.keyCode == 38)
        $(‘.main’).moveUp();
        else if (e.keyCode == 40)
        $(‘.main’).moveDown();
        });

    • Chris Sweeting,
    • October 31, 2013
    / Reply

    This is amazing. However, not being a js/jquery coder myself, I have no idea how to implement the click to anchor concept. Can you give an example on how to make an ahref with id of “foo” scroll to slide 2? Thanks!

    • Chris Sweeting,
    • October 31, 2013
    / Reply

    If you’re trying to use a button or link to make this script scroll up or down add the following to your section:

    $(function() {
    $(‘a#button1’).click(function() {
    $(“.main”).moveDown(); or $(“.main”).moveUp(); <– choose one, not both and don't include the or in the middle.
    return false;
    });
    });

    Then for the html, place an id=”button1″ in your Click Me

      • leighmasson,
      • April 2, 2014
      / Reply

      Hey Chris

      This is pretty neat. Any way to make it scroll to an anchor though rather than just up or down one slide?

      • leighmasson,
      • April 2, 2014
      / Reply

      Worked out a way to scroll to any section rather than just up and down.
      Here’s how.

      Add this script function (or multiple for multiple links) to the section of your html doc;


      $(function() {
      $(‘a#button2’).click(function() {
      $(“.main”).moveTo(2);
      return false;
      });
      });

      **Where (2) is The page you want to scroll to. Change this to any no (1,2,3,4,5,6…)
      ** Where button2 is whatever you want to call the function (call it button1, button3, button4 …).

      In the add this as your navigation link:

      Page2

      **Where ‘Page 2’ is whatever you want is the name of your page/link.
      ** Where “button2” lines up with whatever you called the function.
      * Remove the * from in front of the a. This was just so disqus wouldnt abreviate.

      So basically you create a link that calls upon the function which tells the browser to scroll to page (2).

      Repeat as necessary for each link and page.

      Hope I explained that right.

    • Debasishkanhariitkgp,
    • November 7, 2013
    / Reply

    Pete this is great stuff first of all. Thanks for this :)

    I just had some doubt. I wanted to integrate a sticky footer type of thing to it. I was thinking maybe after the slider are over(3 slides in this case) can I move to normal html page where I can place a sticky footer at bottom? Because if I try to introduce it at the final slide, due to some reason “position bottom doesnt seem to work” and footer changes position according to resolution.

    Thanks :)

    • Pavel ,
    • November 11, 2013
    / Reply

    You can activate this plugin on tumblr?

    • Robson Junior,
    • November 13, 2013
    / Reply

    Thanks a lot. I’m using this plugin for the website i’m building right now. When its done I’ll post the production url here to show you guys :)

    • Bill,
    • November 15, 2013
    / Reply

    You said change scrolling effect in demo 2 and demo 3 with one line of css change. Which line?????

    • JohnnyMao,
    • November 20, 2013
    / Reply

    Do you have an online example? I’d like to figure out how to assign an anchor to link to a different section.

      • leighmasson,
      • April 2, 2014
      / Reply

      Hey Johnny, worked out another way… and Im sharing.

      Add this script function (or multiple for multiple links) to the section of your html doc;


      $(function() {
      $(‘a#button2’).click(function() {
      $(“.main”).moveTo(2);
      return false;
      });
      });

      **Where (2) is The page you want to scroll to. Change this to any no (1,2,3,4,5,6…)
      ** Where button2 is whatever you want to call the function (call it button1, button3, button4 …).

      In the add this as your navigation link:

      Page2

      **Where ‘Page 2’ is whatever you want is the name of your page/link.
      ** Where “button2” lines up with whatever you called the function.
      * Remove the * from in front of the a. This was just so disqus wouldnt abreviate.

      So basically you create a link that calls upon the function which tells the browser to scroll to page (2).

      Repeat as necessary for each link and page.

      Hope I explained that right.

        • Alex,
        • May 2, 2014
        / Reply

        Thanks SOOOOOOOOOOO MUCH !!!

    • saugata kar,
    • November 28, 2013
    / Reply

    Is there any way to auto scroll it ? Please suggest

    • enekobarrero,
    • December 1, 2013
    / Reply

    Love this but… Is there way to make a section/div at the end of the page without the scroll effect?

    • edward bonsu,
    • December 9, 2013
    / Reply

    How do you add a tooltip to the page navigation?
    Thanks

    • Krupa,
    • December 9, 2013
    / Reply

    This scrolling effect not working in my ipad.when i swipe it it scrolls to the last section insted of scroll next section

    • Garet Hindman,
    • December 10, 2013
    / Reply

    Is there a way to add text links as navigation instead of the pagination? Thanks.

    • Garet Hindman,
    • December 10, 2013
    / Reply

    Great script. Is there a way to manually add text links for navigation instead of the pagination?

    • Stephen Kukura,
    • December 12, 2013
    / Reply

    Hello, I am having trouble getting the code to work. here is my code. it would be greatly appreciated if someone could tell me my errors. I have the new js plugin installed. I am very unfamiliar with javascript.

    Untitled Document

    gfdsssssssssssssss

    gfdsgfdsgfdsgfdsgfdsgfdsgfdsgfdsgfdsgfdsgfdsgfdsgfds

    $(document).ready(function() {

    $(“.main”).onepage_scroll({

    sectionContainer: “section”,

    easing: “ease”,

    animationTime: 1000,

    pagination: true,

    updateURL: false

    });

    });

      • Hashaam zahid,
      • December 13, 2013
      / Reply

      Add jquery Library http://jquery.com/download/

        • Stephen Kukura,
        • December 16, 2013
        / Reply

        thanks. I thought I already did that, but I could have done it wrong. I downloaded the java style sheet for jquery migrate plugin and attached it in the code at . But is that the right one? or if it is, am I downloading the style sheet properly?

    • badke,
    • December 13, 2013
    / Reply

    Is there a way to offset when this begins? I want to add an “intro” above the “main” div, and then once you scroll past this it goes into the full browser mode. So you’d see this intro and the top half or so of the first section div, then once you start scrolling down it begins to load each section full browser as the demo does. The intention would be to show the user that there’s more below (that they can see), begin to scroll, and then get into the full browser experience.

    Great plugin by the way, thank you.

    • Eddy,
    • December 31, 2013
    / Reply

    Hi first of all a great job!!!

    Second I had a problem with arrow key scrolling but I solved it so if anyone wants his arrowkeys enabled here is my code.

    document.onkeydown = checkKey;

    function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == ’38’) {
    // up arrow

    $(“.main”).moveUp();

    }

    else if (e.keyCode == ’40’) {
    // down arrow

    $(‘.main’).moveDown();

    }

    }

    just copy paste it in your html file.

    Regards.

    • antonio,
    • January 8, 2014
    / Reply

    How can I integrate this function in a wordpress template?

    • avoid,
    • January 20, 2014
    / Reply

    Nice, but when using iPhone 5S in landscape modus the upper and lower bar don´t disappear when scrolling…

    • frank fmx,
    • January 20, 2014
    / Reply

    Used this plugin on a recent project. Worked perfectly with the idea i was going for. Simple, clean and straightforward. Great job Peter! Here’s the site http://theanalise.com

    • Erick Acevedo,
    • January 22, 2014
    / Reply

    Thanks for this resource. Thank you! that’s the way i learn to make great stuff!

    • stefanalexandru,
    • January 25, 2014
    / Reply

    Hi awesome plugin … i do have a question tho’. [slide = page] What needs to be done in order to skip some slides to get from slide G to slide A directly via the bullet navigation [ right navigation ]. Eg. I navigate from top to bottom, from slide A to slide G while passing through slides B C D E F. Now i want to go directly to slide A. Currently to get to slide A from slide G you pass through F E D C B slides really fast and that’s not pretty at all. What i would like is to have a transitional type effect like FADE IN so i fade from Slide G to Slide A … i had several attempts of doing this with a mix of JS and CSS3 animations but it’s slugish. So i was wondering how would you do it.

      • leighmasson,
      • April 2, 2014
      / Reply

      Hey Stefan, worked out a way… and Im sharing.

      Add this script function (or multiple for multiple links) to the section of your html doc;


      $(function() {
      $(‘a#button2’).click(function() {
      $(“.main”).moveTo(2);
      return false;
      });
      });

      **Where (2) is The page you want to scroll to. Change this to any no (1,2,3,4,5,6…)
      ** Where button2 is whatever you want to call the function (call it button1, button3, button4 …).

      In the add this as your navigation link:

      Page2

      **Where ‘Page 2’ is whatever you want is the name of your page/link.
      ** Where “button2” lines up with whatever you called the function.
      * Remove the * from in front of the a. This was just so disqus wouldnt abreviate.

      So basically you create a link that calls upon the function which tells the browser to scroll to page (2).

      Repeat as necessary for each link and page.

      Hope I explained that right.

    • Chris Backe,
    • January 31, 2014
    / Reply

    This is awesome – would love to incorporate this into a WordPress one-page design. I’m kind of a noob at incorporating non-WordPress elements into the platform – where would you put the JS? header.php?

    1. / Reply

      functions.php

    • Matt,
    • February 5, 2014
    / Reply

    Does anybody know how to disable the JavaScript code on mobile devices so that the divs just scroll up normally without the effect? I’m having issues when visiting my webpage on mobile devices such as an iPhone and iPad http://www.mattsouzadesign.com/home Thanks!

      • mrakowski,
      • February 13, 2014
      / Reply

      Plenty of ways to do so, one would be to use Modernizr to test for ‘touch’ devices and then only calling(or not) the function/plugin.

        • Matt,
        • February 13, 2014
        / Reply

        Sorry I’m not very familiar with Modernizr or JavaScript for that matter… anyway you could dumb it down for a fellow designer? Much appreciated!

    • Affy,
    • February 8, 2014
    / Reply

    Hi is there a way to add a transparent black at the bottom with different text inside for each page? Im building a portfolio and i need a block at the bottom to write a description for each page

    Thanks

    • Artur Haddad,
    • February 21, 2014
    / Reply

    Is it possible to use parallax with?
    When i use some position absolute div it blinks when scrolled, someone knows about it?

    • Alex,
    • March 9, 2014
    / Reply

    Great tutorial! But, is there an easy way to make a nice navigation with links to each section? Thanks ;)

  2. / Reply

    Guys, for all of you who has a problem using this in their iPhone, iPad, I knew the problem is! Man, I took two days before I find out the problem. Goodness! The new version of this one page scroll (which I believe is v1.2.1) is the main problem! It has a bug on iPhone and iPad. I suggest you look at the lower version which is v1. It will solve your problem!

    • leighmasson,
    • March 20, 2014
    / Reply

    Hi Pete,
    This is very neat. I’d love to use it on my website.

    Do you have any copyright/license restrictions? Are we free to customise, publish and use for non-commercial uses?
    Do you need any attribution on our website?

    • Jan Hartmann,
    • March 24, 2014
    / Reply

    How can i add a navigation bar?
    I already added the buttons but the a href”#page2″ etc. has no effect!
    Thanks for help :)

      • leighmasson,
      • April 2, 2014
      / Reply

      +1 … would love to know how to do this.

        • Marco,
        • June 3, 2014
        / Reply

        You can’t do it in html, you have to attach the .moveTo() event (you can find it in the plugins documentation online) to the “click” trigger of the button. For example:

        $(“#button”).on(‘click’,function(){

        event.preventDefault();

        $(“.main”).moveTo(3);

        });

        This will take you directly to the third page.

    • Jan Hartmann,
    • March 24, 2014
    / Reply

    How can i add a navigation bar? I already added the buttons, but href link won’t work!
    Hope you guys have an adivce for me – thanks :)

    • Alex,
    • April 19, 2014
    / Reply

    Great tutorial! But how can I use a botton to make it scroll one page up or down ?

  3. / Reply

    Hi Pete,

    Brilliant work, thank you very much for this. There’s a slight problem I’m having though – it seems to work fine, but the ease effect doesn’t seem to work. I’ve used the JS code suggested on this post, is there anything I need to add to the pages CSS or HTML wise to make the ease effect work?

    Thanks.

    • Ruslan,
    • July 30, 2014
    / Reply

    It works fine, thanks! However it seems to be that this script interferes with viewport. I can’t enable zoom on ios devices. Has anyone some idea’s how to fix that?

    • Mohammed Gamal,
    • August 4, 2014
    / Reply

    buddy would you please provide some sort of a tutorial in which you explain codes divided in parts to learn how did you make it?

    I’m actually facing lots of conflict with other jquery I add to the site if it has this plugin while my codes work perfectly alone..

    • Vũ Ngọc Tùng,
    • August 21, 2014
    / Reply

    I use this plugin for my page. It’s work well on Chrome, but on Firefox, it has some bug (or something like that). On FF, when scroll, page always scroll to bottom of page (the lastest section), then page always scroll up when mouse scroll. :( Help me!

  4. / Reply

    Hi Peter, a really nice work, im working on this project that used your awesome work, and i have this problem to take the scroll section as a trigger for the animation on the next page, so when i scroll down my mouse, it would turn to the next page, and then the animation would be started on that time… any ideas? i would love to show you the project after it is done..

    • Giovanni Pirone,
    • January 13, 2015
    / Reply

    hello, it’s amazing plug in, but if i have this mark up, how can i add the plug in?

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.