Repository files navigation

Dead-simple parallax scrolling.

See a demo.

Follow these steps to get started:

1. Overview
2. Install
3. Call
4. Review Options
5. Review API
6. Handling Page Refresh

Want to create dynamic parallax scrolling effects on your web page, without relying on jQuery?

Rallax.js makes it easy to create a parallax effect on a target HTML element, with great performance and a robust API. Make either a basic scrolling parallax, or change it up with automatic callbacks (when method), start/stop, speed changes, and mobile handling.

Using NPM, install Rallax, and save it to yourpackage.json dependencies.

$ npm install rallax.js --save

Then, import Rallax, naming it according to your preference.

importrallaxfrom'rallax.js'

To generate the desired effect, call Rallax, passing in your element/target-selector and your desired options.

constoptions={speed:0.4}constparallax=rallax('.parallax',options)// or:consttarget=document.querySelector('.parallax')constparallax=rallax(target,{speed:0.4})

Note: Rallax.js does not make any assumptions regarding the styling of the target element.

You are not required to pass any options. All options come with sensible defaults, shown below:

{speed:0.3,mobilePx:false}

Explanation of each option follows:

• speed
• mobilePx

Accepts afloat number.

At a speed of0, the target will scroll like a static element.At a speed of1, the target will appear fixed (will move at the speed of scroll).At even higher speeds, the target will move quicker than the speed of scroll.

Accepts aninteger, as number of pixels.

Pass this option if you want parallax for this target to automatically be disabled at a certain screen width.

Calling Rallax will return an object with a set of methods defined. Those methods are:

• stop
• start
• getSpeed
• changeSpeed
• when

Callingstop() will pause the parallax effect on the target until the next time you callstart().

constparallax=rallax('.parallax')if(condition){parallax.stop()}

Callingstart() will re-enable the parallax effect if you had previously disabled it.Note: callingstart() will not re-enable the effect if you have disabled it with themobilePx option.

constparallax=rallax('.parallax')parallax.stop()// some time laterparallax.start()

Returns the current speed of the target.

Accepts afloat.

CallingchangeSpeed will change the speed of the target parallax effect.

// initialize the target at a speed of 0.6constparallax=rallax('.parallax',{speed:0.6})// change speed to 1, making the target appear fixedparallax.changeSpeed(1)

Accepts a conditionfunction and an actionfunction.

Callingwhen will queue a condition and action onto the target, which will be evaluated before the target is scrolled. Thewhen method is useful for setting up all kinds of special effects.

when methods can be chained together.

constparallax=rallax('.parallax')// after reaching a certain position in the document,// increase the target's speedparallax.when(()=>window.scrollY>400,()=>parallax.changeSpeed(1))// stop the parallax after a certain period of timeconststartTime=newDate().getTime()parallax.when(()=>{constnewTime=newDate().getTime()returnnewTime-startTime>4000},()=>parallax.stop())

Rallax.js will adapt to the refreshing of the page, and place targets where they would be normally if they were to scroll to the point of refresh.

However, if usingchangeSpeed in conjunction withwhen methods/conditionals, it's important to scroll to the top of the page when the user refreshes. Code to handle such a situation:

window.onbeforeunload=()=>{window.scrollTo(0,0)// alternatively, you can put an animation function here// that will bring user to the top of page}

Rallax depends on the following browser APIs:

• requestAnimationFrame

Consequently, it supports the following natively:

• Chrome 24+
• Firefox 23+
• Safari 6.1+
• Opera 15+
• IE 10+
• iOS Safari 7.1+

MIT. © 2018 Christopher Cavalea