誰でもできる！jQueryを使ってwordpressでもスクロール時に画像をふわっとフェードインさせる方法
wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラグインを使って表示させる方法 もあるのですが、今回は、投稿記事の下にあるバイラルメディア風facebookボタンをプラグインなしでjQueryを使ってふわっと表示させる方法を紹介します。初心者の私でもできたので、ぜひ、チャレンジしてみてはどうでしょうか。
こんな人におすすめ
実際に↑のようにバイラルメディア風facebokボタンがふわっと表示されます。
画像をふわっと表示する方法を解説
前回、バイラルメディア風facebokボタンを設置する方法を紹介しましたが、その時は、子テーマを用いてカスタマイズしました。今回も前回作成した子テーマにjQueryを追加してsingle.php、header.php、style.cssにコード追記していきます。↓に前回の記事のリンクを貼り付けていますので、まだ見ていない方は確認してから動画を見ていただけたらと思います。
実際に私が設置した様子を動画で解説しています。
解説で使用したコード
使用したjQueryのコード(javascript.js)です。衝突を回避するためにWordpressではjQueryを記述するときに$の代わりにjQueryと書きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery(function(){ jQuery('#animation').css('visibility','hidden'); jQuery(window).scroll(function(){ var windowHeight = jQuery(window).height(), topWindow = jQuery(window).scrollTop(); jQuery('#animation').each(function(){ var targetPosition = jQuery(this).offset().top; if(topWindow > targetPosition - windowHeight + 100){ jQuery(this).addClass("fadeInDown"); } }); }); }); |
jQueryのコードを反映させるためにheader.phpに記述したコードです。子テーマにしか使えませんので、ご注意下さい。header.phpの<head></head>の間、<?php wp_head(); ?>という記述のあとに、以下のコードを追加してください。
|
1 |
<script src="<?php echo get_stylesheet_directory_uri(); ?>/javascript.js" charset="UTF-8"></script> |
使用したふわっと画像を表示させるstyle.cssのコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.fadeInDown { -webkit-animation-fill-mode:both; -ms-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:1s; -ms-animation-duration:1s; animation-duration:1s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 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); } } |
バイラルメディア風facebookボタンのコードです。”ここにFacebookページのURLを入れる”に入力してからペーストして下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!--記事がよかったらいいね ここから --> <?php if (is_mobile()) :?> <div id="animation"> <div class="p-shareButton p-asideList p-shareButton-bottom"> <div class="p-shareButton__cont"> <div class="p-shareButton__a-cont"> <div class="p-shareButton__a-cont__img" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div> <div class="p-shareButton__a-cont__btn"> <p>この記事が気に入ったらいいね！しよう</p> <div class="p-shareButton__fb-cont p-shareButton__fb"> <div class="fb-like" data-href="ここにFacebookページのURLを入れる" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> <span class="p-shareButton__fb-unable"></span> </div> </div> </div> </div> </div> <?php else: ?> <div style="padding:10px 0px;"></div> <!-- 記事がよかったらいいねPC --> <div id="animation"> <div class="p-entry__push"> <div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div> <div class="p-entry__pushLike"> <p>この記事が気に入ったら<br>いいね！しよう</p> <div class="p-entry__pushButton"> <div class="fb-like" data-href="ここにFacebookページのURLを入れる" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> </div> <p class="p-entry__note">最新情報をお届けします</p> </div> </div> </div> <?php endif; ?> <!-- 記事がよかったらいいね ここまで --> |
今回、UNORTHODOX WORKBOOKさんからコードを使わせていただいただきました。ありがとうございます。
まとめ
記事の下にあるバイラルメディア風facebookボタンをふわっと表示する方法を解説しましたが、動画のとおりに操作すれば、初めてjQueryを使ってカスタマイズしようとされている人でも、簡単にできることがわかっていただけたと思います。上のコードで簡単に設置できますので、利用していただければと思います。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life