Суть способа заключается в том, что перед пользователем появится сообщение, которое затемнит основной контент и укажет о причине переадресации. Также под сообщением будет индикатор, на подобии полосы загрузки. Он будет показывать, сколько осталось до переадресации. По истечению заданного времени, будет совершен переход на новую страницу или сайт.
Давайте приступим к работе.
Для начала в шапку страницы перед закрывающимся head или в подвал перед закрывающимся body нужно добавить javascript. В данном скрипте объединены два javascript. Один отвечает за анимацию полосы загрузки, а второй за время и направление переадресации.
<script type="text/javascript">
//Скрипт полосы загрузки
$(function() {
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 15000);
});
});
//Скрипт переадресации
window.setTimeout("document.location.href='https://gnatkovsky.com.ua/'", 15000);
</script>
В первой и второй части скрипта есть значение - 15000. Это - 15 секунд. В первом скрипте, это время за которое полоса загрузки дойдет до конца, а во втором - время через которое будет совершена переадресация. Если надо изменить, меняем там и там, чтобы все красиво и правильно работало.
Также во втором скрипте указанна ссылка на мой сайт, замените ее на нужную Вам. Это как раз тот адрес, на который будет совершена переадресация.
Далее нам нужно в самом верху страницы или сайта, желательно в шапке сразу после начала body добавить следующую разметку:
<div class="bg_mess_block">
<div class="mess_block">
<h2>Сайт <span class="domen">Site.com</span> закрыт</h1>
<p>Через 15 секунд вы будете перенаправлены на сайт <a href="https://gnatkovsky.com.ua/" title="Уроки WordPress и многое другое" target="_blank" >Gnatkovsky.com.ua</a>.</p>
<p>Если этого не произошло, то нажмите <a href="https://gnatkovsky.com.ua/" title="Уроки WordPress и многое другое" target="_blank" >сюда</a>.</p>
<div class="meter"><span></span></div>
</div>
</div>
Давайте по порядку разберем что и как.
- 1. Блок с классом bg_mess_block - это фон полупрозрачный, который заполняет всю страницу.
- 2. Блок mess_block - это блок, в котором будет размещено все содержимое сообщения и он будет по центру экрана.
- 3. Далее идет сообщение и строка где указано время, измените его, если вы поменяете время в скрипте.
- 4. Блок с классом meter - это и есть полоса загрузки.
Есть один момент. Внутри блока meter есть span. По сути - meter это родитель и фон полосы загрузки. Он темный и если хотите, можете сделать его прозрачным. А вот span - это как раз та полоска, которая движется, так что ни в коем случаи span не удаляйте.
Чтобы задать красивый и корректный внешний вид, добавим стилей к нашей странице.
.meter{
height: 4px;
position: relative;
margin: 100px 0 20px 0;
background: #111;
padding: 0;
}
.meter > span {
display: block;
height: 100%;
background: #f30;
}
.bg_mess_block{
position:fixed;
z-index:1000;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
vertical-align:middle;
color:#aaaaaa;
font-size:20px;
background:rgba(16,16,16,0.9);
font-family: Helvetica, Arial, sans-serif;
font-weight:100;line-height:1.2em;
}
.mess_block{
display;block;
width:50%;
text-align:center;
margin:15% auto;
padding:0;
text-align:center;
}
.domen{color:#f30);}
Если все сделано правильно, то Вы увидите результат.
Кстати, если вам не надо, так сказать, никаких прелюдий, то можете просто использовать второй скрипт убрав время и когда человек попадет на страницу с скриптом, то моментально попадет на нужный сайт или страницу, не поняв, что его и перенаправили 🙂
Вставив код ниже, больше ничего не нужно, ни разметки ни стилей.
<script type="text/javascript">
window.setTimeout("document.location.href='https://gnatkovsky.com.ua/'");
</script>
Как всегда пишу, меняйте все под себя, пробуйте и у Вас все получится.
На этом все, спасибо за внимание. 🙂
