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.

Related Content you might be interested in

Current Title:

Small book image
Web Design Blueprints
Apr, 2016 | 290 pages
No titles found
Table of Contents (12 chapters)
Web Design Blueprints
Web Design Blueprints
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Responsive Web Design
Responsive Web Design
Introduction to responsive web design
Getting familiar with the basics
Using media queries for responsive design
Working with responsive media
Building responsive layouts
Summary
2
Flat UI
Flat UI
A brief history of flat design
Flat UI color
Creating a flat UI layout
Summary
3
Parallax Scrolling
Parallax Scrolling
Starting off
Color classes
Using SVG font icons
Getting the fonts
That's no moon!
OMG, it's full of stars!
Clouds, birds, and airplanes
The rocket
Terra firma
Next up, the CSS
Styling the objects with CSS
Styling the ground objects
Writing the JavaScript effects
Setting the row height
Spreading the objects
Spreading the clouds
Loading the page functions
Smoothening the scroll
Updating elements on the scroller
Collecting the moving elements
Creating functions for the element types
Setting the left positions
Creating the rocket's movement function
Finally, moving the earth
Summary
4
Single Page Applications
Single Page Applications
What is an SPA?
Getting to work
Getting the old files
Object and function conventions
Creating utility functions
Working with the home structure
Setting up other sections
Performing housekeeping
Creating a callBack function for the API
Summary
5
The Death Star Chapter
The Death Star Chapter
Where to begin?
Dropping in the parallax game
Loading elements from JSON
What can be done in the shared levels service
Editing the home JavaScript
Creating the other pages – credits and leaderboard
Creating the second level
Summary
Index
Index

What can be done in the shared levels service

Next, I want to move some more functions from level1.js to the general pattern file levels.js. We will cut out the moveRocket and moveEarth functions and paste them into levels.js. And of course, rename them to levels.moveRocket and levels.moveEarth. And be sure to rename the function calls as well. Next, move the setElementLeftPostion function to levels.js. Rename it levels.setElementLeftPosition and the function calls also. This function is called a number of times, so you may want to use a find and replace pattern, or at least find to identify them all. Next, move the window.smoothScrollTo function into the levels.js file and leave it as is.

Updating elements on the scroll

Let's look at the updateElement function. Most of the code in this needs to stay here; however, I want to add some more functionality that would occur universally on the scroll. So, add a function call to a function that does not yet exist, which we will fix shortly, called...

Previous Section
End of Section 5
Next Section