Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
1st April 2013

Controlled scrolling content for interface designers

Discover how to add sideways scrolling content that interacts with vertical scrolling

Controlled scrolling content for interface designers

Ala is an illustration and design studio located in Zurich, Switzerland. For a company that specialises in design and illustration, you would expect something special for the website – and it doesn’t disappoint.

Sections of content are separated by a thick white serrated edge and each section has a custom scrolling effect. Mostly this involves content scrolling horizontally while the page is scrolled down, but there are also some nice techniques such as parallax and also changing image content based on the position of the scroll.

INSPIRATION: ala.ch
DOWNLOAD CODE

TECHNIQUE

Side scrolling content

Style the content

To style our content, we are going to use the skrollr library, so download it from github.com/Prinzhorn/skrollr and then put the minified version of the library in the same folder as your html document. Create a new html page and add the following CSS to the head section of the document. The head style just assigns 200 pixels to this section to push our scrolling content further down the page.

001 < style type=”text/css”>
002 #head {
003 height: 200px;
004 }
005 #wrapper {
006 width: 100%;
007 overflow: hidden;
008 }

Finish the style

We have a wrapper section which takes the full width of the page, then inside the wrapper we add the block content shown below. This adds a wide image to the page, which will be scrolled across the page as the page is scrolled down. Make sure you make this image wide or a tile.

001 #block {
002 position: absolute;
003 left: 0px;
004 width: 100%;
005 height: 400px;
006 background-image: url(mount.jpg);
007 background-position: 0px 0px;
008 }
009 

Page content

In the Ala site the header takes up a little space so we’re just adding an empty space at the top of the page to represent that space, Add the div tag with the id ‘head’ into the body section of the site. Obviously you would want to place your real header content into this part of the site.

001 < div id=”head”>< /div>


Set up the scroll section

For the next step, we add a wrapper around the block section which will be our scrolling section. Make sure you notice the HTML5 data attribute as it’s pretty important. This sets the scroll position at 0 pixels and it will stop scrolling when the page is scrolled to 500 pixels. In this example we will scroll the background position of the image to -300 pixels off the left hand edge of the page.

001 < div id=”wrapper”>
002 < div id=”block” data-0=”background-
position:0px 0px;” data-500=”background-position: -300px 0px;”>< /div>
003 < /div>

Add the JavaScript

For the final step in this section we will add the JavaScript library. We simply add this after the div tags in the body section. The first line links to the library and inside the next script section the skrollr library is initialized so that it works within this page. When you’re done, save the page and then test it out in the browser to see your content scroll horizontally as you scroll down the page.

001 < script type=”text/javascript” 
src=”skrollr.min.js”>< /script>
002 < script type=”text/javascript”>
003 var s = skrollr.init();
004 < /script>

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://pinterest.com/babyvictoriaa/louis-vuitton-handbags/ cheap louis vuitton bags online free shipping

      I saw the bag today and it’s better than I thought. It’s not released but the store has a sample.

    • Yashesh Vaghela

      a really great tutorial..

      this is what i made using skrollr and svg only.

      http://milanart.in/philosophy/

      keep skrolling :)