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


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.

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.