» »

Анимированная страница ошибки 404


Страница 404 не грузит сайт, и она очень лёгкая при открытие. Темный цвет оттенок полностью, исключая, что будет автоматически писать на ней. Здесь сделано так, что если кто то попадает на ее, то в левом нижнем углу начинает писать по английски, хорошо подойдет под тематику, все что качается веб мастера или построение сайта. Так сделано оригинально, что можно просто поставить ее на темный дизайн так как анологичного оттенка она.

На странице ведётся диалог будто бы с компьютером (ИИ - Искусственный интеллект)

Давайте перейдём к установке.

Как всегда есть два варианта.

Вариант № 1


Создаём блокнот и называем его 404.htm, открываем его и вставляем туда код:

Код
<!doctype html>
<html lang="en" id="not-found">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <title>404 Not Found</title>
  <link rel="stylesheet" type="text/css" href="http://allison.house/assets/css/main.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://allison.house/assets/js/jquery.typed.js" type="text/javascript"></script>
  <script>
  $(function(){
  var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  var dayOfWeekIndex = (new Date()).getDay();
  var dayOfWeek = weekdays[dayOfWeekIndex];
  var dayOfWeekPastIndex = Math.floor(weekdays.length * Math.random());
  var dayOfWeekPast;
  var hourOfDay = new Date().getHours();
  var timeOfDay;
  // choose day of week other than current one
  if (dayOfWeekPastIndex == dayOfWeekIndex) {
  dayOfWeekPast = weekdays[(dayOfWeekPastIndex + 1) % weekdays.length];
  } else {
  dayOfWeekPast = weekdays[dayOfWeekPastIndex];
  }
  // assign time of day to the hour
  if ((hourOfDay >= 4) && (hourOfDay <= 11)) {
  timeOfDay = "morning";
  } else if ((hourOfDay >= 12) && (hourOfDay <= 16)) {
  timeOfDay = "afternoon";
  } else {  
  timeOfDay = "evening";
  }
  // make conversation
  $('#story').typed({
  strings: ["Well, here we are. 404 Not Found^2000 \nAin't much to look at, is it?^2000 \nCame here on a " + dayOfWeekPast + " night once.^1000 \nIt was actually pretty crowded.^1000 \nBut on a " + dayOfWeek + " " + timeOfDay + " .^300 .^300 .^1000 \nI guess it's just you^1000 and me.^3000 \nHeh."],
  typeSpeed: 20,
  backDelay: 500,
  loop: false,
  loopCount: false,
  });
  });
  $(document).ready(function() {
  setTimeout(function() {
  // send 'em packing  
  $('#kick').append('<a href="/">HOME | ДОМОЙ</a>');
  }, 30000);
  });
  </script>
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-65707739-1', 'auto');
  ga('require', 'linkid', 'linkid.js');
  ga('send', 'pageview');
</script>

<script type="text/javascript">
  setTimeout(function(){var a=document.createElement("script");
  var b=document.getElementsByTagName("script")[0];
  a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/0037/2783.js?"+Math.floor(new Date().getTime()/3600000);
  a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script>
  </head>

  <body>
  <div id="holder">
  <span id="story"></span>
  <div id="kick"></div>
  </div>
  </body>
</html>


Сохраняем в кодировке UTF-8. Заливаем в корень Вашего файлового менеджера. Готово.


Вариант № 2
для ленивых

Качаем архив что ниже, и заливаем в корень Вашего файлового менеджера. Готово.

01.07.2016 Загрузок: 1 Просмотров: 489 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Alkapone
Alkapone 01.07.2016 21:261
0
Если кому нужно перевести на Русский язык обращайтесь переведу.
Kosten
Kosten 01.07.2016 21:442
0
А что хром не переводит, тут дождаться нужно когда напечатает и покажутся кнопки.
Сопрано
Сопрано 01.07.2016 21:523
0
Не понимаю, для чего перевод, люди когда попадают, стараются быстро выйти, здесь же сделано наоборот, пока все не напечатается, кнопки не покажутся, пот такой минус вижу в этой странице.
Сафрон
Сафрон 01.07.2016 22:444
0
Alkapone, молодец, красиво и оригинально подошел, мне очень понравилось.
Tergran
Tergran 02.07.2016 14:445
0
Не понятная страница, нужно сразу выводить отсылки на сайт а не ждать, что там по английски тебя посылают. biggrin
avatar