• 2072
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Многие наверное замечали как интересно работают не которые сайты,на
некоторых реализована быстрый скролл,это когда ты нажимаешь кнопку "далее" или просто прокручиваешь страничку колесиком вниз и страничка раз и прокрутилась быстро на высоту вашего экрана.Как это работает вы уже посмотрели в демо. Этот эффект можно использовать для главной,для сайтов визитоки и на что хватит фантазии.
И так приступим
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем папку JS в нашу папку с шаблоном.
2.Ну сама страница должна иметь примерно такой код

Код:
<! doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
3.Перед закрытием тега body подключаем скрипты
Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.scrollify.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/main.js"></script>
Если jquery уже подключен то это подключение
Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
не нужно
4.Немножко документации
Код:
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
section
Селектор для секций (разделов) на странице.
sectionName
Scrollify позволяет определить для каждого раздела своё хеш значение. Это позволяет иметь каждому разделу свою постоянную ссылку, которая задается в атрибуте data. Название атрибута data определяется в параметре 'sectionName'.
easing
Определяет используемый метод easing.
offset
Расстояние в пикселях для комппенсации положения каждого раздела.
scrollbars
true или false - определяет будет ли видна полоса прокрутки.
before
Функция обратного вызова, которая вызвается до того как был вызван метод скроллирования до раздела. Аргументы включают index раздела и массив всех разделов.
after
Функция обратного вызова, которая вызывается после того, как мы прокрутили до нового раздела. Аргументы включают index раздела и массив всех разделов.

Метод движения может быть использован для перехода к конкретному разделу. Можно привязать либо к index-у раздела или к названию раздела определяемому в хеше атрибута data.
Код:
$.scrollify("move","#name");
5.Смотрим исходники там все понятно вроде,если нет то спрашиваем

Можешь почитать и вот эту статейку "Простой плагин JQuery Covering-Bad"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element