ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Темная страница 404 с анимацией CSS

Темная страница 404 с анимацией CSS

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

Вероятно многие видели такой номер страницы с ошибкой на любом веб-сайте. Так как администрация или блогер убирает материал, то какое, то время запрос остается в поисковой системе, вот по такому принципу вы попадаете на несуществующую страницу.

Сегодня мы также создадим страницу ошибки 404, но эта программа будет творческий и уникальной, вот потому что эта страница имеет эффект анимации в фоновом режиме. Сама страница создана с помощью HTML, CSS и JavaScript, где задействована библиотека JavaScript под названием «Practicles» или просто практик.

Код страницы ошибки 404 для страницы


Перед тем как поделиться исходным кодом, как всегда, хочется немного рассказать о самом коде. Где создан «div» и прописан «h1» и «p» внутрь div. В теге «h1» где прописана ошибка, а в теге абзаца написано вернуться назад или что-то свое, это переход на главную страницу сайта.

А фоновая анимация основана на библиотеке JS, где упоминалась выше. Вам остается создать 3 файла для этой для полной установки, но они уже приставлены в материале, первый HTML, второй CSS и один для файла JavaScript + JS.

При проверке, сам текст и ключевое слово на переход:

Страница не существует на CSS

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

Код
<script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>


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

HTML

Код
<div id="vansad_sukedon_makaping">
  <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;">
  </canvas>
</div>

<div class="kasicunc-konsaid">
  <div class="konsaidonu-mapinganed">
  <h1 style="text-shadow: -2px 0 0 rgba(226, 14, 14, 0.7), 2px 0 0 rgba(14, 241, 241, 0.7);"> ОШИБКА 404 </h1>
  <p> <a href="#">ПЕРЕЙТИ НА САЙТ</a></p>
  </div>
</div>

CSS

Код
.kasicunc-konsaid {
  width: 100%;
  height: 100%;
  height: 100vh;
  overflow: hidden !important;
}

h1 {
  font-weight: bold;
  font-size: 75px;
  letter-spacing: 9px;
  text-transform: uppercase;
  text-align: center;
  color: rgb(216, 203, 203);
  margin: 0px;
  padding: 0px;
}

p {
  position: fixed;
  top: 212px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 7.6px;
  text-transform: uppercase;
  text-align: center;
  color: rgb(241,241,241);
  padding-left: 50px;
  margin: 0px;
}

p a {
  color: rgb(247, 240, 240);
  text-decoration: none;
  margin: 0;
  padding: 0;
}

p a:hover {
  color: #757070;
  text-decoration: underline;

}

.konsaidonu-mapinganed {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
  z-index: 3;
  display: block;
}

body {
  margin: 0;
}

canvas {
  display: block;
  vertical-align: bottom;
}

#vansad_sukedon_makaping {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(14,14,14);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

JS

Код
particlesJS('vansad_sukedon_makaping', {
  'particles': {
  'number': {
  'value': 80,
  'density': {
  'enable': true,
  'value_area': 800
  }
  },
  'color': { 'value': '#efeff1' },
  'shape': {
  'type': 'circle',
  'stroke': {
  'width': 0,
  'color': '#191818'
  },
  'polygon': { 'nb_sides': 5 },
  'image': {
  'src': 'img/github.svg',
  'width': 100,
  'height': 100
  }
  },
  'opacity': {
  'value': 0.5,
  'random': false,
  'anim': {
  'enable': false,
  'speed': 1,
  'opacity_min': 0.1,
  'sync': false
  }
  },
  'size': {
  'value': 3,
  'random': true,
  'anim': {
  'enable': false,
  'speed': 40,
  'size_min': 0.1,
  'sync': false
  }
  },
  'line_linked': {
  'enable': true,
  'distance': 150,
  'color': '#efeff1',
  'opacity': 0.4,
  'width': 1
  },
  'move': {
  'enable': true,
  'speed': 6,
  'direction': 'none',
  'random': false,
  'straight': false,
  'out_mode': 'out',
  'bounce': false,
  'attract': {
  'enable': false,
  'rotateX': 600,
  'rotateY': 1200
  }
  }
  },
  'interactivity': {
  'detect_on': 'canvas',
  'events': {
  'onhover': {
  'enable': true,
  'mode': 'grab'
  },
  'onclick': {
  'enable': true,
  'mode': 'push'
  },
  'resize': true
  },
  'modes': {
  'grab': {
  'distance': 140,
  'line_linked': { 'opacity': 1 }
  },
  'bubble': {
  'distance': 400,
  'size': 40,
  'duration': 2,
  'opacity': 8,
  'speed': 3
  },
  'repulse': {
  'distance': 200,
  'duration': 0.4
  },
  'push': { 'particles_nb': 4 },
  'remove': { 'particles_nb': 2 }
  }
  },
  'retina_detect': true
});

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

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

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

Демонстрация
30 Июня 2019 Загрузок: 8 Просмотров: 1188 Комментариев: (4)

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

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

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

Комментарии: 4
BALLAS
BALLAS 06 Февраля 2021 21:401
0
Так должно быть, или я чет не то сделал?
Это ссылка что выдал гугл вебмастер :


В гугл вебмастере была удалена ссылка, по авторским правам. Перехожу по не рабочей ссылке и вижу полную пустоту страницы

Скрин страницы после перехода:


В файловике сайта, вот так сделано: https://u.to/IGUBGw
BALLAS
BALLAS 06 Февраля 2021 21:422
0
Kosten
Kosten 06 Февраля 2021 21:593
0
Все работает, как пример прописал несуществующий страницу и вывело на 404 эту страницу с дизайном.

Пример: https://kinofob.at.ua/yrtuy
BALLAS
BALLAS 06 Февраля 2021 22:124
0
Значит все правильно! спс
avatar