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

Smoothening the scroll


Let's work on the smoothScrollTo function. This is the function that detects the scrolling motion to make sure it is smooth. The smoothScrollTo function is used to move the scroll to the bottom of the page when the page loads. You could use this function in other scenarios to click a button where its click event uses the function to go to a specific section. In our case, we only want to go straight to the bottom. Let's take a look at the function.

Inside its braces, create a callback function. The first line should list the variables time, start, and factor, left undefined. Next, create a return function, injecting the variables target and duration. Let's take a quick look at what we have so far:

        window.smoothScrollTo = (function () {
            var timer, start, factor;
            return function (target, duration) {
            };
        }());

Inside the return function, create new variables: offset for the window 's pageYOffset property and delta for the...