Smooth Scroll Vanilla Js

Options

Js Scroll To Top
Js Scroll Page
Smooth Scroll Html

Yes, and the main historical reasons people used jQuery was for smoothing over browser discrepancies and using CSS selectors in JS, but with IE9 we have `querySelectorAll` which made what was jQuery's biggest selling point for many, standard to vanilla JS. Scrolling animation helps better control the user flow and make sure important content is appropriately shown to a given user. The idea is that, as a user scrolls through the site, different animations get triggered. So here are 10 Best Javascript Scrolling Animation Plugins to handle all kinds of animations.

Getting Started!SpeedCenteringZ-IndexHorizontal ScrollingCustom WrapperTarget Node

Methods

RefreshDestroy

Getting Started!

or if you're old school like us, download and insert rellax.min.js file in your project folder.

JavaScript (`accepts any class name`)

Basic Markup (Default Speed: -2)

Optional Speed (-10 to +10)

 <div class='rellax' data-rellax-speed='-3'>
 I’m slow and smooth
 </div> 
 <div class='rellax' data-rellax-speed='7'>
 I’m super fast!!
 </div> 
 <div class='rellax' data-rellax-speed='-5'>
 I’m extra slow and smooth
 </div>

Speed

Use the data-rellax-speed attribute to set the speed of a .rellax element to something other than the default value (which is -2). A negative value will make it move slower than regular scrolling, and a positive value will make it move faster. We recommend keeping the speed between -10 and +10.

Responsive Speed

Use responsive speed attributes for breakpoint levels that require a different speed. Defaults to the data-rellax-speed setting in unspecified breakpoints.

 <div 
class='rellax' 
data-rellax-speed='7' 
data-rellax-xs-speed='-5' 
data-rellax-mobile-speed='3' 
data-rellax-tablet-speed='-8' 
data-rellax-desktop-speed='1'>
 I parallax at all different speeds depending on your screen width.
 </div>

Pass an array of breakpoints. Each breakpoint value represents the resolution for mobile, tablet, desktop respectively. Checkout the responsiveness of the demo.

 <script> 
//default JS Setting
var rellax = newRellax('.rellax',  {
breakpoints:[576, 768, 1201] 
 }); 
 </script>

Centering

After some fantastic work from @p-realinho, we just released the ability to center parallax elements in your viewport! We'll be building a nice demo website, but for now check out the tests folder for several examples of how it works via our tests folder on GitHub.

There's two ways to implement centering, either on specific elements or as a global option.

 <div class='rellax' data-rellax-percentage='0.5'>
 I’m that default chill speed of '-2' and 'centered'
 </div> 
 <div class='rellax' data-rellax-speed='7' 
data-rellax-percentage='0.5'>
 I’m super fast!! And super centered!!
 </div> 
 <div class='rellax' data-rellax-speed='-4' 
data-rellax-percentage='0.5'>
 I’m extra slow and smooth, and hella centered.
 </div>

 <script> 
//default JS Setting
var rellax = newRellax('.rellax',  {
center:true
 }); 
 </script>

Z-Index

If you want to sort your elements properly in the Z space, you can use the
data-rellax-zindex property.

 <div class='rellax'>
 I’m that default chill speed of '-2' and default z-index of 0
 </div> 
 <div class='rellax' data-rellax-speed='7' 
data-rellax-zindex='5'>
 I’m super fast!! And on top of the previous element, I'm z-index 5!!
 </div>

Horizontal Parallax

Horizontal parallax is disabled by default. You can enable it by passing
horizontal: true in the settings block. This feature is intended for panoramic style websites, where users scroll horizontally instead of vertically. Note that this can work together at the same time with the default vertical parallax. If you do not want this, pass vertical: false.

 <script> 
//Enable Horizontal Parallax Scrolling
var rellax = newRellax('.rellax',  {
horizontal:true
//Disable vertical Parallax Scrollingvertical:false
 }); 
 </script>

Custom Wrapper

By default, the position of parallax elements is determined via the scroll position of the body. Passing in the wrapper property in the settings block will tell Rellax to watch that element instead.

 <script> 
//Set wrapper to .custom-element instead of the body
var rellax = newRellax('.rellax',  {
wrapper:'.custom-element'
 }); 
 </script>

Target Node

Instead of using a className you can use a node, handy when using React and you want to use refs instead of className

 <div ref = {ref =>{ this.rellaxRef  = ref}}>
 I’m that default chill speed of '-2'
 </div>

 <script> 
var rellax = newRellax(this.rellaxRef); 
 </script>

Refresh

 <script> 
// Start Rellax
var rellax = newRellax('.rellax'); 
// Destroy and create again parallax with previous settings
 rellax.refresh();
 </script>

Destroy

 <script> 
// Start Rellax
var rellax = newRellax('.rellax'); 
// End Rellax and reset parallax elements to their original positions
 rellax.destroy();
 </script>

SERIOUSLY, WHY?!

Js Scroll To Top

Come on, how boring is the internet without gratuitous javascript? We made this library since too many github repos are abandoned (RIP skrollr) or feature creepy. You got some beef or caught us slippin on unit tests, send rants and 10mb gifs to moe@dixonandmoe.com

BUT ACTUALLY

We've benefitted so much from open source projects and developers that we're actively trying to give back and we're starting by releasing our own quirky js code.

Simple smooth-scroll animation in pure/vanilla javascript

Js Scroll Page

smooth-scroll.js

/**

* Smooth scroll animation

* @param {int} endX: destination x coordinate

* @param {int) endY: destination y coordinate

* @param {int} duration: animation duration in ms

window.smoothScrollTo=function(endX,endY,duration){

varstartX=window.scrollX||window.pageXOffset,

startY=window.scrollY||window.pageYOffset,

distanceX=endX-startX,

distanceY=endY-startY,

startTime=newDate().getTime();

duration=typeofduration ! 'undefined' ? duration : 400;

// Easing function

vareaseInOutQuart=function(time,from,distance,duration){

if((time /= duration / 2)<1)returndistance / 2 * time * time * time * time+from;

return-distance / 2 * ((time-=2) * time * time * time-2)+from;

};

vartimer=window.setInterval(function(){

vartime=newDate().getTime()-startTime,

newX=easeInOutQuart(time,startX,distanceX,duration),

newY=easeInOutQuart(time,startY,distanceY,duration);

if(time >= duration){

window.clearInterval(timer);

}

window.scrollTo(newX,newY);

},1000 / 60);// 60 fps

};

Foxeye689