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

Category: Animation , Javascript | August 1, 2018
Author: cubiccreative
Views Total: 3,110
Official Page: Go to website
Last Update: August 1, 2018
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply