mako110 掲題の通りでございます。
キャンペーンなどを最大限に訴求したい場合は、
サイトにアクセスしたときにドーンとバナーを見せる方法がありますね。
実際にクリック率も高いようで、
採用しているサイトも結構多いですよね。
ただ、個人的にはちょっと「鬱陶しいな」というのが率直な所でして、
せめてものエクスキューズとして、「初回のアクセス時のみ表示される」
といった形にしておきたいと思います。
まあ、そんなところで、
実装方法は下記の感じです。
HTMLとCSSとJavaScriptで実装しておりますです。
そんなにややこしい仕組みではないので、
これから夏のキャンペーンなどで、ぜひご活用いただければ幸いです。
HTML
|
1 2 3 4 5 6 7 8 |
<div class="popup_wrapper"> <div class="popup"> <div class="popup_concent"> <span class="popup_close"></span> <p><img src="bnr.jpg" alt="" width="100%" /></p> </div> </div> </div> |
javascript
|
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 |
<script type="text/javascript"> window.addEventListener('load', function() { if(!sessionStorage.getItem('popup')) { sessionStorage.setItem('popup', 'on'); const body = document.querySelector('body'); const popupBg = document.querySelector('.popup_wrapper'); const popup = document.querySelector('.popup'); const popupTitleClose = document.querySelector('.popup_close'); body.classList.add('open_popup'); popupBg.addEventListener('click', function() { closePopup(); }); popup.addEventListener('click', function(e) { e.stopPropagation(); }); popupTitleClose.addEventListener('click', function() { closePopup(); }); function closePopup() { body.classList.remove('open_popup'); } } }, false); </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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<style type="text/css"> p{ margin:0; padding:0; } body.open_popup { overflow: hidden; } .popup_wrapper { position: fixed; top: 0px; left: 0px; z-index: 9999; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: 0.5s; } body.open_popup .popup_wrapper { opacity: 1; visibility: visible; } .popup { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 600px; max-width:90%; } .popup_concent { position: relative; color: #fff; text-align: center; line-height: 1.5; margin:0; } .popup_close { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; transform: translateY(-50%); cursor: pointer; } .popup_close::before, .popup_close::after { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 4px; background-color: #fff; content: ""; } .popup_close::before { transform: translateX(-50%) translateY(-50%) rotate(45deg); } .popup_close::after { transform: translateX(-50%) translateY(-50%) rotate(-45deg); } </style> |
それでは。
