Оглавление:
Изучив это руководство вы узнаете, как создать простой эффект параллакс-прокрутки для Hero-раздела целевой страницы на чистом CSS. Прокрутка с параллаксом — это эффект, при котором различные визуальные элементы на странице перемещаются с разной скоростью при прокрутке пользователем. Это создает трехмерный эффект, добавляющий ощущение глубины и улучшающий впечатление посетителей. Приведенный ниже GIF демонстрирует то, что вы научитесь создавать к концу изучения этого руководства.
Вам необходимо иметь базовые знания 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.
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; }Теперь вы увидите следующее:
Кроссбраузерный эффект размытия изображения с помощью 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 Grid
Если вы сейчас просмотрите страницу в браузере, то увидите, что пока ничего не изменилось. Это потому, что мы только создали трехмерное пространство, но не трансформировали какие-либо объекты внутри него.
Эффект параллакса возникает, когда два элемента (или более) размещаются на разном расстоянии от пользователя. Для этого мы используем 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. Но будьте осторожны, не переборщите. Если вы где-то застряли и не смогли добиться желаемого результата, изучите полную версию исходного кода.
СКАЧАТЬ ИСХОДНЫЙ КОД
Источник: www.internet-technologies.ru
