Good, now we have the tools that we need to start building our project. The basic idea behind what we're going to create is that if we place elements at a different height and scroll while keeping the vanishing point in the center of the viewable area, then we can obtain a cool parallax scrolling effect.
As usual, we first need an HTML structure, so let's begin with this. Let's create the index.html
file with the following code:
<!doctype html> <html> <head> <meta charset="utf-8"> <link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC' rel='stylesheet' type='text/css' data-noprefix> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css" data-noprefix> <link rel="stylesheet" type="text/css" href="css/application.css"> <script src="js/prefixfree.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min...