Главная » 2012 Ноябрь 14 » Создание анимированных прокручивающихся презентационных площадок при помощи scrolldeck.js
03:32 Создание анимированных прокручивающихся презентационных площадок при помощи scrolldeck.js | |
| Библиотека scrolldeck.js – это наверное лучший способ реализации прокручивающейся презентационной площадки. Всё, что вам нужно сделать, это создать веб-страницу, где каждый слайд будет заключен в отдельный div. Для того, чтобы библиотека функционировала, вам понадобятся JQuery, Scrollorama, scrollTo, а также JS-скрипты easing и scrolldeck. После ссылки на вышеприведенные скрипты, создайте площадку для слайдов, которая будет загружаться по событию полной загрузки документа (document ready), и настройте ее следующим образом: $(document).ready(function() {var deck = new $.scrolldeck({buttons: '.nav-button',slides: '.slide',duration: 600,easing: 'easeInOutExpo',offset: 0});}); Здесь всё, что вам нужно сделать, это добавить классы animate к вашим элементам слайдов, как показано ниже: Вы можете скрыть скроллинг, указав соответствующий параметр в вашем CSS-файле. html { overflow:hidden; } Не забудьте скачать и использовать все нужные JS-скрипты в головной секции вашей страницы (например, следующим образом): <script src="js/jquery-1.6.4.min.js"><script src="js/jquery.scrollTo-1.4.2-min.js"><script src="js/jquery.easing.1.3.js"><script src="js/jquery.scrollorama.js"><script src="js/jquery.scrolldeck.js">  Демо scrolldeck.js в действии можно посмотреть здесь: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/ Скачать скрипты: jquery.easing.1.3.rar [1,81 Kb] (cкачиваний: 11) jquery.scrolldeck.rar [1,53 Kb] (cкачиваний: 9) jquery.scrollorama.rar [3,51 Kb] (cкачиваний: 6) jquery.scrollto-1.4.2-min.rar [1,18 Kb] (cкачиваний: 9) | |
|
| |
| Всего комментариев: 0 | |
