« Parallax страница ошибки 404 с помощью CSS и JS »

Описание материала:

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

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

Прежде чем делиться исходным кодом, давайте поговорим об этом. Сначала мы создали макет, используя HTML-теги div, section, p и т.д. Мы создали 3 div контента, и у каждого div есть 3 элемента для движущихся строк. Также в файле HTML мы связали другие файлы, такие как CSS, JS.

Теперь, используя CSS, мы разместил все элементы в нужном месте, как вы можете видеть на превью. С помощью CSS мы выполнили основные работы, такие как размер, положение, поля, отступы и т.д. Мы интенсивно использовали команду CSS @keyframe для создания анимации, а в свойстве animation мы использовали cubic-bezier () для определения кривой анимации. Это также адаптивный дизайн, для которого используется запрос CSS @media.

Файл JS содержит только 2 строки кода, потому что там мы использовали выделенную библиотеку для параллакса. Мы использовали parallax.js для создания эффекта параллакса. И в файле JS мы просто должны объединить элемент, которому мы хотим дать эффект. Оставив все остальные вещи, которые вы поймете после получения кодов, я не могу объяснить все в письменном виде.

Установка:

HTML код:

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

<section class="wrapper">
<div class="container">
<div id="PRllax" class="PRllax" data-hover-only="false">
<div class="circle" data-depth="1.2"></div>
<div class="one" data-depth="0.9">
<div class="content">
<span class="piece"></span>
<span class="piece"></span>
<span class="piece"></span>
</div>
</div>
<div class="two" data-depth="0.60">
<div class="content">
<span class="piece"></span>
<span class="piece"></span>
<span class="piece"></span>
</div>
</div>
<div class="three" data-depth="0.40">
<div class="content">
<span class="piece"></span>
<span class="piece"></span>
<span class="piece"></span>
</div>
</div>
<p class="p404" data-depth="0.50">404</p>
<p class="p404" data-depth="0.10">404</p>
</div>
<div class="text">
<article>
<p>Данной страницы не существует!</p>
<button>Перейти на главную сайта</button>
</article>
</div>
</div>
</section>  
   
</body>


CSS код:
Код
@import url("https://fonts.googleapis.com/css?family=Arial&display=swap");

h1,h2,h3,h4,h5,h6,p,ul,li,button,a,i,input,body {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: inherit;
}

body {
  margin: 0;
  padding: 0;
  height: auto;
  font-family: 'Arial', sans-serif;
  background: #5783ff;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow-x: hidden;
}
.wrapper .container {
  margin: 0 auto;
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.wrapper .container .PRllax {
  position: absolute;
  width: 100vw;
  height: 100vh;
  vertical-align: middle;
}
.wrapper .container .one,
.wrapper .container .two,
.wrapper .container .three,
.wrapper .container .circle,
.wrapper .container .p404 {
  width: 60%;
  height: 60%;
  top: 20% !important;
  left: 20% !important;
  min-width: 400px;
  min-height: 400px;
}
.wrapper .container .one .content,
.wrapper .container .two .content,
.wrapper .container .three .content,
.wrapper .container .circle .content,
.wrapper .container .p404 .content {
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: content 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
@keyframes content {
  0% {
  width: 0;
  }
}
.wrapper .container .one .content .piece,
.wrapper .container .two .content .piece,
.wrapper .container .three .content .piece,
.wrapper .container .circle .content .piece,
.wrapper .container .p404 .content .piece {
  width: 200px;
  height: 80px;
  display: flex;
  position: absolute;
  border-radius: 80px;
  z-index: 1;
  animation: leftdir 8s cubic-bezier(1, 0.06, 0.25, 1) infinite both;
}
@keyframes leftdir {
  50% {
  left: 80%;
  width: 10%;
  }
}
@keyframes rightdir {
  50% {
  right: 80%;
  width: 10%;
  }
}
@media screen and (max-width: 799px) {
  .wrapper .container .one,
  .wrapper .container .two,
  .wrapper .container .three,
  .wrapper .container .circle,
  .wrapper .container .p404 {
  width: 90%;
  height: 90%;
  top: 5% !important;
  left: 5% !important;
  min-width: 280px;
  min-height: 280px;
  }
}
@media screen and (max-height: 660px) {
  .wrapper .container .one,
  .wrapper .container .two,
  .wrapper .container .three,
  .wrapper .container .circle,
  .wrapper .container .p404 {
  min-width: 280px;
  min-height: 280px;
  width: 60%;
  height: 60%;
  top: 20% !important;
  left: 20% !important;
  }
}
.wrapper .container .text {
  width: 60%;
  height: 40%;
  min-width: 400px;
  min-height: 500px;
  position: absolute;
  margin: 40px 0;
  animation: text 0.6s 1.8s ease backwards;
}
@keyframes text {
  0% {
  opacity: 0;
  transform: translateY(40px);
  }
}
@media screen and (max-width: 799px) {
  .wrapper .container .text {
  min-height: 400px;
  height: 80%;
  }
}
.wrapper .container .text article {
  width: 400px;
  position: absolute;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 799px) {
  .wrapper .container .text article {
  width: 100%;
  }
}
.wrapper .container .text article p {
  color: white;
  font-size: 18px;
  letter-spacing: 0.6px;
  margin-bottom: 40px;
  text-shadow: 6px 6px 10px #32243E;
}
.wrapper .container .text article button {
  height: 40px;
  padding: 0 30px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 15px 20px rgba(54, 24, 79, 0.5);
  z-index: 3;
  color: #695681;
  background-color: white;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.3s ease;
}
.wrapper .container .text article button:hover {
  box-shadow: 0px 10px 10px -10px rgba(54, 24, 79, 0.5);
  transform: translateY(5px);
  background: #212121;
  color: white;
}
.wrapper .container .p404 {
  font-size: 200px;
  font-weight: 700;
  letter-spacing: 4px;
  color: white;
  display: flex !important;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both;
  animation-delay: 1.2s;
}
@media screen and (max-width: 799px) {
  .wrapper .container .p404 {
  font-size: 100px;
  }
}
@keyframes anime404 {
  0% {
  opacity: 0;
  transform: scale(10) skew(20deg, 20deg);
  }
}
.wrapper .container .p404:nth-of-type(2) {
  color: #36184F;
  z-index: 1;
  animation-delay: 1s;
  filter: blur(10px);
  opacity: 0.8;
}
.wrapper .container .circle {
  position: absolute;
}
.wrapper .container .circle:before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  background-color: rgba(54, 24, 79, 0.2);
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);
  animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
@keyframes circle {
  0% {
  width: 0;
  height: 0;
  }
}
@media screen and (max-width: 799px) {
  .wrapper .container .circle:before {
  width: 400px;
  height: 400px;
  }
}
.wrapper .container .one .content:before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background-color: rgba(54, 24, 79, 0.3);
  border-radius: 100%;
  box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);
  animation: circle 0.8s 0.4s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
