3. Parallax Scrolling | Web Design Blueprints

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Web Design Blueprints

By : LaGrone

5 (1)

Web Design Blueprints

5 (1)

By: LaGrone

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Responsive Web Design

1. 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

2. Flat UI

A brief history of flat design

Flat UI color

Creating a flat UI layout

Summary

3. Parallax Scrolling

3. 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

4. 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

5. 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

Customer Reviews

5 (1)

5 star

100%

4 star

0%

3 star

0%

2 star

0%

1 star

0%

Terra firma

Finally, we will be adding elements to the ground. These will mostly be buildings and trees, and they will be easy to add because they are also Font Awesome SVGs.

In the terra SECTION element, inside the ground DIV element, there are two DIV elements: give the first class left and green, and then give the second DIV element the right class. Then, in the left green DIV element, add a handful of trees from Font Awesome, and in the right DIV element, add a truck and some buildings from Font Awesome. Give the buildings the additional classes small and large. The terra SECTION element code looks like this now:

    <section id="terra">
        <div id="ground">
            <div class="left green">
                <i class="fa fa-tree"></i>
                <i class="fa fa-tree"></i>
                <i class="fa fa-tree"></i>
                <i class="fa fa-tree"></i>
                <i class="fa fa-tree"></i&gt...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Web Design Blueprints

Search

Your notes and bookmarks