Easy Scroll Effect Getting Started and Demos

EasyScrollEffect - is easy and simple library for scrolling effect.
It dosn't depend on a specific library.
This library only add class for effect.
You have to define style for each effect.

Demos

Fade In

Sample image
HTML
CSS

Rotate In

Sample image
HTML
CSS

Sample
Sample image
Sample (Delayed)
Sample image

Set attribute data-start-pos="300".

Getting statrted

1. Download and install

First of all we need to download required files.

  • We can download them from GitHub repository
  • Or we can install them via npm in terminal.
$ npm install easy-scroll-effect

And use files in the dist/ folder.

2. Include Files To Website

After that we need to include JS files to our website. In your html file.
Bundled css is just sample. You need to define css by yourself.

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" href="path/to/yourStyle.css">
</head>
<body>
  ...
  <script src="path/to/EasyScrollEffect.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      EasyScrollEffect.init()
    })
  </script>
</body>
</html>

3. Define Styles for your effect

This library has no css.
You need to define css by yourself.
Minimum css is below.

Smple CSS

4. Add class to target elements

Reffer to below documents

Document

HTML

Target

  • Set class js-scroll-effect to target element.
  • class fade-in is added to target element at shown in window after scroll.
  • You have to define styles for them.
Options
Parameter Example Default Description
start-pos data-start-pos="200" 0

If set this, timing to add class fade-in is delayed until scroll more this height.