初心者でもできる!jQueryで作る実用的な追従バナーの作り方!ソースコードあり!

「初心者でもできる!jQueryで作る実用的な追従バナーの作り方」では、追従バナーをウェブサイトに簡単に組み込みたいと思っているプログラミング初心者やプログラミング経験者の方々に、ウェブサイトに動きを加える追従バナーの作成方法をわかりやすくご紹介します。

はじめに

記事の目的と対象読者

追従バナーをウェブサイトに簡単に組み込みたいと思っているプログラミング初心者やプログラミング経験者

追従バナーとは何か?その利点

追従バナーとは、ユーザーがページをスクロールしても一定の位置に留まるバナーのことです。この種のバナーは、特に広告やプロモーション、重要なお知らせなどを目立たせたい場合に有効です。追従バナーの最大の利点は、ユーザーの視界に常に入ることで、メッセージの視認性が高まり、クリック率や反応率を向上させる可能性があることです。また、デザインの面では、ウェブサイトに動的な要素を加えることで、ユーザー体験を豊かにし、プロフェッショナルな印象を与えることができます。

HTML・CSS・JavaScriptソースコード例

PR

<div id="sideBanner">
	<a class="sideBanner-line" href="#">
		<p>
			<span>LINE</span>
			<span>で予約</span>
		</p>
	</a>
	<a class="sideBanner-mail" href="#">
		<p>
			<span>メール </span>
			<span> で予約</span>
		</p>
	</a>
</div>

<div id="bottomBanner">
	<a href="#">
		無料体験に申し込む!
	</a>
</div>
#sideBanner {
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-200px);
    transition: all 0.5s ease-in-out;
}
#sideBanner.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
#sideBanner a {
    width: 60px;
    display: block;
    text-align: center;
    padding: 20px 0;
    border-radius: 0 10px 10px 0;
}
#sideBanner a p {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
#sideBanner a p span {
    display: block;
    color: #fff;
    font-size: 20px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1;
    letter-spacing: 0.1em;
}
.sideBanner-line {
    background-color: #00b900;
}
.sideBanner-mail {
    background-color: #fc8354;
}

.sideBanner-line::before,
.sideBanner-mail::before {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto 10px;
    background-size: contain;
    background-repeat: no-repeat;
}
.sideBanner-line::before {
    background-image: url(images/line.svg);
}
.sideBanner-mail::before {
    background-image: url(images/mail.svg);
}
#bottomBanner {
    width: 100%;
    max-width: 640px;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 200px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}
#bottomBanner.active {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease-in-out;
}
#bottomBanner a {
    display: block;
    width: 100%;
    padding: 25px 0;
    font-size: 30px;
    color: #fff;
    background-color: rgba(252, 131, 84, 0.8);
}
jQuery(window).scroll(function () {
    let scroll = jQuery(window).scrollTop();
    if (scroll > 10) {
        jQuery("#sideBanner").addClass("active");
    } else {
        jQuery("#sideBanner").removeClass("active");
    }
	if(scroll > 1000) {
        jQuery("#bottomBanner").addClass("active");
    } else {
        jQuery("#bottomBanner").removeClass("active");
    }
});

jQueryのCDNを読み込む

</body>の閉じタグの近くで、上記のJavaScriptよりも上に下記jQueryのCDNを読み込んでください

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

jQueryのCDN公式

上記のjQueryのCDNは下記公式サイトのものを使っています。

「jQuery 3.x」の「jQuery Core 3.7.1」の「minified」をクリックして表示されるCDNです。

https://releases.jquery.com/

追従バナーがうまく表示されない時

例えばJavaScriptのソースコードが下記のようになっていると表示されません。

let scroll = jQuery(window).scrollTop();
jQuery(window).scroll(function () {
    if (scroll > 10) {
        jQuery("#sideBanner").addClass("active");
    } else {
        jQuery("#sideBanner").removeClass("active");
    }
	if(scroll > 5000) {
        jQuery("#bottomBanner").addClass("active");
    } else {
        jQuery("#bottomBanner").removeClass("active");
    }
});

このソースコードをだと、スクロールイベント内でscroll変数の値が更新されていないため、#sideBanneractiveクラスが付与されないです。scroll変数をスクロールイベント内で更新する必要があります。

スクロールイベント内でscrollの変数宣言をする必要がある!

まとめ

この記事では、jQueryを使用して追従バナーを作成する方法を解説しました。初心者でもコピー&ペーストで実装ができる形になっています。cssやJavaScriptの値などは自身の好みにカスタマイズしていただいてより魅力的でユーザーフレンドリーなサイトを作成していただければ幸いです。

他のHTMLCSS JavaScriptソースコード紹介記事まとめ

ソースコードまとめ

実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。

>お問い合わせはこちら

お問い合わせはこちら