Как создать скроллинг на своем сайте с помощью CSS?
Вы хотите создать эффекты параллакса и скроллинга на странице, но не знаете, с чего начать? Не нужно сразу обращаться к Javascript: есть более простые варианты. В этой статье мы расскажем, как все сделать при помощи СSS-кода. Также объясним, с какими браузерами эффекты работать не станут.
Если нужен плавный скроллинг
Чтобы создать простую прокрутку из одной части страницы в другую, нужно использовать CSS-свойство scroll-behavior. Вот его основные значения:
- Auto. Стоит по умолчанию.
- Smooth. Плавный переход.
- Instant. Быстрый переход.
Так выглядит CSS-код на примере со вторым значением и условным селектором p:
p {
scroll-behavior: smooth;
}
Далее мы покажем на примере, как сделать плавный переход от одной части сайта к другой при помощи значения smooth. В этом случае пользователь увидит переход при нажатии на гиперссылку, ведущую к другой части с текстом.
Пример с HTML-кодом
Шаг 1. Создадим два блока с ссылками друг на друга:
<html>
<body>
<head></head>
<h1>Плавная прокрутка</h1>
<div class="main" id="блок1">
<h2>Блок 1</h2>
<p>Перейди по гиперссылке, чтобы увидеть плавный скроллинг.</p>
<a href="#блок2">Нажми сюда, чтобы перейти к Блоку 2.</a>
</div>
<div class="main" id="блок2">
<h2>Блок 2</h2>
<a href="#блок1">Нажми сюда, чтобы перейти к Блоку 1.</a>
</div>
</body>
</html>Шаг 2. Добавим плавный скроллинг с помощью кода CSS внутри тега <head>. Код состоит из cвойства scroll-behavior и значения smooth. Еще выберем цвета и высоту для разных частей с текстом: розовый и желтый.
<head>
<style>
html {
scroll-behavior: smooth;
}
#блок1 {
height: 1000px;
background-color: #ffa3f6;
}
#блок2 {
height: 1000px;
background-color: #fffc9c;
}
</style>
</head>Благодаря значению smooth удалось добиться плавного скроллинга на веб-странице.
Совместимость с браузерами
Свойство scroll-behavior работает почти со всеми популярными браузерами: Google Chrome, Firefox, Safari и Opera. Исключение — Internet Explorer и старые версии браузеров. Например, на Safari версии 15.2–15.3 свойство работать не станет.
Если нужен параллакс
Parallax — это эффект, при котором элементы заднего плана движутся быстрее или медленнее, чем объекты на переднем плане. Например, пользователь прокручивает страницу и видит, что фоновое изображение движется с одной скоростью, а текст — с другой.
Пример с HTML-кодом
В этом случае мы сделаем так, чтобы фоновая картинка вообще не двигалась во время скроллинга.
Шаг 1. Напишем код, в котором будет большой текстовый блок фиолетового цвета:
<html>
<head></head>
<body>
<h1>Прокрутите страницу дальше</h1>
<div class="paral"></div>
<div style="height:550px;background-color:#bf89e0;font-size:50px">
Этот текст нужен просто для того, чтобы продемонстрировать эффект. Вам стоит прокрутить страницу вверх и вниз — текстовый блок будет двигаться, а изображение останется на месте.
</div>
<div class="paral"></div>
</body>
</html>Шаг 2. Рассмотрим код CSS. В нем будет ссылка на изображение, которая станет фоновым благодаря значению fixed в свойстве background-attachment.
<style>
body, html {
height: 90%;
}
.paral {
background-position: center;
background-attachment: fixed;
background-size: cover;
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80');
height: 90%;
}
</style>В итоге получился параллакс на странице.
Примечание. Чтобы убрать этот эффект, достаточно вместо background-attachment: fixed указать в коде background-attachment: scroll. Изображение будет двигаться вместе с текстом:
Совместимость с браузерами
Свойство background-attachment работает с Google Chrome, Firefox, Opera, Internet Explorer и другими браузерами. Исключение — Safari, Android Browser и мобильная версия Opera.
Дополнительные примеры
Чтобы лучше разобраться с CSS-свойствами, рассмотрим другие эффекты для прокрутки на сайте.
Пример 1
По шагам рассмотрим, как добиться эффекта многоуровневого скроллинга. В этом случае несколько объектов на сайте будут двигаться с разной скоростью при прокрутке.
Шаг 1. Напишем две строки следущим образом:
<html>
<head> </head>
<section class="block1">
<h1>Блок 1</h1>
</section>
<section class="block2">
<h1>Блок 2</h1>
</section>
</html>Шаг 2. Добавим CSS-код внутри тега <head>. Сначала укажем параметры и выберем фон на бесплатном фотостоке для блока 2:
<head>
<style>
section {
position: absolute;
min-height: 90vh;
width: 100%;
transform-style: inherit;
position: relative;
}
.block1 {
z-index: 2
background: #ff9012;
;
}
.block2::before {
background: url(https://images.unsplash.com/photo-1536308037887-165852797016?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=826&q=80) top center;
content: '';
top: 1; left: 1; right: 1; bottom: 1;
position: absolute;
display: block;
transform: translateZ(-.5px) scale(2);
z-index: -2;
background-size: cover;
}
</style>
</head>Шаг 3. Там же укажем параметры заголовков:
<head>
<style>
…
h1 {
font-size: 3.7rem;
position: absolute;
padding: 0.8rem;
background: #fffcfc;
transform: translateZ(-1px) scale(1) translate(-25%, -25%);
top: 49%;
left: 49%;
text-align: center;
}
.block1 h1 {
z-index: 2;
transform: translate(-49%, -49%);
}
.block2 h1 {
z-index: 2;
transform: translateZ(-.4px) scale(1.2) translate(-39%, -39%);
}
…
</style>
</head>Шаг 4. Определим параметры других элементов:
<head>
<style>
…
*,
*::before,
*::after,
:root {
box-sizing: border-box;
margin: 1;
padding: 1;
}
html {
height: 95%;
overflow: hidden;
}
body {
height: 95%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 0.8px;
transform-style: preserve-3d;
font-size: 40%;
font-family: 'PT Astra Sans';
}
…
</style>
</head>В итоге на сайте движутся три объекта. Перечислим их от самого медленного до самого быстрого:
- изображение на фоне блока 2;
- заголовок «Блок 2»;
- блок 1 с оранжевым фоном.
Так выглядит многоуровневый скроллинг.
Пример 2
Рассмотрим, как зафиксировать какой-либо элемент на сайте во время прокрутки. Например, на сайте timeweb.cloud есть такой закрепленный блок:
Шаг 1. Напишем код с двумя текстовыми блоками таким образом:
<html>
<head> </head>
<h1>Зафиксированный элемент</h1>
<div class="extra"></div>
<div class="wrap">
<div class="elem">
Элемент
</div>
</div>
</html> Шаг 2. Напишем следующий CSS-код внутри тега <head>:
<head>
<style>
body {
font-family: Times New Roman;
}
h1 {
text-align: justify;
}
.wrap {
background-color: #52ff83ab;
width: 90%;
height: 2000px;
margin: 30px;
}
.elem {
background: #6052ff;
width: 150px;
height: 150px;
color: #fcfcfc;
align-items: center;
justify-content: center;
display: flex;
position: fixed;
}
</style>
</head>При помощи свойства значения fixed удалось сделать так, чтобы элемент двигался вместе с прокруткой.
Пример 3
В этом случае разберемся, как сделать горизонтальный скроллинг.
Шаг 1. Создадим четыре строки текста таким образом:
<html>
<head> </head>
<div id="container">
<div id="container2">
<div class="type raz"><div>Раз</div></div>
<div class="type dva"><div>Два</div></div>
<div class="type tri"><div>Три</div></div>
<div class="type nazad"><div>Четыре</div></div>
</div>
</div>
</html>Шаг 2. Добавим CSS-код внутри тега <head>. В коде обозначим размеры текстовых блоков и их цвета.
<style>
body {
font-family: PT Astra Sans;
margin:1;
}
#container .type {
position:relative;
display:inline-block;
width:150vw;
height:99vh;
}
#container .type > div {
position:relative;
width:99px;
height:99px;
color:#080808;
line-height:.8;
top:48%;
left:48%;
font-weight:bold;
font-size:96px;
}
#container {
position:absolute;
overflow-x:scroll;
overflow-y:scroll;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color:#ccc;
width:99vh;
height:99vw;
}
#container2 {
transform: rotate(90deg) translateY(-98vh);
transform-origin: top left;
white-space:nowrap;
font-size:1;
}
.raz {
background-color: #00ff48;
}
.dva {
background-color: #ff00d5;
}
.tri {
background-color: #f00;
}
.nazad {
background-color: #fff71c;
}
</style>Так выглядит горизонтальная прокрутка страницы, которая условно разделена на несколько частей с текстом.
Заключение
Создание эффекта скроллинга — это несложный процесс. Только при помощи свойств CSS можно сделать так, чтобы пользователь видел необычные переходы между блоками сайта при прокрутке.
В некоторых случаях нужны длинные коды: например, для многоуровневого варианта, при котором каждый блок на странице движется с уникальной скоростью. Но это в любом случае лучше, чем создавать подобные переходы на JavaScript.