HOME > >

ScrollReveal

表示エリアに要素が入ってきた時にアニメーションしつつ表示させるライブラリ。
jQueryなどのライブラリに依存しないスタンドアロン型。
ファイル1つ読み込めばOk

HTML

  1. <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

サンプル

ScrollReveal().reveal(target);

targetがビュー内に要素が入ってきた時に表示する。

  1. ScrollReveal().reveal('.block');
  2. var node = document.querySelector('#cake');
  3. var nodeList = document.querySelectorAll('.cookies');
  4. var nodeArray = [
  5.     document.querySelector('#pie'),
  6.     document.querySelector('#spoon'),
  7.     document.querySelector('#ice-cream')
  8. ];
  9.  
  10. ScrollReveal().reveal(node);
  11. ScrollReveal().reveal(nodeList);
  12. ScrollReveal().reveal(nodeArray);

target

targetはCSSセレクタ、DOM node、nodeList、DOM nodeの配列で指定できる。

  1. var node = document.querySelector('#cake');
  2. var nodeList = document.querySelectorAll('.cookies');
  3. var nodeArray = [
  4.     document.querySelector('#pie'),
  5.     document.querySelector('#spoon'),
  6.     document.querySelector('#ice-cream')
  7. ];
  8.  
  9. ScrollReveal().reveal(node);
  10. ScrollReveal().reveal(nodeList);
  11. ScrollReveal().reveal(nodeArray);

ScrollReveal({reset: true})

ビュー内に要素が入ってきた時に表示する。
{ reset: true }を指定するとビューの外に出た要素が再度ビュー内に入ってきたときアニメーション付きで表示される。

  1. ScrollReveal({reset: true}).reveal('.block');

移動しつつ表示する

ビュー内に要素が入ってきた時に下、または上に移動させつつ表示するにはdistanceオプションを設定する。 以下は下から上に100px移動させる指定。マイナスの場合上から下に移動しつつ表示する。

  1. ScrollReveal({ reset: true })
  2.         .reveal('.block', {
  3.             distance: '100px'
  4.         });

縮小しつつ表示する

ビュー内に要素が入ってきた時に縮小しつつ表示するにはscaleオプションを設定する。 以下は下から上に1.8倍の大きさから元の大きさに変化させつつ表示。

  1.     ScrollReveal({ reset: true })
  2.         .reveal('.block', {
  3.             distance: '-100px',
  4.             scale: 1.8
  5.         });

回転しつつ表示する

ビュー内に要素が入ってきた時に回転しつつ表示するにはrotateオプションを設定する。

  1.     ScrollReveal({ reset: true })
  2.         .reveal('.block', {
  3.             distance: '-100px',
  4.             scale: 1.8,
  5.             rotate: {
  6.                 x: 80,
  7.                 y: 180,
  8.                 z: 45
  9.             }
  10.         });

参照サイト