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

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

jquery.inviewプラグイン

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

https://github.com/zuk/jquery.inview

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

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

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

<script src="<?php bloginfo( 'template_url' ); ?>/js/my.js" type="text/javascript"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery.inview.min.js" type="text/javascript"></script>

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

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

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

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

$(document).ready(function() {
    var target = $('#content p');
    var default_marginleft = target.css('margin-left');
    var default_marginright = target.css('margin-right');
    target.css('margin-left', '-15px')
        .css('margin-right', '15px')
        .css('opacity', 0);
     
    target.on('inview', function() {
        $(this).animate({
            opacity:1 ,
            'margin-right': default_marginright ,
            'margin-left': default_marginleft
        },150);
    });
});

上記の例では、#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 同様、ダウンロードして任意のフォルダにアップすればいいはずですが...。

http://gsgd.co.uk/sandbox/jquery/easing/

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

<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/my.js" type="text/javascript"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/jquery.inview.min.js" type="text/javascript"></script>
query.easing.compatibility.js" type="text/javascript"></script>

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

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

http://easings.net/ja

0
  • このエントリーをはてなブックマークに追加