忍法「jQueryを使って画像をフェードインさせる」の術

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

 

 

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

 

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

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

忍者

 

 

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

 

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

 

 

忍法jquery

 

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

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

 

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

悩むヒヨコ

 

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

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

 

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

 

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

 

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

テーマの編集

テーマヘッダー

jQuearyライブラリ

 

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

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

引用元:株式会社ウィル

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

 

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

<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

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

 

4.スタイルシート(syle.css)を開けます。

%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88

 

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

.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

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

 

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

・文章例

<div class="fuwat">フェード・・・イーン!!</div>

・画像例

<div class="fuwat"><img class="alignnone wp-image-2051" src="http://torisan.info/wp-content/uploads/2016/10/戦隊.png" alt="戦隊" width="380" height="292" /></div>

 

実装すると・・・

 

 

 

 

 

フェード・・・イーン!!
戦隊

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

 

 

まとめ

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

 

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

 

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

 

★この記事がお役に立ちましたらクリックして頂けると励みになります(*´∀`*)
ブログランキング・にほんブログ村へ
にほんブログ村

この記事に関連する記事一覧

コメントは12件です

  1. ゆーろ より:

    トリさんこんにちは!

    ゆーろです

    コレやってる人めっちゃいますよね(笑)
    ただやり過ぎはうざいというのには激しく同意です

    文字とか読みにくっ
    って思っちゃいますしね(笑)

    では応援していきます~

    • トリ より:

      ゆーろさん、こんにちは。

      動きをつけると、それだけ目を引きますからね~。
      やりすぎると重たくなるのかなぁ・・・とかその辺りも気になりますね(・・?)
      応援ありがとうございました!

  2. トリさん

    コメントありがとうございました♪

    確かにトリさんがこの記事で紹介されている
    jQueryと効果は同じですね。

    Lazy Loadはプラグイン、
    jQueryはプログラミング言語

    の違いはありますが。

    ピンポイントでフェードインさせたいならjQueryが便利ですね。

    教えていただいてありがとうございます♪

    また勉強しにお邪魔します、応援ポチッとさせていただきました!

    • トリ より:

      ダイキさん、こんにちは!
      コメントありがとうございます^^

      そうそう、ちょうどjQueryのこと記事にしてたんで、ダイキさんのご紹介されているプラグインでやる方法もあるんだな~と興味を持ちました。
      結局どちらが軽いのかが気になるところではありますが。

      また私もダイキさんのブログにお邪魔させて頂きます!
      応援ありがとうございました。

  3. トリさん はじめまして

    しだともすけと申します。

    画像や文字の使いすぎは確かにうっとうしいですね。

    たまに使うとおもしろいですね。

    参考になりました。

    ありがとうございました。

    またお邪魔させて頂きます。

    応援してます。

    • トリ より:

      しださん、はじめまして!

      そうですね~。新しい技を覚えるとそればっかり使いたくなりますが、訪問者の気持ちを忘れてはいけないですねf^^;
      またいつでもお越し下さいませ。

  4. てるしん より:

    トリさん、はじめまして。
    てるしんと申します。

    フェード・・・イーン!!
    とてもわかりやすくて、
    すごく勉強になりました!

    僕も試してみたくなりました♪

    またお邪魔しますね。

    応援してます☆

    ありがとうございました。

    • トリ より:

      てるしんさん、こんにちは!

      jQuery楽しいですよ~^^コピペだけで結構簡単にできますので、是非試してみて、うまくできたら教えて下さいね。
      応援ありがとうございました。

  5. タクヤ より:

    トリさん、こんにちは。

    タクヤです。

    お久しぶりです(^^)
    先日はブログへのコメント
    ありがとうございました。

    なるほど、こうやって
    動きを追加するのですね。
    とても参考になりました。

    動きがあると目をひくので
    僕もなんらかの動きを
    ブログに入れていこうと
    思っていたところです。

    ランキング応援していきますね。

    • トリ より:

      タクヤさん、訪問ありがとうございます。

      ギミックばっか試してないでアフィリエイトの技を磨けと怒られそうな記事ばかり書いてます(笑)
      ちょっと動きがあると意外と目を引いたりしますしね。
      良かったらお試し下さい~

      応援ありがとうございました。

  6. 秋山 より:

    トリさん、こんばんはー!

    フェードイン!!
    この現象ちらほら見かけるので気になってました。

    忍法「jQuery」が使われていたのですね(笑)

    トリさんのブログはちょっとした小技が知れるので好きです。

    応援していきます。
    引き続きよろしくお願いします―!

    • トリ より:

      秋山さん、こんばんは!
      再訪ありがとうございます。とっても嬉しいです^^

      ホント「トリのWP小技塾」というブログに改名ようかなってくらい小技の記事ばっかりになっちゃってますf^^;
      もっとアフィリエイトネタを発信せねばならんなーと反省しております。

      こちらこそ今後ともどうぞよろしくお願いします。

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

ページの先頭へ