Апрель 27, 2015 Запись была обновлена
Классный эффект при прокрутке окна
Возможно вы видели такие плагины для браузеров, которые позволяют не просто показывать страницу статично, но и добавлять некоторые эффекты. Например, одним из таких эффектов является «отскок» страницы, как на iOS/Android. В браузере Mozilla Firefox это можно сделать с помощью плагина Yet Another Smooth Scrolling. Но большинство пользователей даже не знают о нем, поэтому можно сделать данный эффект у себя на сайте с помощью библотеки FancyScroll.js.
Реальный пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться?
Для начала вам необходимо скачать и подключить библиотеку jQuery(она находится здесь) и Fancy Scroll(ее можно скачать здесь):
1 2 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.fancy-scroll.js"></script> |
А затем вставить код, который приведен ниже, в тело вашей страницы:
1 2 3 | $(window).fancy_scroll({ animation: "bounce" }); |
Это действительно очень просто. Давайте рассмотрим какие параметры может принимать данная функция:
- animation — данное свойство может принимать значение Glow(подсветка) и значение Bounce(тогда окно будет отскакивать при прокрутке).
- bounceDistance — данное свойство предназначено, если вы в первом пункте выбрали значение Bounce. Оно задает дистанцию отскока в пикселях. Значение задается без указания «px» в конце и без кавычек.
- glowColor — если в первом пункте вы поставили значение Glow, тогда вы можете задавать цвет подсветки. Цвет задается как обычно в шестнадцатеричном виде.
- animDuration — данное свойство отвечает на длину анимации по времени. Задается в кавычках с указанием в конце секунд(«0.2s») или миллисекунд(«200ms»).
- animEasing — с помощью данного свойства можно задавать свои собственные эффекты при прокрутке. А создать эффекты можно с помощью данного сервиса — CSS Easing Animation Tool.
- innerWrapper — определяет селектор блока к которому будет применена данная анимация. По умолчанию «.innerWrapper». Нельзя выбрать всю страницу, но можно задать общий контейнер и ему присвоить данный класс.
Вывод
Интересный плагин, который позволит выделить таким образом ваш сайт. Не знаю как с тем чтобы применять ко всей странице, но для прокрутки окон внутри страницы очень даже неплохо смотрится.
Успехов!
Источник: www.onextrapixel.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Спасибо за статью!Ответьте пожалуйста,применим ли данный плагин в сайте на движке WordPress,и если да,укажите точнее место вставки кода.Заранее благодарю.
Здравствуйте, Дмитрий. Данный плагин можно применить даже на простом HTML сайте. Для этого необходимо:
1. Подключить jQuery библиотеку и Fancy Scroll(как написано в статье).
2. Затем вставить примерно такой код в любое место вашего шаблона между тегами body:
$(".small-main").fancy_scroll({
innerWrapper: ".innerWrapper",
animation: "glow",
glowColor: "#F7003B",
animDuration: "0.3s",
animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)",
});
где ".small-main" — это класс, в котором находится блок к которому будет применяться данный эффект. Все остальные свойства описаны в статье. Если еще будут вопросы — пишите. 🙂