Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Dropping in the parallax game


Our next step is to jump right into the action and dump your parallax game file into the SPA framework. Since we have a pretty good systematic way to load scripts into the DOM, it should be pretty easy to shim it in and make it work.

We will further be moving the functions around to make them reusable patterns.

  1. Create a new directory in your project named level1. This is where we will place the work from the parallax project.

  2. Copy the index.html file into the level1 directory and then rename it to match the style of the routing registry, level.html.

  3. Then, create the additional new files level1.js, home-level1.html, and level1.json.

Let's add some CSS files to the directory so we can break it into small pieces. It's not required, but it may help keep things tidy. We will be adding CSS for each partial template. In the css/ directory, add the CSS files levels.css and level-1.css.

Since we were last in the css/ directory, let's work on that. Cut the CSS out of the...