HOMEJavaScript【JavaScript】スクロールで表示されるポップアップ広告を実装する【JavaScript】スクロールで表示されるポップアップ広告を実装する2021.07.23JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptでスクロールで表示されるポップアップ広告の実装方法をご紹介しています。スクロールで表示されるポップアップ広告を実装したいんだけど、どうすればいいんだろう?上記の疑問にお答えします。本記事で作成するもの本記事では下記のデモの作り方をご紹介しています。ページをスクロールすると、ページの真中辺りでポップアップ広告が表示されます。CodePen.満たしている要件は下記の通りです。ページの真中辺りでポップアップ広告を表示するポップアップ広告はセッション中に一度だけ表示するポップアップ広告はコンテンツをオーバーレイする形で表示するセッション中に一度だけの表示となりますので、ページ遷移やリロードで再度表示されないようになっています。セッションですので、別タブやウィンドウで開いたり、履歴を削除すると再度表示されます。作り方をご紹介していきます。ポップアップ広告を作成するまずはHTMLとCSSでポップアップ広告を作成します。下記ではデモで使用しているものをそのまま記載しています。バナーにはダミー画像を使用していますので、実際に使用する際はバナー画像に置き換え、サイズを変更してご使用ください。}}スクロールでポップアップ広告を表示するデモで使用しているスクリプトをご紹介します。処理内容はコメントに記載の通りです。処理自体は冒頭で要件に上げた内容となっています。'auto'})上記ではsessionStorageを使用していますが、localStorageを使用するとセッションが切れた後も表示済みのフラグを保存することができます。使用方法については下記でご紹介していますので、ご参考にしていただければ幸いです。最後にポップアップ広告は、Web担当者の意図したタイミングで情報を表示することができるため、コンバージョンの向上に期待できます。その反面、広告が苦手な方にとってはデメリットとなり、ポップアップ広告が表示されたタイミングでサイトの閲覧をやめる方もいます。メリット・デメリットを照らし合わせて、適切に運用していただければと思います。以上、JavaScriptでスクロールで表示されるポップアップ広告を実装する方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。