• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

高度なカスタマイズ

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

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


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

capture 2015-12-04 14.07.08 copy
この機能は管理画面からPC、モバイルテーマ別で有効・無効を指定できますが、このスクロールフェードインアニメーション機能が有効である場合は、ユーザーが個別に作成した テキストウィジェット や 記事内の任意のHTMLコンテンツもスクロールフェードインして表示させることができます。

ここではその方法とサンプルを解説します。

※スクロールフェードイン効果は、オープンソースのJavascriptモジュールを利用して実現しています。

対象テーマ

Attractive, Mature, ESCENA, el plano 以外のテーマ。

スクロールフェードインアニメーション化

任意のHTMLオブジェクトを個別にスクロールフェードイン要素として反映し、アニメーションを定義する方法を説明します。

スクロールフェードインアニメーション要素の宣言

対象のHTMLタグの class の値に wow を含めることで、該当要素がスクロールフェードインの対象とすることができます。

続けて、用意されているアニメーション用CSSセレクタの中から目的のセレクタを指定することで指定したモーションでスクロールフェードインさせることができます。

指定例

左からフェードインして表示します

右からフェードインして表示します

上から下にフェードインして表示します

下から上にスクロールフェードインする画像

※表示確認のため、上記サンプルではモーションを意図的に繰り返して表示しています。
この指定例のコード

アニメーションの種類

wowセレクタの後に定義する、スクロールフェードインのアニメーションとして指定可能なCSSセレクタとその動作については以下を参考にしてください。

fadeIn

指定例

スクロールフェードイン

この指定例のコード

fadeInLeft

指定例

スクロールフェードイン

この指定例のコード

fadeInRight

指定例

スクロールフェードイン

この指定例のコード

fadeInUp

指定例

スクロールフェードイン

この指定例のコード

fadeInDown

指定例

スクロールフェードイン

この指定例のコード

bounceIn

指定例

スクロールフェードイン

この指定例のコード

bounceInLeft

指定例

スクロールフェードイン

この指定例のコード

bounceInRight

指定例

スクロールフェードイン

この指定例のコード

bounceInUp

指定例

スクロールフェードイン

この指定例のコード

bounceInDown

指定例

スクロールフェードイン

この指定例のコード

rotateIn

指定例

スクロールフェードイン

この指定例のコード

rotateInUpLeft

指定例

スクロールフェードイン

この指定例のコード

rotateInUpRight

指定例

スクロールフェードイン

この指定例のコード

rotateInDownLeft

指定例

スクロールフェードイン

この指定例のコード

rotateInDownRight

指定例

スクロールフェードイン

この指定例のコード

flip

指定例

スクロールフェードイン

この指定例のコード

flipInX

指定例

スクロールフェードイン

この指定例のコード

flipInY

指定例

スクロールフェードイン

この指定例のコード

bounce

指定例

スクロールフェードイン

この指定例のコード

flash

指定例

スクロールフェードイン

この指定例のコード

pulse

指定例

スクロールフェードイン

この指定例のコード

shake

指定例

スクロールフェードイン

この指定例のコード

swing

指定例

スクロールフェードイン

この指定例のコード

tada

指定例

スクロールフェードイン

この指定例のコード

wobble

指定例

スクロールフェードイン

この指定例のコード

rollIn

指定例

スクロールフェードイン

この指定例のコード

アニメーション拡張設定

その他、HTMLタグに data-wow-*** という属性を指定することでスクロールフェードインアニメーションに関するカスタマイズを施すことができます。

data-wow-duration : アニメーションの時間

指定例

5秒かけてアニメーションします

この指定例のコード

data-wow-delay : アニメーション開始の遅延時間

指定例

1.4秒遅れてアニメーションします

この指定例のコード

data-wow-offset : アニメーションを開始するまでのブラウザ下部からのスクロール距離

指定例

下から300ピクセルスクロールされたらアニメーションします

この指定例のコード

data-wow-iteration : アニメーションの繰り返し回数

指定例

300回繰り返してアニメーションします

この指定例のコード

COMMENT ON FACEBOOK

Return Top