Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * Linear Interpolation is a method to add some natural behaviors to your animations. The more natural
 * your animations look like, the better will be the look-and-feel. But what's Linear Interpolation ?
 *
 * Linear Interpolation, also called `lerp`, is a way of easing your animation. Imagine you want to
 * move a box from a position A to a position B. Without the Linear Interpolation, you box will 

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * In episode #11 of "Gist for Javascript Beginners" I explained what was a Linear Interpolation. 
 * In this episode I'll show you another case it's really usefull.
 *
 * It's a trend since a few months to add smooth scroll to websites because the look-and-feel is
 * better than the basic scroll of the browser. But how do you do this kind of effect ? Thanks

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 *
 * Another trendy effect you will find on many websites is Parallax. A parallax is created when to elements
 * move at the same time but with different values. This is often used to create depth effects when the 
 * furthest element move more than the nearest element.
 *
 * Example:

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <[email protected]>
 * @site: https://www.twitter.com/JsGists
 * @codepen: http://codepen.io/JsGists/full/GrKbjx/
 *
 * Binding events in Javascript on an element will propagate these events to every child nodes.
 * This is a Javascript behavior that will sometimes bother you but Javascript has its own method called
 * `stopPropagation` that allow us to avoid the propagation of an event.
 *

Anthodpnt

const events = ['touchstart', 'touchmove'];
const lock   = (e) => e.returnValue = false;

// Lock
for (let e of events) {
  document.addEventListener(e, lock); 
}

// Unlock
for (let e of events) {