Анимированная страница 404 с помехами
827материалов
228тем на форуме
3004комментария
6157пользователей

Анимированная страница 404 с помехами



Описание:

Всем вам известная данная страница, она неотъемлемая составляющая каждого сайта. Это так называемая заглушка для сайта, она информирует посетителя о том, что он перешел на не существующую страницу. Это весьма удобно, ведь пользователь просматривает не белую страницу с непонятными иероглифами, а на креативно оформленную заглушку. Знаю по себе, что такой вариант заставляет оставаться на сайте и вернутся назад, а не закрыть страницу, как как вылезла ошибка. Оформив правильно данную страницу вы не потеряете посетителей на вашем сайте. Представляю Вашему вниманию очень эффектную страничку 404 (Страница не найдена). Уникальность её в том, что здесь применён очень интересный эффект помех, как на старых телевизорах

Установка:

Как правило, создаётся новый файл 404.htm и наполняется следующим содержимым:

1) HTML код вставьте в body:
Код
<canvas id="canvas" hidden></canvas>
<div class="center">
<h1>404</h1>
<p>PAGE NOT FOUND.</p>
</div>

2) CSS код вставьте перед /head:
Код
<style>
@import url(http://fonts.googleapis.com/css?family=Oswald:400, 700);
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #242424;
font-family:'Oswald', sans-serif;
background: -webkit-canvas(noise);
background: -moz-element(#canvas);
overflow: hidden;
}
html::after {
content:'';
background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.center {
height: 400px;
width: 500px;
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 250px);
text-align: center;
}
h1, p {
margin: 0;
padding: 0;
-webkit-animation: funnytext 4s ease-in-out infinite;
animation: funnytext 4s ease-in-out infinite;
}
h1 {
font-size: 16rem;
color: rgba(0, 0, 0, 0.3);
-webkit-filter: blur(3px);
filter: blur(3px);
}
p {
font-size: 2rem;
color: rgba(0, 0, 0, 0.6);
}
body::after, body::before {
content:' ';
display:block;
position:absolute;
left:0;
right:0;
top:-4px;
height:4px;
-webkit-animation: scanline 8s linear infinite;
animation: scanline 8s linear infinite;
opacity: 0.33;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0)), -webkit-canvas(noise);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0)), -moz-element(#canvas);
}
body::before {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
@-webkit-keyframes scanline {
0% {
top:-5px;
}
100% {
top:100%;
}
}
@keyframes scanline {
0% {
top:-5px;
}
100% {
top:100%;
}
}
@-webkit-keyframes funnytext {
0% {
color: rgba(0, 0, 0, 0.3);
-webkit-filter: blur(3px);
}
30% {
color: rgba(0, 0, 0, 0.5);
-webkit-filter: blur(1px);
}
65% {
color: rgba(0, 0, 0, 0.2);
-webkit-filter: blur(5px);
}
100% {
color: rgba(0, 0, 0, 0.3);
-webkit-filter: blur(3px);
}
}
@keyframes funnytext {
0% {
color: rgba(0, 0, 0, 0.3);
filter: blur(3px);
}
30% {
color: rgba(0, 0, 0, 0.5);
filter: blur(1px);
}
65% {
color: rgba(0, 0, 0, 0.2);
filter: blur(5px);
}
100% {
color: rgba(0, 0, 0, 0.3);
filter: blur(3px);
}
}
</style>

Для сайтов на uCoz и остальных популярных CMS  прикреплена уже готовая рабочая страничка 404.htm. Просто извлеките всё содержимое ZIP архива в корень вашего сайта

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Шаблон опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о шаблоне:
Дата добавления материала: 14.03.2016 в 07:00
Материал просмотрен: 1235 раз
Категория материала: Шаблоны для uCoz
К материалу оставлены: 2 комментария

Пожаловаться
Сказать спасибо

2 комментария


Mammas
троян в архиве trojan:win32/spursint.A!cl
Ромчик
Код чистый:
Код
<!DOCTYPE html>
<html>
<head>
  <title>404 - Page not found</title>
  <style type="text/css">
  @import url(http://fonts.googleapis.com/css?family=Oswald:400, 700);
  html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #242424;
  font-family:'Oswald', sans-serif;
  background: -webkit-canvas(noise);
  background: -moz-element(#canvas);
  overflow: hidden;
  }
  html::after {
  content:'';
  background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  }
  .center {
  height: 400px;
  width: 500px;
  position: absolute;
  top: calc(50% - 200px);
  left: calc(50% - 250px);
  text-align: center;
  }
  h1, p {
  margin: 0;
  padding: 0;
  -webkit-animation: funnytext 4s ease-in-out infinite;
  animation: funnytext 4s ease-in-out infinite;
  }
  h1 {
  font-size: 16rem;
  color: rgba(0, 0, 0, 0.3);
  -webkit-filter: blur(3px);
  filter: blur(3px);
  }
  p {
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.6);
  }
  body::after, body::before {
  content:' ';
  display:block;
  position:absolute;
  left:0;
  right:0;
  top:-4px;
  height:4px;
  -webkit-animation: scanline 8s linear infinite;
  animation: scanline 8s linear infinite;
  opacity: 0.33;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0)), -webkit-canvas(noise);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0)), -moz-element(#canvas);
  }
  body::before {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  }
  @-webkit-keyframes scanline {
  0% {
  top:-5px;
  }
  100% {
  top:100%;
  }
  }
  @keyframes scanline {
  0% {
  top:-5px;
  }
  100% {
  top:100%;
  }
  }
  @-webkit-keyframes funnytext {
  0% {
  color: rgba(0, 0, 0, 0.3);
  -webkit-filter: blur(3px);
  }
  30% {
  color: rgba(0, 0, 0, 0.5);
  -webkit-filter: blur(1px);
  }
  65% {
  color: rgba(0, 0, 0, 0.2);
  -webkit-filter: blur(5px);
  }
  100% {
  color: rgba(0, 0, 0, 0.3);
  -webkit-filter: blur(3px);
  }
  }
  @keyframes funnytext {
  0% {
  color: rgba(0, 0, 0, 0.3);
  filter: blur(3px);
  }
  30% {
  color: rgba(0, 0, 0, 0.5);
  filter: blur(1px);
  }
  65% {
  color: rgba(0, 0, 0, 0.2);
  filter: blur(5px);
  }
  100% {
  color: rgba(0, 0, 0, 0.3);
  filter: blur(3px);
  }
  }
  </style>
</head>
<body>
<canvas id="canvas" hidden></canvas>
<div class="center">
  <h1>404</h1>
  <p>PAGE NOT FOUND.</p>
</div>

<script type="text/javascript">
  var canvas = document.getElementById('canvas'),
  context = canvas.getContext('2d'),
  height = canvas.height = 256,
  width = canvas.width = height,
  bcontext = 'getCSSCanvasContext' in document ? document.getCSSCanvasContext('2d', 'noise', width, height) : context;
  noise();

  function noise() {
  requestAnimationFrame(noise);
  var idata = context.getImageData(0, 0, width, height);
  for (var i = 0; i < idata.data.length; i += 4) {
  idata.data[i] = idata.data[i + 1] = idata.data[i + 2] = Math.floor(Math.random() * 255);
  idata.data[i + 3] = 255;
  }
  bcontext.putImageData(idata, 0, 0);
  };
</script>
</body>
</html>
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта