今回はふわっと出現してそのままスクロールに追従するフローティングバナーの設置になります。
cssで画像バナーを追従する仕組みをつくり、JSで設置場所に近づいたらふわっと出現させる仕掛けを作成します。
cssによる追従バナー（フローティング・スティッキー）の作成
今回はjQueryも使用しますので＜/head＞の直前に以下を記入してjQueryを読み込んでくだだい。
|
1 2 |
<!--jquery--> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> |
次にcssで追従バナーの仕掛けを作成します。
|
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 |
/*フローティングバナー*/ .floating-banner { display: block; position: fixed; /* 追従 */ z-index: 99999; /* 他の要素の下に隠れないように */ bottom: 0px; text-align:center; } .floating-banner_sp { display: block; position: fixed; /* 追従 */ z-index: 99999; /* 他の要素の下に隠れないように */ left: 0px; bottom: 0px; text-align:center; } .floating-banner:hover { opacity: .8; /* ホバーで少し透過 */ } .fade_off { opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; } .fade_on { opacity: 1; } |
上記のfloating-bannerが追従バナーの要素になります。今回はPC用とスマホ用の2種類を用意しましたので「floating-banner」とfloating-banner_sp」の2種類を記述しています。
fade_offというのはページ読み込みの時点で、バナーを出現させないための記述です。
バナーを設置したい箇所に以下のように＜section＞と＜div＞で記述します。
画像のwidthとheighそれぞれ100%で記述してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<section id="sample" class="fade_off"> <div class="㍶"> <div class="floating-banner"> <a href="リンク先ページのURL"> <img src="https://web-technology.work/wp/wp-content/uploads/2020/08/floting_banner_1.png" alt="" width="100%" height="100%" class="alignnone size-full wp-image-253" /> </a> </div> </div> <div class="sp"> <div class="sp floating-banner_sp"> <a href="リンク先ページのURL"> <img src="https://web-technology.work/wp/wp-content/uploads/2020/08/floting_banner_2.png" alt="" width="100%" height="100%" class="alignnone size-full wp-image-254" /> </a> </div> </div> </section> |
ここではfloating-bannerとfloating-banner_spで2種類のデバイスごとによって読み込みを分けております。それぞれ、＜div class=”㍶”＞と＜div class=”sp”＞という入れ子で囲まれていますが、
これはパソコンとスマホで読み込みを分ける記述です。これらを機能させるためcssには以下のように記述します。
|
1 2 3 4 5 6 7 8 |
/* パソコンで見たときは"pc"のclassがついた画像が表示される */ .pc { display: block !important; } .sp { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media only screen and (max-width: 750px) { .pc { display: none !important; } .sp { display: block !important; } } |
こうすることでパソコンとスマホで異なる画像バナーを表示させることも可能になります。
JSによるふわっと出現させる仕掛け
cssによる作業はここまでとなります。
次にJSによるスクロールでバナー設置箇所に近づいたらふわっと出現させる仕組みになります。
さきほどバナーを設置した箇所に記述した＜div＞の直前に以下のように記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!–– ふわっと出現JS発動スクリプト ––> <script> $(function(){ $(window).scroll(function (){ $("#sample").each(function(){ var imgPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > imgPos - windowHeight + windowHeight/5){ $(this).addClass("fade_on"); } else { $(this).removeClass("fade_on"); } }); }); }); </script> |
これで事前にcssで非表示にしていた要素（fade_off）がスクロールで可視範囲に入ったタイミングで出現し、また可視範囲から出た場合はフェードアウトします。
以下はデモになりますが、パソコンでは紺色の画像、スマホでは緑色の画像が表示されるようになっております。
