Главная » JavaScript и jQuery » Анимированная 404 HTML страница сайта

Анимированная 404 HTML страница сайта

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

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

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

Так она выглядит в реальности, где нет переходов и ссылок:

Мобильная страница ошибки 404 на сайт

При мобильном рассмотрение:

Адаптивный вид 404 страницы

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

Установка:

Подключаем в HEAD

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

HTML


CSS

Код
body{
  background-color:#141019;
  background: radial-gradient(at 50% -20%, #908392, #0d060e) fixed;
}

#handboy
{
  animation: swing ease-in-out 1.3s infinite alternate;
  transform-origin: 98% 98%;
  transform-box: fill-box;
   
}

#girllight
{
  animation: swing ease-in-out 1.3s infinite alternate;
  transform-origin: 0% 97%;
  transform-box: fill-box;
}

#hairgirl
{
  animation: swinghair ease-in-out 1.3s infinite alternate;
  transform-origin: 60% 0%;
  transform-box: fill-box;
   
}

#zero
{
  transform-origin:bottom;
  transform-box:fill-box;
   
}

/*************swing************/
@keyframes swing {
  0% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

/*************swing hair************/
@keyframes swinghair {
  0% { transform: rotate(6deg); }
  100% { transform: rotate(-6deg); }
}

JS

Код
anime({
  targets: '.row svg',
  translateY: 10,
  autoplay: true,
  loop: true,
  easing: 'easeInOutSine',
  direction: 'alternate'
});

anime({
  targets: '#zero',
  translateX: 10,
  autoplay: true,
  loop: true,
  easing: 'easeInOutSine',
  direction: 'alternate',
  scale: [{value: 1}, {value: 1.4}, {value: 1, delay: 250}],
  rotateY: {value: '+=180', delay: 200},
});

Здесь страница, которую многие ищут в поиске, где безусловно думают, что она все еще существует. И не понимая, что просто URL-адрес изменился или был введен где-то неправильно, а то и вообще удалена страница, а запрос в поиске какое-то время будет виден.

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

Демонстрация
2020-02-13 Загрузок: 1 Просмотров: 292 Комментарий: (7)

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

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

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

Комментарий: 7
YaVi
YaVi 2020-02-14 18:121
0
Красивая страница. Не успел я) Обогнал ты меня)))
Kosten
Kosten 2020-02-14 21:052
0
Там код большой, она на закладке несколько дней пролежала, потом решил сделать описание, а код под файл расположить.
YaVi
YaVi 2020-02-14 21:083
0
Ну ты красиво расписал её. Вот жалко что нет ссылок, я понимаю что можно отредактировать и сделать их, но они могут не вписаться в дизайн.
Kosten
Kosten 2020-02-14 21:154
0
YaVi, если честно, то в поиске на сайте на закладках 404 страницы, это на тот случай, когда нет времени искать, а разместить нужно, то просто нахожу по красивей страницу, и вписываю на сайт.

Что по ссылкам, по мне там одной кнопки хватит на главную страницу, на некоторых вообще не устанавливают, вероятно это одна из таких.
YaVi
YaVi 2020-02-14 21:185
0
Я прекрасно тебя понимаю, страница отличная и ничего в ней менять не надо)
Kosten
Kosten 2020-02-14 21:196
0
YaVi, кинул в ЛС ссылку на Англоязычный сайт, там материала реально много, все запросы на английском, все что нужно найдешь.
YaVi
YaVi 2020-02-14 21:207
0
Спасибо огромное)
avatar