Лого SiteHere.ru

Классный эффект при прокрутке окна

Классный эффект при прокрутке окна

Возможно вы видели такие плагины для браузеров, которые позволяют не просто показывать страницу статично, но и добавлять некоторые эффекты. Например, одним из таких эффектов является «отскок» страницы, как на 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 комментария к записи
  • дмитрий

    Спасибо за статью!Ответьте пожалуйста,применим ли данный плагин в сайте на движке 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" — это класс, в котором находится блок к которому будет применяться данный эффект. Все остальные свойства описаны в статье. Если еще будут вопросы — пишите. 🙂

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *