Крутые эффекты для прокрутки на сайте с помощью CSS и JS

9 226 любопытных

Привет, друзья! Тут я собрал несколько крутых сниппетов которые помогут реализовать вам крутой сайт с красивой прокруткой! Всё бесплатно, качайте!

Рекомендую:

Несколько вариантов кнопок для прокрутки вниз

See the Pen <a href="https://codepen.io/nxworld/pen/OyRrGy">demo:CSS scroll down button</a> by Naoya (<a href="https://codepen.io/nxworld">@nxworld</a>) on <a href="https://codepen.io">CodePen</a>.

Скачать

Линия, которая показывает сколько осталось до конца страницы

See the Pen <a href="https://codepen.io/MadeByMike/pen/ZOrEmr">CSS only scroll indicator</a> by Mike (<a href="https://codepen.io/MadeByMike">@MadeByMike</a>) on <a href="https://codepen.io">CodePen</a>.

Скачать

Крутой и анимированный указатель для прокрутки вниз на CSS и JS

See the Pen <a href="https://codepen.io/hexagoncircle/pen/akWOdE">CSS Site Scroll Micro Animation</a> by Ryan Mulligan (<a href="https://codepen.io/hexagoncircle">@hexagoncircle</a>) on <a href="https://codepen.io">CodePen</a>.

Скачать

Крутая шапка для сайта с анимацией при прокрутке

See the Pen <a href="https://codepen.io/osublake/pen/NdEONL">Scroll Header</a> by Blake Bowen (<a href="https://codepen.io/osublake">@osublake</a>) on <a href="https://codepen.io">CodePen</a>.

Скачать

Меня с указателем при прокрутке на CSS

See the Pen <a href="https://codepen.io/ettrics/pen/WRbGRN">Sticky Slider Navigation (Responsive)</a> by Ettrics (<a href="https://codepen.io/ettrics">@ettrics</a>) on <a href="https://codepen.io">CodePen</a>.

Скачать

Изменение цвета при прокрутке на JS и CSS

See the Pen <a href="https://codepen.io/Funsella/pen/dpRPYZ">Changing background-color while scrolling version 2</a> by JP Nothard (<a href="https://codepen.io/Funsella">@Funsella</a>) on <a href="https://codepen.io">CodePen</a>.

Скачать

Горизонтальный параллакс при прокрутке станицы

See the Pen <a href="https://codepen.io/SitePoint/pen/MKExrG">Side Scrolling from jInvertScroll</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io">CodePen</a>.

Скачать

Крутая анимация при прокрутке страницы

See the Pen <a href="https://codepen.io/michalsnik/pen/WxNdvq">AOS — animations</a> by Snik (<a href="https://codepen.io/michalsnik">@michalsnik</a>) on <a href="https://codepen.io">CodePen</a>.

Скачать