Современный CSS переопределил веб-разработку благодаря своим мощным функциональным возможностям и выдающимся способностям. CSS — это универсальный инструмент, который предлагает выдающиеся возможности для создания интерактивных и привлекательных веб-страниц. Будь то гибкость дизайна, быстрая настройка, отличные варианты стилизации или продвинутый пользовательский интерфейс (UI) — CSS предлагает комплексные решения для всех потребностей веб-разработки и стилизации. Прежде всего, используя CSS и HTML, вы можете добавлять анимацию и эффекты, написав всего несколько строк кода, что в противном случае было бы трудоемко с использованием JavaScript.
В этом руководстве мы покажем вам шаги по созданию эффекта параллакс-скроллинга с помощью CSS в Chrome.
Предварительные требования
Чтобы следовать этому руководству, вам необходимо иметь базовое понимание HTML и CSS.
Шаг 1. Создание нового проекта
Начнем с создания новой папки проекта и файлов с помощью интерфейса командной строки. Откройте терминал и введите следующую команду, чтобы создать новую папку проекта:
|
1 |
mkdir css-parallax |
Используйте команду cd, чтобы перейти в папку css-parallax :
|
1 |
cd css-parallax |
Затем создайте HTML-файл в папке css-parallax, куда мы поместим весь HTML-код. Назовите файл index.html и откройте его с помощью команды nano :
|
1 |
nano index.html |
Как только наш файл index.html будет готов, давайте двигаться дальше и структурируем веб-страницу, добавив вводный код HTML .
Шаг 2. Структура базового HTML
На этом шаге мы разработаем нашу веб-страницу, добавив код HTML . Добавьте следующие строки кода в файл index.html :
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Parallax Scrolling Effect with CSS</title> </head> <body></body> </html> |
После настройки базовой структуры наших веб-страниц создайте три класса секций — два для фоновых изображений и один для статического однотонного фона. Затем добавьте следующие строки кода в тег <body> :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Before Parallax Scrolling Effect</h1> </section> <section class="section static"> <h1>Welcome to Parallax Scrolling</h1> </section> <section class="section parallax bg2"> <h1>After Parallax Scrolling Effect</h1> </section> </main> ... </body> |
Вставка HTML-кода в тег <body> завершает базовую настройку нашего html.файла. На следующих шагах мы добавим CSS и определим параметры стилизации для каждого элемента.
Шаг 3. Введение в CSS
Давайте стилизуем веб-сайт, добавив файл CSS и создав эффект параллакса. Сначала создайте файл CSS в папке css-parallax — папка, в которую мы поместим все CSS-коды, необходимые для создания эффекта параллакс-скроллинга. После этого вставьте styles.css файл в вашу css-parallax папку с помощью nano команды:
|
1 |
nano styles.css |
Мы начнем стилизацию нашей веб-страницы с класса .wrapper. Класс .wrapper задает свойства перспективы и прокрутки для всей страницы. Начните с класса wrapper и укажите его высоту, переполнение и перспективу. Установите высоту wrapper в постоянное значение, чтобы эффект параллакс-скроллинга работал. В этом руководстве мы установили значение области просмотра с помощью 100vh, чтобы получить полную высоту области просмотра экрана. Вы можете изменить значение vh в соответствии с потребностями вашего проекта. Затем отключите горизонтальную полосу прокрутки экрана, установив свойство overflow-x в значение hidden. Также укажите значение свойства perspective равным 3px. Давайте добавим следующие строки кода в styles.css файл:
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Шаг 4. Добавление стилей для класса .section
После класса wrapper добавьте стили для класса .section. Класс .section определяет свойства размера, отображения и текста для основных разделов. Установите позиционирование как relative, чтобы выровнять относительное позиционирование дочернего элемента .parallax::after и родительского элемента .section. Оставьте высоту области просмотра view-height(vh) равной 100 для получения полной высоты области просмотра экрана. Добавляйте, изменяйте и стилизуйте другие параметры в соответствии с вашими потребностями.
Внутри вашего файла styles.css добавьте следующий код после класса wrapper:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
Затем мы добавим псевдоэлемент и стилизуем его, чтобы создать эффект параллакса и запустить его в действие.
Шаг 5. Добавление стилей для класса .parallax
На этом шаге мы добавим псевдоэлемент для .parallax. Этот псевдоэлемент будет последним дочерним элементом и добавит псевдоэлемент ::after к фоновому изображению, отвечающему за запуск эффекта параллакса. В первой половине кода настраиваются базовые параметры отображения и позиционирования псевдоэлемента. Во второй половине мы добавим свойство transform с помощью CSS-функции translateZ() и установим его значение равным (-1px). Кроме того, добавьте z-index для управления вертикальным расположением слоев.
Добавьте следующий код под классом .section :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 0 0 5px #000; } .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
Шаг 6. Добавление изображений и фона для каждого раздела
Давайте добавим финальные свойства CSS для фоновых изображений и цвета фона статического раздела. Начните с добавления сплошного цвета фона для раздела .static. Установите цвет фона как aqua и добавьте следующий код после класса .parallax::after :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
Класс .static добавляет фон к статическому разделу, у которого нет изображения. Два других раздела с классом .parallax имеют уникальные классы, предназначенные для хранения фоновых изображений. Добавьте URL-адреса фоновых изображений в классы .bg1 и .bg2 соответственно.
В этом руководстве мы используем случайные изображения из Unsplash. Вы также можете использовать изображения с других сайтов, таких как Pixapay, Placekitten, и Pexels, и это лишь некоторые из них, и настраивать их по своему усмотрению. Добавьте следующий код в класс .static :
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
Шаг 7. Подключение CSS к HTML
Теперь, когда мы добавили весь код для эффекта параллакс-скроллинга, давайте свяжем файл styles.css с файлом index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Эффект параллакс-скроллинга с помощью CSS</title> </head> ... |
Откройте index.html, созданный нами на Шаге 2, в браузере Chrome:
Заключение
В этом руководстве мы рассмотрели шаги по настройке работающей веб-страницы с использованием базовой конфигурации. Существует множество других интересных параметров и возможностей настройки, с которыми вы можете поэкспериментировать. Вы можете попробовать добавить эффекты теней, изменить прокрутку изображений и внести другие коррективы, чтобы сделать обучение увлекательным и интересным.
Чтобы глубже погрузиться в темы веб-разработки, ознакомьтесь с этими ресурсами в нашем блоге:
- Руководство по добавлению JavaScript в HTML
- Работа с JavaScript: что такое объекты
- Что такое jQuery и как его использовать
Приятного программирования!
Комментарии
Комментариев пока нет. Будьте первым.