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) {

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <antho.dpnt@gmail.com>
 * @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

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <antho.dpnt@gmail.com>
 * @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 <antho.dpnt@gmail.com>
 * @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 <antho.dpnt@gmail.com>
 * @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 <antho.dpnt@gmail.com>
 * @site: https://www.twitter.com/JsGists
 *
 * It's very common in Javascript to normalize numbers. Normalization means that you are taking a number from a range
 * and return a value from 0 to 1 corresponding to the position of this number within this range.
 *
 * If the number is equal to the minimum value of the range, the normal value is 0.
 * If the number is equal to the maximum value of the range, the normal value is 1.

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <antho.dpnt@gmail.com>
 * @site: https://www.twitter.com/JsGists
 *
 * You can do really cool effects with Canvas and I am going to show you how to use a video to mask 
 * and image with it. To be honest I am not really sure this gist is really for beginners but I really 
 * wanted to do it. So if you are not comfortable with the code below, take a minute, breathe and maybe
 * start by reading the basics of Canvas. You will quickly start to notice this gist is not so difficult
 * to understand.

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <antho.dpnt@gmail.com>
 * @site: https://www.twitter.com/JsGists
 *
 * A trendy effect to add to your websites is to mix some text to create a sort of glitch.
 * They are many styles and ways to mix text and create this kind of effect but let me show
 * you an easy solution to manipulate a string and mix it.
 *
 * Example:

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <antho.dpnt@gmail.com>
 * @site: https://www.twitter.com/JsGists
 *
 * You sometimes need to run some code multiples times, on window scroll, on window resize
 * or simply every n milliseconds. But what if you want you code to run 60 times per seconds ?
 * You could defenitely use a `setTimeout` and even if it's not the best solution
 * it would work but! there is a much easier solution, `requestAnimationFrame` (rAF).
 *

Anthodpnt

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <antho.dpnt@gmail.com>
 * @site: https://www.twitter.com/JsGists
 *
 * We you build your project you sometimes need to load (you should load) your assets. 
 * One of the main type of asset you're using is `images` and if you don't load them
 * it could easily destroy your user experience. 
 * I will not show you how to create a complete loader, I'll only show you how to code
 * a simple loader to load your images.