4309
- 0
Многие наверное замечали как интересно работают не которые сайты,на
некоторых реализована быстрый скролл,это когда ты нажимаешь кнопку "далее" или просто прокручиваешь страничку колесиком вниз и страничка раз и прокрутилась быстро на высоту вашего экрана.Как это работает вы уже посмотрели в демо. Этот эффект можно использовать для главной,для сайтов визитоки и на что хватит фантазии.
И так приступим
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем и заливаем папку JS в нашу папку с шаблоном.
2.Ну сама страница должна иметь примерно такой код
Код:
<! doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
Код:
<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>
Код:
<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() {}
});Селектор для секций (разделов) на странице.
sectionName
Scrollify позволяет определить для каждого раздела своё хеш значение. Это позволяет иметь каждому разделу свою постоянную ссылку, которая задается в атрибуте data. Название атрибута data определяется в параметре 'sectionName'.
easing
Определяет используемый метод easing.
offset
Расстояние в пикселях для комппенсации положения каждого раздела.
scrollbars
true или false - определяет будет ли видна полоса прокрутки.
before
Функция обратного вызова, которая вызвается до того как был вызван метод скроллирования до раздела. Аргументы включают index раздела и массив всех разделов.
after
Функция обратного вызова, которая вызывается после того, как мы прокрутили до нового раздела. Аргументы включают index раздела и массив всех разделов.
Метод движения может быть использован для перехода к конкретному разделу. Можно привязать либо к index-у раздела или к названию раздела определяемому в хеше атрибута data.
Код:
$.scrollify("move","#name");Можешь почитать и вот эту статейку "Фоны для сайта на чистом CSS"
Это тоже интересно
27.11.13FerroMenu JQuery плагин
29.06.17Будем фиксировать менюшку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.