Как создать скроллинг на своем сайте с помощью CSS?

Вы хотите создать эффекты параллакса и скроллинга на странице, но не знаете, с чего начать? Не нужно сразу обращаться к Javascript: есть более простые варианты. В этой статье мы расскажем, как все сделать при помощи СSS-кода. Также объясним, с какими браузерами эффекты работать не станут. 

Как Создать Скроллинг На Своем Сайте С Помощью CSS  (1)

Если нужен плавный скроллинг 

Чтобы создать простую прокрутку из одной части страницы в другую, нужно использовать CSS-свойство scroll-behavior. Вот его основные значения:

  1. Auto. Стоит по умолчанию. 
  2. Smooth. Плавный переход.
  3. 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>

Image1

Шаг 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>

Image12

Благодаря значению 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>

Image4

Шаг 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>

Image3

В итоге получился параллакс на странице. 

Примечание. Чтобы убрать этот эффект, достаточно вместо background-attachment: fixed указать в коде background-attachment: scroll. Изображение будет двигаться вместе с текстом: 

Image6

Совместимость с браузерами

Свойство 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>

Image5

Шаг 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>

Image8

В итоге на сайте движутся три объекта. Перечислим их от самого медленного до самого быстрого: 

  1. изображение на фоне блока 2;
  2. заголовок «Блок 2»;
  3. блок 1 с оранжевым фоном. 

Так выглядит многоуровневый скроллинг.

Пример 2

Рассмотрим, как зафиксировать какой-либо элемент на сайте во время прокрутки. Например, на сайте cloud.timeweb.com есть такой закрепленный блок: 

Image2

Шаг 1. Напишем код с двумя текстовыми блоками таким образом: 

<html>
<head> </head>
<h1>Зафиксированный элемент</h1>
<div class="extra"></div>

<div class="wrap">
  <div class="elem">
    Элемент
  </div>
</div>
</html>

Image9

Шаг 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>

Image10

При помощи свойства значения 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>

Image7

Шаг 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>

Image11

Так выглядит горизонтальная прокрутка страницы, которая условно разделена на несколько частей с текстом. 

Заключение 

Создание эффекта скроллинга — это несложный процесс. Только при помощи свойств CSS можно сделать так, чтобы пользователь видел необычные переходы между блоками сайта при прокрутке. 

В некоторых случаях нужны длинные коды: например, для многоуровневого варианта, при котором каждый блок на странице движется с уникальной скоростью. Но это в любом случае лучше, чем создавать подобные переходы на JavaScript.

Telegram
VK
Скопировать ссылку
Как использовать Axios в React
Как использовать Axios в React
Как пользоваться SSH
Как пользоваться SSH

Зарегистрируйтесь и начните пользоваться
сервисами Timeweb Cloud прямо сейчас

15 лет опыта
Сосредоточьтесь на своей работе: об остальном позаботимся мы
165 000 клиентов
Нам доверяют частные лица и компании, от небольших фирм до корпораций
Поддержка 24/7
100+ специалистов поддержки, готовых помочь в чате, тикете и по телефону