Scrolling Website

We launched our website true6d.com a few weeks ago. Our core line of business is interactive architectural rendering and with the start of a small marketing campaign we expected to receive a few project enquiries, which we did.

Very surprisingly we also received three emails asking about our front page, how it was designed and how we implemented parallax scrolling.

Being a technology startup, we are immersed in technology day and night. Although not directly linked to our prime business, I thought it worthwhile to start writing tutorials about any technology we research or use.

In this post I will explain how to create a parallax website. The intent is to get you started and then point you to other sites if you want to dive deeper.

Before jumping in, lets go over the different options we researched.

  1. Skrollr– Stand-alone parallax scrolling library. Requires no jQuery, just plain JavaScript. Works mostly on desktop, from our experience mobile support is glitch.
  2. Parralax.js – A simple parallax scrolling effect inspired by Spotify and implemented as a jQuery plugin.

Although both options allow creating simple parallax scrolling animations, we found that Skrollr offered a much richer mix of CSS transitions giving the freedom to animate any numeric property that CSS supports.

So what do you need to setup a simple scrolling animation?

To begin with you need a html5 page, which imports the javascript and CSS necessary to create your animation.

Creating a html5 template is easy to start with, but once you begin to include all best practices the complexity can grow very quickly. Learning html5 is one thing, but doing it right with professional quality is completely another thing. There are countless sites teaching the basics of HTML and many frameworks that enforce best practices.

Explaining the entire setup of an html5 template is a topic for another post. For the purpose of parallax scrolling you can begin with copying the following code and creating a file called index.html

 

 

This snippet for index.html may seam very lengthy , trust me, it is the Holy Grail of html5 templates. Just by copying this snippet you can save hours of work and without learning the gory details you can begin with a professional grade template page.

To enable this page to work you will need to setup the correct directory structure. So please go ahead and create the following structure

 

YOURPROJECT

index.html

CSS

main.css (source given below)

normalize.css (download from here )

JS

VENDOR

skrollr.min.js  (download from here )

modernizr-2.8.3.min.js (download from here)

 

Great! you are almost there.

Now create your main CSS file in the folder structure you just created.

The CSS given is minimal. The only thing it is doing so far is to hide the div with id position , this div is hidden is serves the purpose of keeping track of the maximum position a person has scrolled to.

Your basic setup of skrollr is now complete, but how does the site scroll?

Now we will add some basic “Hello World” code to get you up and running. Find the following on the html template

Just below it add the following snippet of code : –

Voila! You have your first scrolling webpage up and running.

To learn more about skrollr , visit the Skrollr Site. There are detailed tutorials there along with other good example.

Happy scrolling.

Author: Pankaj Upreti

CTO and co-founder at True6D Talented software developer and business professional. As a senior solutions architect he specializes in delivery of mission critical enterprise applications. As a project manager he specializes in leading large global distributed teams. His portfolio boasts several high profile clients such as John Hancock, RBC Insurance IBM, Transamerica Insurance and Government of Ontario, CIBC, CISCO, just to name a few

Leave a Reply

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