ブログアフィリエイト

• シェア
• 
• 
• 
• 

ご機嫌いかがでござるか、トリでござる。

 

 

あ、あの、いきなりだけど、、、

 

ちょっとさ、めんどうだけどさ、

 

このまま画面をスクロールしてくださらぬか？

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

どうどう？出ましたよね？フワーっとフェードインしましたよね？

 

はい、今日はこれやりまーす！

 

 

 

どうやって文字や画像をフェードインさせるの？

既にタイトルでネタバレになっておりますが、「初心者でもコピペで出来るjQueryを使ったボタンの設置」でもご紹介した「jQuery」を使います。

 

ちょっと復習すると、jQueryはJavaScriptを簡単にしたやつで、サイトに視覚効果を付加するためのプログラミング言語です。

 

WPでのフェードイン設定手順

今回もjQueryの設定にあたってBrian's Imaginationさんの記事を参照させて頂きました。

 

では、早速設定して参りましょう。あ、先にバックアップを取っておくのだけは忘れずに！

 

最初の手順１～３はトップページへ戻るボタンの設置の時と同じです。復習を兼ねてもう一度みていきましょう。

 

１．テーマヘッダー（header.php）にjQueryのライブラリが入っているか確認しましょう。Ctrl+Fで"jquery"と検索してみて下さい。

↓

↓

 

２．見つからない場合は</head>のタグを探して、その上に下記ソースをコピペしてjQueryのライブラリを追加します。

&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js&quot;&gt;&lt;/script&gt;

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

引用元：株式会社ウィル

「トップへ戻るボタンをカンタン5分で実装【jQuery】」より

 

３．</head>の上に下記ソースをコピペして、保存します。

&lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function(){ $(&#039;.fuwat&#039;).css(&#039;visibility&#039;,&#039;hidden&#039;); $(window).scroll(function(){ var windowHeight = $(window).height(), topWindow = $(window).scrollTop(); $(&#039;.fuwat&#039;).each(function(){ var objectPosition = $(this).offset().top; if(topWindow &gt; objectPosition - windowHeight + 200){ $(this).addClass(&quot;fuwatAnime&quot;); } }); }); }); &lt;/script&gt;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript"> $(document).ready(function(){   $('.fuwat').css('visibility','hidden');   $(window).scroll(function(){    var windowHeight = $(window).height(),        topWindow = $(window).scrollTop();    $('.fuwat').each(function(){     var objectPosition = $(this).offset().top;     if(topWindow > objectPosition - windowHeight + 200){      $(this).addClass("fuwatAnime");     }    });   }); }); </script>

引用元：Brian's Imagination

「スクロールするとふわっと現れる文字や画像をはてなブログで実装してみよう」より

 

４．スタイルシート（syle.css）を開けます。

 

５．スタイルシートの一番下に下記ソースをコピペして、保存します。

.fuwatAnime { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.5s; -ms-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-name: fuwatAnime; -ms-animation-name: fuwatAnime; animation-name: fuwatAnime; visibility: visible !important; } @-webkit-keyframes fuwatAnime { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fuwatAnime { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.fuwatAnime { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1.5s; -ms-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-name: fuwatAnime; -ms-animation-name: fuwatAnime; animation-name: fuwatAnime; visibility: visible !important; } @-webkit-keyframes fuwatAnime { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fuwatAnime { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } }

引用元：Brian's Imagination

「スクロールするとふわっと現れる文字や画像をはてなブログで実装してみよう」より

 

６．後は記事を書く際に、フェードインして欲しい文や画像を<div class="fuwat">と</div>で囲むだけ。

 

実装すると・・・

 

↓

 

↓

 

↓

 

 

と、こんな感じ。（さりげなく黄レンジャー太ってるんだな）

 

 

まとめ

今回もトリの大好物であるブログで使えるギミックシリーズを紹介させて頂きましたが、いかがでしたでしょうか？

 

まぁ、あってもなくてもいい技ではあるんですが、ブログに動きがあるとやはり目を引くのは間違いないので、他の初心者さんと差別化を図るために、実装してみてもいいかもですね！

 

ただ、ありとあらゆる文をフェードインさせると、ちょっとウザイので使い過ぎにご注意下さい。

 

• シェア
• 
• 
• 
•