Smooth On-scroll Animation with JavaScript and CSS – Rock’n’Roll

Preview:

Description:

A pure JavaScript & CSS implementation of smooth scrolling effects for background images. Licensed as Apache License 2.0 by Cubic Creative Company Limited.

Scrolling effects included:

• Parallax
• Zoom
• Blur
• Fade

How to use it:

Download the Rock’n’Roll, unzip it, and then include the cb-rnr-min.css and cb-rnr-min.js in your html file.

<link href="minified/cb-rnr-min.css" rel="stylesheet">
<script src="minified/cb-rnr-min.js"></script>

The markup. Add a background image to a container you want to animate on scroll and wrap the container into a DIV element with the CSS class ‘rnr’. The ‘rnr-page’ class is used to expand the height to viewport size.

<div class="rnr rnr-page">
  <div class="rnr-bg" style="background-image: url(demo.jpg);"></div>
</div>

The CSS modifiers to pecify the scrolling effect.

• rnr-para: Parallax
• rnr-zoom: Zoom
• rnr-blur: Blur
• rnr-fade: Fade

<div class="rnr rnr-page">
  <div class="rnr-bg rnr-para" style="background-image: url(demo.jpg);"></div>
</div>

Change the scroll ratio:

<div class="rnr rnr-page">
  <div class="rnr-bg rnr-scroll rnr-para" rnr-scroll-ratio="0.5" style="background-image: url(demo.jpg);"></div>
</div>

Change the offset that triggers the scrolling effect.

<div class="rnr rnr-page">
  <div class="rnr-bg rnr-scroll rnr-para" rnr-scroll-offset="1" style="background-image: url(demo.jpg);"></div>
</div>

Changelog:

08/01/2018

• v0.9.2