inviewClass

inviewClass is jQuery plugin that helps adding class on scroll.
要素が画面内に入ったらクラスを付与する jQuery プラグインです。1つの要素に2つのクラスを時間差で付与しCSS処理の幅を拡げます。

Overview

• add class when elements enter.
• add second class on specified interval for reseting css will-change property.
• 要素が画面に入ったらクラスを付与します。
• クラスを付与した後指定した時間の経過後に2つ目のクラスを付与します。

Demo

https://smitsunori.github.io/inviewClass/

デモでは青のボックスが画面内に200px以上入ると1つ目のクラス「is-inview」が付与され赤に変わり、1000ms経過後に2つ目のクラス「is-inview-done」が付与されグレーに変わります。

Usage

Select elements to add class.
クラスを付与したい要素を指定します。

$('.your-item').inviewClass();

options

settings below are defualt parameters.

初期設定では画面内に200px以上入ったら最初のクラス「is-inview」が付与され、それから1000ms経過すると次のクラス「is-inview-done」が追加されます。クラス名や数値はオプション設定で変更可能です。オプションの各パラメータ名は以下になります。

$('.your-item').inviewClass({
  className: 'is-inview',
  secondClassName: 'is-inview-done',
  visibleOffset: 200,
  secondClassInterval: 1000
});

• className: 画面内に要素が入った時に付与されるクラス名を指定します。
• secondClassName: 指定時間経過後に付与される2つ目のクラス名を指定します。空文字列を指定するとクラスを追加しません。
• visibleOffset: 画面内に要素が入ってからクラスが付与されるまでの距離をpxで指定します。
• seconClassInterval: 2つ目のクラスが付与されるまでの時間をmsで指定します。

Example

• remove css will-change property.
• add another css animation.
• or...

Dependencies

jQuery 1.7+

Licence

MIT License