simpleParallax JS Library Tutorial

Introduction

simpleParallax.js is a javascript library that is used to apply basic parallax animations to image tags as a user scrolls through a webpage. It requires a single line of code to install, and a minimum of three more to implement its effect. For this reason, it is useful when the user needs to apply a simple parallax animation quickly and easily, provided that the web developer is not trying to make anything fancy (other parallax libraries can achieve more complex scrolling animations in fewer lines of code). The library's simplicity, also makes more accessible to web developers of varying skill, as well as people who are not web developers. Furthermore, the lightweight nature of simpleParallax.js means it is better suited for websites requiring fewer and less complex animation, as it will result in less of a performance hit than more complex parallax and scrolling javascript libraries. This library was made by Geoffrey Signorato.

Pros and Cons

This parallax library can be used to on image tags themselves, instead of having to set the desired images as background images. As such, it is intuitive and easy to use. It provides a smooth parallax effect while being very lightweight. A con of this library is the library's scrolling event can sometimes affect overall performance of the website. For this reason, the library's creator recommends using the requestAnimationFrame function of the Window interface. There are also a few quirks to take note of when using this library. Sometimes, for seemingly the parallax effect will not work. Changing the zoom level of the browser window will unfreeze the images, but it remains an unresolved issue web developers should know about. In addition, if there happens to be a syntax error in at least one of the javascript statements, all parallax effects on that page will cease to work. While this is not a problem for the end-user web developers should keep this in mind when writing or debugging their code.

Getting Started

Here is some sample code that contains the bare minimum of what is needed to start using this parallax library. It installs the simpleParallax.js library, specifies and selects an image, and applies the default parallax effect to it.

HTML (sample.html)

Javascript (sample.js)

Output

Settings

Orientation

To change the direction of the parallax effect, set its orientation to at least one of four directions (up, down, right, left). Combinations of vertical and horizontal orientations can be used to create horizontal parallax effects.

Scale

Increasing parallax effects scale will increase how much the image will move as the user is scrolling. However, this will also reduce the quality of the image. To prevent this, choose an image with a width (in pixels) that is equal to the current image width multiplied by the scale value. If the parallax effect is horizontal, replace width with length.

Overflow

By setting overflow to true, the selected image is able to continue beyond the length or width of an image, causing the image travel across the page. Be careful with this setting, as it result in the image overlapping with other areas of the webpage

Delay

The delay setting allows the parallax effect to continue for a time after the user has stopped scrolling. The delay time is measured in seconds.

Additional Settings

Transition

The transition setting is used to add any kind of CSS transition to the delay setting. This includes ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier. It accepts a string (i.e. linear), and is meant to be used together with the delay setting

Custom Container

The parallax effect is usually determined by the percentage that a user has scrolled in reference to the body. However, if an image is inside a container that the user can also scroll through, the customContainer setting can be used. customContainer can accept either a string or a node specifying the container that the scroll percentage should be calculated in reference to.

Max Transition

The maxTransition setting can be used to stop the parallax effect after reaching a particular scroll percentage ranging from 0% to 100%. As such, maxTransition accepts numbers (the % sign is not needed).

Methods

Destroy simpleParallax instance

This straight forward method can be used to remove the parallax effect on an image for whatever reason.