С информацией
Только заголовки

Перелистывание изображений при скроллинге

Красивый эффект смены изображений колесом прокрутки мыши на WebGL

Данный слайдер не имеет стрелок и точек, а перелистывание фотографий происходит при скроллинге страницы.

Работает он на библиотеках TweenMax и three.js

Читать далее

Индикатор прокрутки страницы

Индикатор, показывающий глубину прокрутки в процентах и в виде линии.

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

Читать далее

Анимация элементов при прокрутке — WOW.js

Скрипт WOW.js для анимации элементов при прокрутке страницы вниз.

Ранее уже была заметка для добавления анимационных эффектов при прокрутке страницы c jQuery плагином ScrollMe.

Скрипт WOW.js использует библиотеку animate.css, благодаря чему имеет больше возможностей, и не требует никакие библиотеки на JavaScript

Читать далее

Фиксация блока при прокрутке

2 варианта зафиксировать блок при прокрутке страницы (на jQuery и на чистом CSS)

Существует много различных плагинов, чтобы "залепить" блок на месте, когда страница прокручивается вниз. И некоторые из них, мягко говоря, ужасные и дергают страницу вверх в момент, когда блок меняет свою позицию на фиксированную.

"Залипание" блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS

Читать далее

Вертикальная прокрутка fakeScroll

Замена стандартной вертикальной полосы прокрутки на пользовательскую скриптом fakeScroll

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

С другой стороны, есть мощные плагины с массой настроек, в которых зачастую нет необходимости.

fakeScroll — очень легкий скрипт (4.1кб) для стилизации вертикальной полосы прокрутки без использования библиотек. А только это в основном и требуется, например, для оформления ограниченного по высоте блока с большим количеством информации.

Читать далее

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

Эффект параллакса накладываемый на теги изображений, а не на фон

simpleParallax — это простой и легкий JavaScript без каких-либо дополнительных библиотек. Он применяет эффект параллакса непосредственно к тегам изображения, а не к фону.

Читать далее

Фиксация сайдбара при прокрутке вверх и вниз

Плагин Theia Sticky Sidebar для фиксации боковой колонки при прокрутке страницы

Зафиксировать боковую колонку сайта можно двумя способами:

1 Зафиксировать весь сайдбар вверху и внизу страницы. Когда заканчивается колонка, она останавливается, а при прокрутке вверх опять листается до конца. Данный вариант рассмотрен в этой заметке.

2 Зафиксировать определенный блок сайдбара. Когда при прокрутке вниз до определенного блока, он фиксируется и постоянно остается видимым. Этот вариант рассмотрим в будущем.

Читать далее

Кнопка "вверх" и варианты ее оформления

Установка на сайт кнопки, возвращающей на верх страницы, и варианты ее оформления

Все варианты кнопок реализованы довольно просто и не используют какие-либо плагины, однако для их работы требуется библиотека jQuery

Читать далее

Анимационные эффекты при прокрутке страницы

jQuery плагин ScrollMe для добавления простых анимационных эффектов на веб-страницы.

По мере прокрутки страницы плагин ScrollMe может масштабировать, поворачивать, трансформировать и изменять прозрачность элементов на странице. Он легко настраивается и не требует дополнительных строк javascript.

Читать далее