MGD 143 Web Motion Graphics Design I

Create a new file and save it as index.html in the root of your parallax-scrolling folder

Copy the following code for your head tag:

<!doctype html>

<html class="no-js" lang="en">

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Parallax Scrolling Tutorial</title>

  <meta name="description" content="How to create a parallax scrolling effect with jQuery, HTML5 and CSS">

  <meta name="author" content="Ryan Boudreaux, TechRepublic Web Developer Blog">

  <link href='http://fonts.googleapis.com/css?family=Lobster+Two:700&v2' rel='stylesheet' type='text/css'>

  <link href='http://fonts.googleapis.com/css?family=Jacques+Francois' rel='stylesheet' type='text/css'>

  <link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>

  <link href='http://fonts.googleapis.com/css?family=Oxygen+Mono' rel='stylesheet' type='text/css'>

  <link rel="stylesheet" href="css/reset.css">

  <link rel="stylesheet" href="css/style.css">

</head>

Notice the Google Web Fonts for “Lobster Two”, “Jacques Francois”, “Orienta”, and “Oxygen+Mono”. There are also two CSS files linked and they are the “style.css” and the “reset.css” which is part of the HTML5 Boilerplate.