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

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

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

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

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

Забавный взгляд на 404 страницы со всего Интернета, и мы собираемся их классифицировать следующим образом:

1. Помощь;
2. Искусство отвлечения;
3. Предоставление развлечений;
4. Приятная эстетика;
5. Искренние извинения;
6. Прикосновение личности;

Так смотрится на светлом фоне, но безусловно анимацию лучше просматривать на DEMO страницы.

Приступаем к установке:

HTML

Код

CSS

Код

#zornet_dersakin {
  width: 431px;
  height: 431px;
}

body, html {
  margin: 0;
  padding: 0;
}

Код

var Shape = Isomer.Shape;
var Point = Isomer.Point;
var Color = Isomer.Color;
canvas = document.getElementById("zornet_dersakin")
var iso = new Isomer(canvas);
ctx = canvas.getContext("2d")

var points = [
  [0,4,3],[0,6,4],[0,5,4],[0,4,4],[0,4,5],[0,6,5],

  [0,1,3],[0,0,3],[0,-1,3],[0,1,4],[0,-1,4],
[0,1,5],[0,0,5],[0,-1,5],


  [0,-6,3],[0,-4,4],[0,-5,4],[0,-6,4],[0,-6,5],[0,-4,5]
  ]

var cubes = []

setInterval(function () {

  ctx.clearRect(0,0,canvas.width, canvas.height)


for (i=0; i<cubes.length; i++) {

  color = [Math.floor(Math.random()*47),Math.floor(Math.random()*149)+105,Math.floor(Math.random()*147)+105]

iso.add(Shape.Prism(new Point(points[i][0], points[i][1], points[i][2])), new Color(color[0],color[1],color[2]))
}
  cubes.push(points.splice(0,0)[0])

}, 115)

Демонстрация

24 Апреля 2018 Просмотров: 1421 Комментариев: (0)

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

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

Kosten

Комментарии: 0