左からふわっと表示されるあれです。
まず、画面に表示された時のイベントを得るために、jquery.inviewプラグインを導入します。 こちらからダウンロードして、任意のフォルダに保存します。
[Download Zip]をクリックすると、まとめてダウンロードできます。
解凍したら、その中の 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 というファイル名で保存して任意のフォルダにアップロードします。
$(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 同様、ダウンロードして任意のフォルダにアップすればいいはずですが．．．。
Uncaught TypeError: m.easing[this.easing] is not a function というエラーで動かなかったので、Jquery.uiプラグインに含まれるものを使うことにしました。 headタグ内にscriptを追加して読みこむようにします。
query.easing.compatibility.js" type="text/javascript">
あとは、 $(this).animate({ ・・・・ },150); の 150 のところを、 $(this).animate({ ・・・・ },150,’easeOutBounce’); のようにeasing名を追加するだけ。
easing名とその変化については、こちらがとてもわかり易いです。