Плавная прокрутка на чистом CSS без JS
Простые эффекты при прокрутке страницы
Даже самый простой сайт выглядит в разы лучше, если элементы на странице появляются не сразу, а по мере прокрутки. Хорошая новость:
для этого не нужны сложные библиотеки, а базового JavaScript и CSS вполне достаточно. В этой статье разберём: Статья подойдёт, если ты новичок и только начинаешь разбираться в вебе. Когда пользователь заходит на сайт и видит: — внимание быстро теряется. Эффекты при прокрутке помогают: Даже минимальная анимация уже улучшает восприятие. Идея всегда одна: 1️⃣ элемент сначала...
Плавный скролл на jQuery
Итак, сегодня мы научимся делать плавный скролл на jQuery. Демо на codepen Разметка Создаем 4 кнопки и 4 секции. <button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<div>Секция 1</div>
<div>Секция 2</div>
<div>Секция 3</div>
<div>Секция 4</div> Стили Создадим внутренние отступы — padding и установим серый фон для каждой второй секции для визуального разделения. .section {padding: 70px 0;}.
section:nth-child(2n) {background-color: #eee;} Что получилось Интерактив В jQuery создаем событие клика на кнопку, предварительно проставив классы с префиксом js-...