ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Страница 404 ошибки с подсчетом цифры

Страница 404 ошибки с подсчетом цифры

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

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

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

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

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

Адаптивная страница 404 с подсчетом на CSS

Вид с мобильного аппарата, где уже внесены корректировки по цветовой гамме:

Установочный процесс:

Размешаем по месту:

Код

HTML

Код

<div class="stranitsa_ne_naydena">
  <div class="container-floud">
  <div class="col-xs-12 ground-color text-center">
  <div class="stranitsa_ne_naydenaPage">
  <div class="clip"><div class="kotumasda"><span class="digit nomerOdin"></span></div></div>
  <div class="clip"><div class="kotumasda"><span class="digit nomerDva"></span></div></div>
  <div class="clip"><div class="kotumasda"><span class="digit nomerTretiy"></span></div></div>
  </div>
  <h2>Сожалею! Страница не найдена</h2>
  </div>
  </div>
  </div>

CSS

Код

.stranitsa_ne_naydena .clip .kotumasda {
  height: 180px;
  }
  .stranitsa_ne_naydena .clip:nth-of-type(2) .kotumasda {
  width: 130px;
  }
  .stranitsa_ne_naydena .clip:nth-of-type(1) .kotumasda, .stranitsa_ne_naydena .clip:nth-of-type(3) .kotumasda {
  width: 250px;
  }
  .stranitsa_ne_naydena .digit {
  width: 148px;
  height: 148px;
  line-height: 148px;
  font-size: 115px;
  font-weight: bold;
}
  .stranitsa_ne_naydena h2 {
  font-size: 32px;
  }
  .stranitsa_ne_naydena .stranitsa_ne_naydenaPage {
  margin-top: 10%;
  position: relative;
  height: 250px;
  padding-top: 40px;
  }
  .stranitsa_ne_naydena .stranitsa_ne_naydenaPage .clip {
  display: inline-block;
  transform: skew(-45deg);
  }
  .stranitsa_ne_naydena .clip .kotumasda {
  overflow: hidden;
  }
  .stranitsa_ne_naydena .clip:nth-of-type(2) .kotumasda {
  overflow: hidden;
  position: relative;
  box-kotumasda: inset 20px 0px 20px -15px rgba(136, 136, 136, 0.8), 20px 0px 20px -15px rgba(136, 136, 136, 0.8);
  }

  .stranitsa_ne_naydena .clip:nth-of-type(3) .kotumasda:after, .stranitsa_ne_naydena .clip:nth-of-type(1) .kotumasda:after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 0px;
  z-index: 9999;
  height: 100%;
  width: 10px;
  background: linear-gradient(90deg, transparent, rgba(148, 148, 148, 0.8), transparent);
  border-radius: 50%;
  }
  .stranitsa_ne_naydena .clip:nth-of-type(3) .kotumasda:after {
  left: -8px;
  }
.stranitsa_ne_naydena .digit {
  position: relative;
  top: 8%;
  color: #ececec;
  background: #dc1a1a;
  border-radius: 100%;
  display: inline-block;
  transform: skew(45deg);
}
  .stranitsa_ne_naydena .clip:nth-of-type(2) .digit {
  left: -10%;
  }
  .stranitsa_ne_naydena .clip:nth-of-type(1) .digit {
  right: -20%;
  }
  .stranitsa_ne_naydena .clip:nth-of-type(3) .digit {
  left: -20%;
  }
  .stranitsa_ne_naydena h2 {
  color: #A2A2A2;
  font-weight: bold;
  padding-bottom: 20px;
  }

@media(max-width: 767px) {
.stranitsa_ne_naydena .clip .kotumasda {
  height: 100px;
  }
.stranitsa_ne_naydena .clip:nth-of-type(2) .kotumasda {
  width: 80px;
  }
.stranitsa_ne_naydena .clip:nth-of-type(1) .kotumasda, .stranitsa_ne_naydena .clip:nth-of-type(3) .kotumasda {
  width: 100px;
  }
  .stranitsa_ne_naydena .digit {
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 52px;
  }
  .stranitsa_ne_naydena h2 {
  font-size: 24px;
  }

  .stranitsa_ne_naydena .stranitsa_ne_naydenaPage
  {
  height: 150px;
  }
}

Код

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

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

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

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

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

07 Сентября 2019 Загрузок: 2 Просмотров: 940 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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