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

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

jquery.inviewプラグイン

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

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

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

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

解凍したら、その中の 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>

1 2	<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);
    });
});

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

jQuery Easing Plugin

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>