画面上に表示されたら、じわっと、ふわっと表示される

JQuery.inviewのダウンロード JQuery

左からふわっと表示されるあれです。

jquery.inviewプラグイン

まず、画面に表示された時のイベントを得るために、jquery.inviewプラグインを導入します。 こちらからダウンロードして、任意のフォルダに保存します。

zuk/jquery.inview
Remy Sharp's jQuery plugin adds a bindable 'inview' event for detecting when an element is scrolled into view. - zuk/jquery.inview

[Download Zip]をクリックすると、まとめてダウンロードできます。
JQuery.inviewのダウンロード

解凍したら、その中の jquery.inview.js または、jquery.inview.min.js のいずれかをアップロードしておきます。 内容は同じですが、jquery.inview.min.js のほうが容量がちいさいので通常はそちらを選択します。

で、headタグの中に以下を加えます。WordPressなので、header.phpの中です。

jquery.inview.min.js を、 contents/theme/○○○/js/ に保存している前提です。(○○○は任意のテーマ)

src=”/js/jquery.inview.min.js” で、読み込むjsファイルの場所を指定していますが、 bloginfo( ‘template_url’ ); はテーマのURLです。

任意の要素をふわっと表示させるコード

my.jsは、これから作るJQueyのファイルです。 メモ帳などで、以下の内容を入れて my.js というファイル名で保存して任意のフォルダにアップロードします。

上記の例では、#content 内の p要素が対象になります。

var target = $(‘#content p’); の#content pを書き換えれば、対象を決められます。
まず、ブラウザの準備がととのったら、 default_marginleft と、default_marginright に元のmarginの値を保存しておきます。
で、marginをずらした位置(15px)に設定します。

.css(‘opacity’, 0)で、透明度を全開にして要素を見えなくなります。

つぎに、スクロールなどで対象の要素が表示されると、 target.on(‘inview’, function(){}); の中が実行されます。
animateでアニメーション化していますが、 opacity:1 で透明度を0から1にします。
$(this).animate({ ・・・・ },150); の150を変えると、表示されるスピードを調整できます。

ふわっと表示させる さらに、表示されるスピードを変更して、ふわっとかっこよく表示させたいときは、 jquery.easingプラグインを使います。
jquery.inview 同様、ダウンロードして任意のフォルダにアップすればいいはずですが...。

jQuery Easing Plugin

Uncaught TypeError: m.easing[this.easing] is not a function というエラーで動かなかったので、Jquery.uiプラグインに含まれるものを使うことにしました。 headタグ内にscriptを追加して読みこむようにします。

あとは、 $(this).animate({ ・・・・ },150); の 150 のところを、 $(this).animate({ ・・・・ },150,’easeOutBounce’); のようにeasing名を追加するだけ。

easing名とその変化については、こちらがとてもわかり易いです。

イージング関数チートシート
イージング関数はアニメーションの速度を指定して、動きをより自然にします。現実のオブジェクトは単に一定の速度で動かず、即座に動いたり止まったりしません。このページは、適切なイージング関数の選択に役立ちます。
0
タイトルとURLをコピーしました