@media screen and (max-width: 799px) {
  .wrapper .container .one .content:before {
  width: 300px;
  height: 300px;
  }
}
.wrapper .container .one .content .piece {
  background: linear-gradient(90deg, #8077EA 13.7%, #EB73FF 94.65%);
}
.wrapper .container .one .content .piece:nth-child(1) {
  right: 15%;
  top: 18%;
  height: 30px;
  width: 120px;
  animation-delay: 0.5s;
  animation-name: rightdir;
}
.wrapper .container .one .content .piece:nth-child(2) {
  left: 15%;
  top: 45%;
  width: 150px;
  height: 50px;
  animation-delay: 1s;
  animation-name: leftdir;
}
.wrapper .container .one .content .piece:nth-child(3) {
  left: 10%;
  top: 75%;
  height: 20px;
  width: 70px;
  animation-delay: 1.5s;
  animation-name: leftdir;
}
.wrapper .container .two .content .piece {
  background: linear-gradient(90deg, #f79d00 0%, #64f38c 100%);
}
.wrapper .container .two .content .piece:nth-child(1) {
  left: 0%;
  top: 25%;
  height: 40px;
  width: 120px;
  animation-delay: 2s;
  animation-name: leftdir;
}
.wrapper .container .two .content .piece:nth-child(2) {
  right: 15%;
  top: 35%;
  width: 180px;
  height: 50px;
  animation-delay: 2.5s;
  animation-name: rightdir;
}
.wrapper .container .two .content .piece:nth-child(3) {
  right: 10%;
  top: 80%;
  height: 20px;
  width: 160px;
  animation-delay: 3s;
  animation-name: rightdir;
}
.wrapper .container .three .content .piece {
  background: linear-gradient(90deg, #3498db 0%, #2c3e50 100%);
}
.wrapper .container .three .content .piece:nth-child(1) {
  left: 25%;
  top: 35%;
  height: 20px;
  width: 80px;
  animation-name: leftdir;
  animation-delay: 3.5s;
}
.wrapper .container .three .content .piece:nth-child(2) {
  right: 10%;
  top: 55%;
  width: 140px;
  height: 40px;
  animation-name: rightdir;
  animation-delay: 4s;
}
.wrapper .container .three .content .piece:nth-child(3) {
  left: 40%;
  top: 68%;
  height: 20px;
  width: 80px;
  animation-name: leftdir;
  animation-delay: 4.5s;
}


JS код:
Код
var PRllax = document.getElementById('PRllax');
var parallax = new Parallax(PRllax);


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Меню и навигация | Просмотров: 62

Теги к материалу: помощью, css, JS, 404, страница, Parallax, ошибки, html

Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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