• 1976
  • 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.Смотрим исходники там все понятно вроде,если нет то спрашиваем

Можешь почитать и вот эту статейку " Supersized - Фоновое слайдшоу jQuery Plugin"

mistakes

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

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

Ваше мнение

какой форум лучше для вас
Результаты

Облако тегов

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