Суть способа заключается в том, что перед пользователем появится сообщение, которое затемнит основной контент и укажет о причине переадресации. Также под сообщением будет индикатор, на подобии полосы загрузки. Он будет показывать, сколько осталось до переадресации. По истечению заданного времени, будет совершен переход на новую страницу или сайт.
![Пример](https://gnatkovsky.com.ua/files/demo.png)
Давайте приступим к работе.
Для начала в шапку страницы перед закрывающимся 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>
Как всегда пишу, меняйте все под себя, пробуйте и у Вас все получится.
На этом все, спасибо за внимание. 🙂