jQuery

【jQuery】スクロールしてコンテンツを表示するためのプラグインEasy Reveal

December 26, 2017
Easy Reveal

Easy Revealはスクロールしてコンテンツを表示するためのjQueryプラグイン

How to use

bodyの最後にjQueryとEasy Revealスクリプトを含める必要があります。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="js/jquery.easy-reveal.js"></script>

Easy Revealスタイルシートへのリンクをheadに追加する必要があります。

  <link rel="stylesheet" href="css/easy-reveal.css">

必要なアニメーションの値を使用して、アニメーション化したい要素にデータ属性easy-revealを追加します。

  <h1 data-easy-reveal="fade-in-up">Yeah! i'm Animated on scroll</h1>

Animations

  1. fade-in-up
  2. fade-in-down
  3. fade-in-left
  4. fade-in-right
  5. fade-in-rotate-x
  6. fade-in-rotate-y

Customisation

アニメーションを開始するページのオフセットを変更

/* PARAMETERS */
  var offset   = 50; //int in %