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

Для начала вам необходимо иметь базовые знания HTML и CSS. Мы погрузимся в несколько продвинутых тем CSS, таких как perspective и transform ближе к концу.

Мы собираемся разбить это руководство на две части. В первой части мы добьемся почти того же внешнего вида страницы, за исключением эффекта параллакса. То есть 3D-эффекта не будет. Простая прокрутка. Если вы уже знаете, как это сделать, можете пролистать первую часть. Во второй части мы изучим необходимые расширенные концепции CSS и создадим эффект параллаксной прокрутки.

Часть 1: Без параллакса

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

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте базовый скелет HTML. Если вы используете Visual Studio Code, все, что вам нужно сделать, это ввести «!» и нажмите Enter. Вы получите это.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body> 
 
</body>
</html

Я использовал шрифт Roboto для заголовка и Lato для абзацев. Поэтому добавьте следующую строку под тегом заголовка, чтобы встроить их с помощью шрифтов Google.

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto+Condensed:wght@300;700&display=swap" rel="stylesheet">

Создайте свою таблицу стилей и назовите ее style.css. Свяжите таблицу стилей с вашим HTML-документом под ссылкой Font Awesome CDN, используя

<link rel="stylesheet" href="style.css">

Вы можете загрузить любое фоновое изображение. Но не забудьте назвать это bg.jpg.

HTML

Добавьте следующий HTML-код в body заголовок:

<header>
   <div>
       <h1>Parallax Scrolling Effect</h1>
       <h2>Create this simple parallax effect using pure CSS</h2>
   </div>
</header>

Добавьте текстовый раздел ниже.

<section>
   <div class="container">
       <h3>Some cool title here</h3>
       <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis. Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio voluptatibus ab laboriosam, quia consectetur atque minus?
       </p>
       <p>
           Adipisci amet aut sint voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.
 
       </p>
   </div>
</section>

Обо всем остальном теперь позаботится CSS.

CSS

В style.cssначнем с некоторых общих стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

Добавьте эти стили в html и body:

html {
   width: 100%;
   height: 100%;
}
body {
   width: 100%;
   height: 100%;
   /* Text styles */
   font-family: 'Lato',sans-serif;
   font-size: 18px;
   font-weight: 300;
   color: #212121;
}

Сделайте так, чтобы область headerпросмотра занимала всю ширину и высоту.

header {
   width: 100%;
   min-height: 100vh;
   position: relative;
}

Создадим ::before псевдоэлемент для заголовка и добавим фоновое изображение.

header::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: block;
   background: url('bg.jpg');
   background-size: cover;
   z-index: 0;
}

Теперь вы можете видеть, как ваше изображение занимает весь экран. Теперь давайте вынесем текст на передний план и придадим ему необходимый стиль:

header div {
   position: absolute;
   z-index: 1;
   top: 50%;
   padding: 0 30px;
   font-family: 'Roboto Condensed', sans-serif;
}
header h1 {
   font-size: 4.5rem;
   font-weight: 700;
   color: #009688;
}
header h2 {
   font-size: 2.2rem;
   font-weight: 300;
}

Теперь вы можете это увидеть:

Добавьте их, чтобы стилизовать текстовый раздел:

section{
   width: 100%;
   background: white;
}
.container {
   margin: auto; /* To center the text horizontally */
   max-width: 1000px; /* Limiting the width for extra large screens */
   padding: 80px 40px;
}
.container h3 {
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: 700;
   font-size: 3rem;
}
.container p {
   padding-top: 30px;
   line-height: 1.8;
}

Пока мы еще не сделали ничего интересного. Давайте перейдем ко второй части, где мы создадим настоящую магию (всего на 8 строк CSS).

Часть 2: Добавление эффекта параллакса

Чтобы создать эффект параллакса, нам нужно создать ощущение глубины, добавив 3-е измерение. Свойство CSS perspective поможет нам в этом. Допустим, мы добавляем perspective:20px к элементу. Это дает элементу глубину 20 пикселей. Это означает, что создается трехмерное пространство, и поэтому дочерние элементы могут быть преобразованы, чтобы они казались расположенными рядом или далеко от зрителя, создавая ощущение глубины.

Итак, давайте добавим perspective к нашему body элементу вместе со overflow свойствами.

body {
   /* Existing styles here */
   perspective: 4px; /* The depth */
   overflow-x: hidden;
   overflow-y: scroll;
}

overflow-x Скрыто, потому что мы не хотим, горизонтальную полосу прокрутки, возникающую в результате 3D.

Нам также нужно установить overflow: hidden корневой элемент.

html {
   /* Existing styles here */
   overflow: hidden;
}

Если вы сейчас проверите свой браузер, то еще ничего не изменилось. Это потому, что мы только что создали трехмерное пространство, но не трансформировали какие-либо объекты внутри.

Эффект параллакса возникает, когда два или более элемента размещаются на разном расстоянии от зрителя. Для этого мы используем transform свойство CSS и «перемещаем» объекты по оси z. Итак, давайте трансформируем фоновое изображение и div внутри заголовка.

header::before {
   /* Existing styles here */
   transform: translateZ(-4px);
}
header div {
   /* Existing styles here */
   transform: translateZ(-2px);
}

Мы отдаляем фоновое изображение на 4px от зрителя и отводим заголовки на 2px. Когда вы прокручиваете страницу вниз, кажется, что они движутся с разной скоростью. Проверьте свой браузер сейчас. Все еще ничего не подходит

Когда мы хотим, чтобы объекты трансформировались в трехмерном пространстве, нам нужно дополнительное transform-style свойство. Это свойство при применении к элементу определяет, расположены ли дочерние элементы этого элемента в трехмерном пространстве или сглажены.

Добавьте это свойство в заголовок:

header {
   /* Existing styles here */
   transform-style: preserve-3d;
}

Теперь посмотрите на результат в своем браузере. Удивлены, увидев, что ваше фоновое изображение и заголовки уменьшились в размере? Прокрутите вниз, и вы увидите, что эффект параллакса действительно создается! Почему уменьшились эти два элемента? Это потому, что они отдалились от вас. Объекты, которые движутся дальше, кажутся меньше. Но как это исправить? В scale фактор должен быть добавлен вместе с translateZ и скорректировать размер.

scale = (perspective - distance) / perspective

Для нашего фонового изображения perspectiveis 4px и distance ( translateZ) равно -4px. Рассчитать:

scale = (4 - (-4))/4 = 8/4 = 2

Аналогично для header div шкалы 1.5. Давайте включим их. Измените transform свойства обоих элементов, которые нужно включить scale.

header::before {
   transform: translateZ(-4px) scale(2);
}
header div {
   transform: translateZ(-2px) scale(1.5);
}

Это исправляет. Теперь прокрутите вниз. Вы видите эффект? Единственная проблема в том, что наш текстовый раздел перекрывается заголовком. Решение - установить более высокое z-index значение section (вместе с position свойством, иначе z-index не сработает).

section{
   /* Existing styles here */
   position: relative;
   z-index: 2;
}

И вот оно! Достигнут простой аккуратный эффект прокрутки параллакса для нашего раздела.

Развивайте этот недавно приобретенный навык и создавайте красивые веб-сайты с параллакс-прокруткой на чистом CSS. Но будьте осторожны, не переборщите. Если вы застряли где-то посередине и не смогли добиться желаемого результата, вот полный исходный код.

Скачать исходный код

Комментарии ()

    Написать комментарий