ocean-scroll-position-moitor

The command line app for ocean-scroll-position-moitor

Installation

$ npm i ocean-scroll-position-moitor

Features

• element entry animate class added when scroll into viewer
• 当页面元素出现在视口中，给元素添加动画类，从而实现入场动画

Browser Support

Modern browsers and Internet Explorer 10+.

| IE / Edge | Firefox | Chrome | Safari | iOS Safari | Samsung | Opera | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | IE10, IE11, Edge| last 10 versions| last 10 versions| last 10 versions| last 5 versions| last 10 versions| last 10 versions

Notice

You can change activeClass config, but you shouldn't set this config to empty forever. Although I handle this empty situation.

Usage

$ ocean-scroll-position-moitor

  ## when you need to add uniform className for element
  Usage:
  new ScrollAnimate({
      activeClass: "animated",
      domSelector: ".j-zero-item"
  });
  
  ## when some element need to add special active className, you can add data-active-class attribute on the special domElement
  
  ## such as this, the attribute rules is same as class rules
  <div class="test-1 j-zero-item" data-active-class="bounceInLeft zero">
  new ScrollAnimate({
    activeClass: "animated",
    domSelector: ".j-zero-item"
  });
  
  ## so when this element scroll into viewer, this element will add bounceInLeft,zero,animated className to element
  ## like this
  <div class="test-1 j-zero-item animated bounceInLeft zero" data-active-class="bounceInLeft zero">
  
  !!!you should not set activeClass to empty!!!
  like this
  new ScrollAnimate({
    activeClass: "",
    domSelector: ".j-zero-item"
  })