Создаем простой эффект параллакс-прокрутки для Hero-раздела с помощью чистого CSS

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

Создаем простой эффект параллакс-прокрутки для Hero-раздела при помощи чистого CSSВам надо иметь базовые знания HTML и CSS. Ближе к концу этого руководства мы затронем пару продвинутых техник CSS, таких как perspective и transform. Давайте начнем.

Мы собираемся разбить это руководство на две основные части. В первой части мы воссоздадим почти тот же вид страницы, за исключением эффекта параллакса. То есть 3D-эффекта не будет. Простая прокрутка. Если вы знаете, как это сделать, можете пропустить часть 1. Во второй части мы изучим необходимые продвинутые концепции 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 Fonts.

<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">

Вы можете загрузить фоновое изображение, используемое в демонстрации, с Pexels или добавить собственное. Но не забудьте назвать его 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%;   /* Стили текста */   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;}

Сейчас вы увидите следующее:

Создаем простой эффект параллакс-прокрутки для Hero-раздела при помощи чистого CSSДобавьте следующие стили для текстового раздела:

section{   width: 100%;   background: white;}.container {   margin: auto; /* Чтобы отцентрировать текст горизонтально */   max-width: 1000px; /* Лимит по ширине для экстра больших экранов  */   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: Добавление эффекта параллакса

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

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

body {   /* Здесь существующие стили */   perspective: 4px; /* Глубина */   overflow-x: hidden;   overflow-y: scroll;}

Для overflow-x задано значение hidden, так как мы не хотим, чтобы добавлялась горизонтальная полоса прокрутки.

Нам также необходимо установить overflow: hidden для корневого элемента.

html {   /* Здесь существующие стили */   overflow: hidden;}

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

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

header::before {   /* Здесь существующие стили */   transform: translateZ(-4px);}header div {   /* Здесь существующие стили */   transform: translateZ(-2px);}

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

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

Добавьте следующее свойство для заголовка:

header {   /* Здесь существующие стили */   transform-style: preserve-3d;}

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

scale =(perspective — distance) / perspective

Для нашего фонового картинки perspective равно 4px, а дистанция (translateZ) равна -4px. Рассчитываем:

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

Для header div масштаб будет 1,5. Давайте реализуем данные изменения. Измените свойства transform для обоих элементов.

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

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

section{   /* Здесь существующие стили */   position: relative;   z-index: 2;}

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

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

СКАЧАТЬ ИСХОДНЫЙ КОД

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *