Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Web Design Blueprints
  • Table Of Contents Toc
  • Feedback & Rating feedback
Web Design Blueprints

Web Design Blueprints

By : LaGrone
5 (1)
Buy this Book
close
close
Web Design Blueprints

Web Design Blueprints

5 (1)
By: LaGrone
Buy this Book

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 (7 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Responsive Web Design
Icon
1. Responsive Web Design
Icon
Introduction to responsive web design
Icon
Getting familiar with the basics
Icon
Using media queries for responsive design
Icon
Working with responsive media
Icon
Building responsive layouts
Icon
Summary
2
2. Flat UI
Icon
2. Flat UI
Icon
A brief history of flat design
Icon
Flat UI color
Icon
Creating a flat UI layout
Icon
Summary
3
3. Parallax Scrolling
chevron up
Icon
3. Parallax Scrolling
Icon
Starting off
Icon
Color classes
Icon
Using SVG font icons
Icon
Getting the fonts
Icon
That's no moon!
Icon
OMG, it's full of stars!
Icon
Clouds, birds, and airplanes
Icon
The rocket
Icon
Terra firma
Icon
Next up, the CSS
Icon
Styling the objects with CSS
Icon
Styling the ground objects
Icon
Writing the JavaScript effects
Icon
Setting the row height
Icon
Spreading the objects
Icon
Spreading the clouds
Icon
Loading the page functions
Icon
Smoothening the scroll
Icon
Updating elements on the scroller
Icon
Collecting the moving elements
Icon
Creating functions for the element types
Icon
Setting the left positions
Icon
Creating the rocket's movement function
Icon
Finally, moving the earth
Icon
Summary
4
4. Single Page Applications
Icon
4. Single Page Applications
Icon
What is an SPA?
Icon
Getting to work
Icon
Getting the old files
Icon
Object and function conventions
Icon
Creating utility functions
Icon
Working with the home structure
Icon
Setting up other sections
Icon
Performing housekeeping
Icon
Creating a callBack function for the API
Icon
Summary
5
5. The Death Star Chapter
Icon
5. The Death Star Chapter
Icon
Where to begin?
Icon
Dropping in the parallax game
Icon
Loading elements from JSON
Icon
What can be done in the shared levels service
Icon
Editing the home JavaScript
Icon
Creating the other pages – credits and leaderboard
Icon
Creating the second level
Icon
Summary
6
Index
Icon
Index

Updating elements on the scroller

To fix the error, start by creating a new function called updateElement. You may recall that we added this to the body's onscroll method. Now that we have distributed our objects in a random fashion on the screen and created a smooth scroll effect, we need to work on making things change at different rates as we scroll through the rows. This is the meat and potatoes of the parallax effect. In the end, when you scroll through the page, the objects can be programmed to move at different velocities.

This part will involve some fancy footwork and will be explained in a few steps, but it will be lightweight and easy to extend later as you please. The following code contains a function that will be run on every scroll, so we want to keep it as light as possible.

Inside the new updateElement function, in the first line, we will create a call to another function, sending an anonymous callback function. This function will get the elements we need to move and send the...

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Web Design Blueprints
End of Section 3
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon