ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимационный стиль 404 страницы для сайта

Анимационный стиль 404 страницы для сайта

Анимационный стиль 404 страницы для сайта
Эта оригинальная с анимацией страница 404 для сайтов служат для того, чтобы изначально предупредить гостей портала о том, что она была удалена. Где пользователи или персонал пытался найти материал, который еще какое то время остается в поисковых запросах. Вы можете на ней создать ссылку для того, чтобы перенаправить всех на другую часть вашего сайта, это делается для того, чтоб не потерять потенциального пользователя или покупателя на онлайн магазине. Но здесь у нас производиться чистая анимация, что отлично можно наблюдать на широком экране, но также на всех мобильных устройствах.

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

Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

HTML

Код
<div class="container">
  <div><h1>-404-</h1></div>
  <div></div>
  <div></div>
</div>
<canvas id="canv"></canvas>

CSS

Код
@import url(https://fonts.googleapis.com/css?family=Merriweather:900);
* {
  margin: 0;
  padding: 0;
  user-select:none;
}

html {
  height: 100%;
  overflow: hidden;
}

canvas {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-family: 'Merriweather', serif;
}

.container {
  z-index: 3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: radial-gradient(ellipse at center, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 19%, hsla(0, 0%, 0%, 0.9) 100%);  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#e6000000', GradientType = 1);  
}

.container div {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 20%;
  background-color: hsla(0, 0%, 0%, .09);
  box-shadow: 0 0 10px hsla(0, 0%, 0%, .2);
  animation: waves 12s linear infinite;
}

.container div:nth-child(1) {
  animation-delay: 0;
}

.container div:nth-child(2) {
  animation-delay: 4s;
}

.container div:nth-child(3) {
  animation-delay: 8s;
}

@keyframes waves {
  0% {
  top: -20%;
  }
  100% {
  top: 100%;
  }
}

h1 {
  z-index: 3;
  position: absolute;
  font: bold 20vw 'Merriweather', serif;
  left: 50%;
  top: 50%;
  margin-top: -10vh;
  width: 100%;
  margin-left: -50%;
  height: 20vw;
  text-align: center;
  color: transparent;
  text-shadow: 0 0 30px hsla(0, 0%, 0%, .5);
  animation: flicks .8s linear infinite;
}

h2 {
  z-index: 2;
  position: absolute;
  font: bold 5.5vw 'Merriweather', serif;
  left: 51%;
  top: 40%;
  width: 90%;
  margin-left: -45%;
  height: 50vw;
  text-align: center;
  color: transparent;
  text-shadow: 0 0 12px hsla(0, 0%, 0%, .5);
  animation: flicks 1.5s linear infinite;
}
span{
  font-size:7.5vw;
  text-shadow: 0 0 24px hsla(0, 0%, 0%, 1);
  animation: spanflicks 1s linear infinite;
}
h3{
  z-index:2;
  position: absolute;
  font: bold 3vw 'Merriweather', serif;
  left: 51%;
  top: 30%;
  width: 90%;
  margin-left: -45%;
  height: 50vw;
  text-align: center;
  color: transparent;
  text-shadow: 0 0 12px hsla(0, 0%, 0%, .4);
  animation: flicks 1s linear infinite;
}

@keyframes flicks {
  0% {
  text-shadow: 0 0 30px hsla(0, 0%, 0%, .5);
  }
  33% {
  color: hsla(0,0%,0%,.4);
  text-shadow: 0 0 10px hsla(0, 0%, 0%, .4);
  }
  66% {
  color: transparent;
  text-shadow: 0 0 20px hsla(0, 0%, 0%, .2);
  }
  100% {
  color: hsla(0,0%,0%,.5);
  text-shadow: 0 0 40px hsla(0, 0%, 0%, .8);
  }
}

@keyframes spanflicks {
  0% {
  text-shadow: 0 0 30px hsla(0, 0%, 0%, .5);
  }
  33% {
  color: hsla(0,0%,0%,.4);
  text-shadow: 0 0 10px hsla(2, 95%, 15%, .5);
  }
  66% {
  color: transparent;
  text-shadow: 0 0 20px hsla(2, 95%, 15%, .2);
  }
  100% {
  color: hsla(0,0%,0%,.5);
  text-shadow: 0 0 40px hsla(2, 95%, 15%, .1);
  }
}

JS

Код
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
  window.setTimeout(callback, 1000 / 60);
  };
})();

var noise = (function() {
  var ب_ب;
  var ಥ_ಥ;
  var imgData;
  var px;
  var w;
  var h;
  var static;

  var flicker = function() {
  ب_ب = document.getElementById('canv');
  ಥ_ಥ = ب_ب.getContext('2d');
  ب_ب.width = w = 700;
  ب_ب.height = h = 500;
  ಥ_ಥ.fillStyle = 'hsla(255,255%,255%,1)';
  ಥ_ಥ.fillRect(0, 0, w, h);
  ಥ_ಥ.fill();
  imgData = ಥ_ಥ.getImageData(0, 0, w, h);
  px = imgData.data;
  static();
  };

  static = function() {
  setInterval(function() {
  window.requestAnimFrame(static);
  flicks();
  }, 30);
  }
  var flicks = function() {
  for (var i = 0; i < px.length; i += 4) {
  var col = (Math.random() * 255) + 50;
  px[i] = col;
  px[i + 1] = col;
  px[i + 2] = col;
  }
  ಥ_ಥ.putImageData(imgData, 0, 0);
  };

  return {
  init: flicker
  };
}());
noise.init();

Наличие нестандартной и креативной страницы 404 уже само по себе открытие для посетителей. Это упрощает неудачную ситуацию и может указать пользователям место, где они могут получить некоторую помощь.

Демонстрация
15 Октября 2020 Загрузок: 5 Просмотров: 813 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar