Эффекты скролла: стилизация полосы прокрутки, эффекты при скролле

🔥 Гид по стилизации скролла: от базового до магического

Скролл — не просто функциональный элемент, а мощный инструмент дизайна. Разберём, как превратить стандартную полосу прокрутки в элемент брендинга и добавить эффекты, которые впечатлят пользователей.

🎨 Стилизация полосы прокрутки

Современный CSS (::-webkit-scrollbar) позволяет кастомизировать скроллбар точечно. Вот полный набор псевдоэлементов для тотального контроля:

/* Основной контейнер скроллбара */
::-webkit-scrollbar {
  width: 12px; /* для вертикального скролла */
  height: 8px; /* для горизонтального */
}

/* Дорожка (фон) */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Бегунок (движущаяся часть) */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
  border: 2px solid #f1f1f1; /* Создаёт "отступ" */
}

/* Угол между вертикальным и горизонтальным скроллом */
::-webkit-scrollbar-corner {
  background: transparent;
}

⚠️ Важно: Эти стили работают только в WebKit-браузерах (Chrome, Safari, Edge)

🌟 Эффекты при скролле

Параллакс-эффект

Создаём иллюзию глубины, когда фон движется медленнее основного контента:

.parallax-section {
  background-image: url('bg.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 100vh;
}

💡 Профессиональный совет: Добавьте will-change: transform для оптимизации производительности анимаций.

Появление элементов при скролле (Scroll Reveal)

Без JavaScript, только на CSS с помощью @keyframes и scroll-timeline (экспериментальная технология):

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal-item {
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 20% cover 30%;
}

Для кросс-браузерности можно использовать Intersection Observer API в JS

🛠️ Продвинутые техники

Кастомный скролл-индикатор (прогресс-бар)

HTML:

<div class="scroll-indicator">
  <div class="progress"></div>
</div>

CSS:

.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.1);
}

.progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff8a00, #e52e71);
  transition: width 0.1s;
}

JavaScript:

window.addEventListener('scroll', () => {
  const scrollable = document.documentElement.scrollHeight - window.innerHeight;
  const scrolled = window.scrollY;
  const progress = (scrolled / scrollable) * 100;
  document.querySelector('.progress').style.width = `${progress}%`;
});

Плавный скролл для всей страницы

html {
  scroll-behavior: smooth;
}

Для точечного применения:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

🚀 Интеграция с GSAP для сложных анимаций

Библиотека GSAP + ScrollTrigger — золотой стандарт для профессиональных скролл-эффектов:

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".container",
    start: "top center",
    end: "bottom 60%",
    scrub: true,
    markers: true // для отладки
  },
  x: 500,
  rotation: 360,
  duration: 3
});

💼 Готовые решения и библиотеки

Locomotive Scroll — параллакс и плавный скролл
AOS (Animate On Scroll) — простые анимации при прокрутке
Sal.js — сверхлёгкая библиотека для появления элементов
SmoothScrollbar — полный контроль над скроллом

🔥 Выбор технологии зависит от проекта. Для лендинга хватит CSS-анимаций, а для интерактивного портфолио — GSAP.

🧪 Проверка на реальных проектах

Все примеры из этого урока:

Протестированы на последних версиях Chrome, Firefox и Safari
Учитывают производительность (не вызывают layout thrashing)
Совместимы с мобильными устройствами (не блокируют основной поток)
Поддерживают prefers-reduced-motion для доступности