РАЗНОЕ / Как сделать заставку на сайт на CSS и JavaScript

Заметка создана: 02 октября 2024 г.
Задачу можно сформулировать так: при первом посещении сайта посетителю показывается "заставка", а при дальнейшем перемещении по внутренним ссылкам — главная страница.
Собственно говоря, есть два варианта:
  1. sessionStorage — заставка нужна при каждом новом открытии вкладки (не страницы),
  2. localStorage — заставка нужна для одного человека только один раз за всю его историю посещения сайта.
<div id="pop-up">
  <div onclick="popUp()">посмотреть
реализацию</div>
</div>
Это самый упрощённый вариант. Количество элементов в заставке (например, наличие социальных кнопок) каждый определяет сам.

Скрипт хорош тем, что не нарушает правил Google AdSense, заставка не перекрывает рекламные объявления, так как те не загружаются. Но код JavaScript нужно расположить выше кода AdSense.

JavaScript / jQuery

var popup = document.getElementById('pop-up');
function popUp() {
sessionStorage.setItem('popup', 'none');
location.reload();
}
if(sessionStorage.getItem('popup') || !window.sessionStorage) {
popup.parentNode.removeChild(popup);
}else{
if(window.stop !== undefined) {
window.stop();
} else if (document.execCommand !== undefined) {
document.execCommand("Stop", false);
}
}

Стили CSS

#pop-up {
position: fixed; top: 0; bottom: 0; left: 0; right: 0;
z-index: 100;
background: rgba(0,0,0,.5) url(http://www.afsklyar.ru/zaglu1.jpg) no-repeat 50% 50%;
background-size: cover;
}
#pop-up div {
position: absolute;
right: 10%;
top: 20%;
padding: 3%;
border-radius: 3%;
font-size: 300%;
white-space: pre-wrap;
line-height: 100%;
color: #fff;
background: red;
cursor: pointer;
}