Java, UX, HTML, CSS, WEB-design

Создайте простой эффект прокрутки параллакса в разделе Hero с помощью Pure CSS

Краткое описание по статье Создайте простой эффект прокрутки параллакса в разделе Hero с помощью Pure CSS

Название: Создайте простой эффект прокрутки параллакса в разделе Hero с помощью Pure CSS . Краткое описание: [ad_1] ⭐ В этом уроке вы узнаете, как создать просто . Дата публикации: 23.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

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

Чистый параллакс CSS — пример

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

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

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Часть 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» для абзацев. Поэтому добавьте следующую строку под тегом title, чтобы встроить их с помощью шрифтов Google.

<link href="https://fonts.googleapis.com/css2?family=Lato:[email protected]&family=Roboto+Condensed:[email protected];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%;
   /* 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;
}

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

Чистый параллакс CSS — пока

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

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;
}

Пока ничего интересного мы не сделали. давайте перейдем к Часть 2 где мы создаем настоящую магию (еще всего 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 скрыто, потому что нам не нужна горизонтальная полоса прокрутки из-за созданного трехмерного пространства.

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

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

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

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

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

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

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

Чтобы лучше понять перспективу, преобразования и все это, вы можете обратиться к подробному руководству по 3D-преобразованиям с помощью CSS.

А пока добавьте это свойство в заголовок:

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

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

scale = (perspective - distance) / perspective

Для нашего фонового изображения perspective является 4px и расстояние (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. Но будьте осторожны, чтобы не переусердствовать. Если вы застряли где-то посередине и не смогли добиться желаемого результата, вот полный исходный код.

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

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Создайте простой эффект прокрутки параллакса в разделе Hero с помощью Pure CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Кнопка «Наверх»