この機能は管理画面からPC、モバイルテーマ別で有効・無効を指定できますが、このスクロールフェードインアニメーション機能が有効である場合は、ユーザーが個別に作成した テキストウィジェット や 記事内の任意のHTMLコンテンツもスクロールフェードインして表示させることができます。
ここではその方法とサンプルを解説します。
※スクロールフェードイン効果は、オープンソースのJavascriptモジュールを利用して実現しています。
対象テーマ
Attractive, Mature, ESCENA, el plano 以外のテーマ。
スクロールフェードインアニメーション化
任意のHTMLオブジェクトを個別にスクロールフェードイン要素として反映し、アニメーションを定義する方法を説明します。
スクロールフェードインアニメーション要素の宣言
対象のHTMLタグの class の値に wow を含めることで、該当要素がスクロールフェードインの対象とすることができます。
続けて、用意されているアニメーション用CSSセレクタの中から目的のセレクタを指定することで指定したモーションでスクロールフェードインさせることができます。
指定例
左からフェードインして表示します
右からフェードインして表示します
この指定例のコード
<h2 class="wow fadeInLeft">左からフェードインして表示します</h2> <p class="wow fadeInRight">右からフェードインして表示します</p> <div class="wow fadeInDown">上から下にフェードインして表示します</div> <img src="https://digipress.info/_wp/wp-content/uploads/2015/12/plum-cake.jpg" class="wow fadeInUp" alt="下から上にスクロールフェードインする画像" />
アニメーションの種類
wowセレクタの後に定義する、スクロールフェードインのアニメーションとして指定可能なCSSセレクタとその動作については以下を参考にしてください。
- fadeIn
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow fadeIn">スクロールフェードイン</div>
- fadeInLeft
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow fadeInLeft">スクロールフェードイン</div>
- fadeInRight
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow fadeInRight">スクロールフェードイン</div>
- fadeInUp
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow fadeInUp">スクロールフェードイン</div>
- fadeInDown
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow fadeInDown">スクロールフェードイン</div>
- bounceIn
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow bounceIn">スクロールフェードイン</div>
- bounceInLeft
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow bounceInLeft">スクロールフェードイン</div>
- bounceInRight
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow bounceInRight">スクロールフェードイン</div>
- bounceInUp
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow bounceInUp">スクロールフェードイン</div>
- bounceInDown
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow bounceInDown">スクロールフェードイン</div>
- rotateIn
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow rotateIn">スクロールフェードイン</div>
- rotateInUpLeft
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow rotateInUpLeft">スクロールフェードイン</div>
- rotateInUpRight
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow rotateInUpRight">スクロールフェードイン</div>
- rotateInDownLeft
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow rotateInDownLeft">スクロールフェードイン</div>
- rotateInDownRight
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow rotateInDownRight">スクロールフェードイン</div>
- flip
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow flip">スクロールフェードイン</div>
- flipInX
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow flipInX">スクロールフェードイン</div>
- flipInY
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow flipInY">スクロールフェードイン</div>
- bounce
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow bounce">スクロールフェードイン</div>
- flash
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow flash">スクロールフェードイン</div>
- pulse
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow pulse">スクロールフェードイン</div>
- shake
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow shake">スクロールフェードイン</div>
- swing
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow swing">スクロールフェードイン</div>
- tada
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow tada">スクロールフェードイン</div>
- wobble
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow wobble">スクロールフェードイン</div>
- rollIn
-
指定例
スクロールフェードインこの指定例のコード
<div class="wow rollIn">スクロールフェードイン</div>
アニメーション拡張設定
その他、HTMLタグに data-wow-*** という属性を指定することでスクロールフェードインアニメーションに関するカスタマイズを施すことができます。
- data-wow-duration : アニメーションの時間
-
指定例
5秒かけてアニメーションしますこの指定例のコード
<div class="wow fadeInRight" data-wow-duration="5s">5秒かけてアニメーションします</div>
- data-wow-delay : アニメーション開始の遅延時間
-
指定例
1.4秒遅れてアニメーションしますこの指定例のコード
<div class="wow fadeInRight" data-wow-delay="1.4s">1.4秒遅れてアニメーションします</div>
- data-wow-offset : アニメーションを開始するまでのブラウザ下部からのスクロール距離
-
指定例
下から300ピクセルスクロールされたらアニメーションしますこの指定例のコード
<div class="wow fadeInRight" data-wow-offset="300">下から300ピクセルスクロールされたらアニメーションします</div>
- data-wow-iteration : アニメーションの繰り返し回数
-
指定例
300回繰り返してアニメーションしますこの指定例のコード
<div class="wow fadeInRight" data-wow-iteration="300">300回繰り返してアニメーションします</div>