menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/06/21
  • JQuery

スクロールで要素をアニメーション表示させる「jquery.inview.js」

以前紹介した「Animate.css」と「wow.js」の組み合わせでは一度スクロールしてしまうと、要素が表示されたままだったのに対し、「jquery.inview.js」の場合は単体で表現できるのと何回スクロールしてもその度にアニメーションを実行してくれます。アニメーション設定もCSSで簡単に多くの動きを表示できます。
inview

使用方法

ダウンロード

・inview(github)

準備するファイル

・jquery.js
・jquery.inview.js

外部ファイルの読み込み

head内へ以下を追加します。

JavaScript

今回はよく使う代表的な4種類のアニメーションを紹介します。

CSSで設定したclassを入力します。

HTML

アニメーションさせる要素に「class」で指定します

Stylesheet

CSSでアニメーションの動きをつけていきます。
「translate」などを変更すると自分好みのアニメーションに変更できます。

今回はよく使う代表的な4種類のアニメーションを紹介しましたが、CSSの組み合わせなどでもっと複雑で自分の好みの動きを表現することもできます。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11