DigiPress

Highly Flexible WordPress Theme

メニュー

任意の要素をスクロールフェードインアニメーションで表示しよう


一部のDigiPressテーマでは、ページのスクロールに合わせてサイトタイトル、投稿タイトル、アイキャッチ画像などのテーマ規定箇所がフェードインしてアニメーション表示される機能があります。

capture 2015-12-04 14.07.08 copy
この機能は管理画面から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>
Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly