—»     —»   Создание анимированных прокручивающихся презентационных площадок при помощи scrolldeck.js
  Раздел: Анимация   Комментариев: 2  

Создание анимированных прокручивающихся презентационных площадок при помощи 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 к вашим элементам слайдов, как показано ниже:

<div class="slide">
<p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p>
<p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p>
</div>

<div class="slide">
<p>This slide is ’pinned‘ to the top of the screen until all the slide animation builds are complete.</p>
<p class="animate-build" data-build="1">This is the default fade in animation)</p>
<p class="animate-build" data-animation="space-in" data-build="2"> This paragraph will fade in while its letter spacing contracts to normal. </p>
</div>

Вы можете скрыть скроллинг, указав соответствующий параметр в вашем CSS-файле.

html { overflow:hidden; }

Не забудьте скачать и использовать все нужные JS-скрипты в головной секции вашей страницы (например, следующим образом):

<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollorama.js"></script>
<script src="js/jquery.scrolldeck.js"></script>


Создание анимированных прокручивающихся презентационных площадок при помощи scrolldeck.js

Демо scrolldeck.js в действии можно посмотреть здесь: http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

Скачать скрипты:
jquery.easing.1.3.rar [1,81 Kb] (cкачиваний: 71)
jquery.scrolldeck.rar [1,53 Kb] (cкачиваний: 63)
jquery.scrollorama.rar [3,51 Kb] (cкачиваний: 60)
jquery.scrollto-1.4.2-min.rar [1,18 Kb] (cкачиваний: 62)
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: презентации, javascript, скрипты
Опубликовал Design FactoRy   Прочитано (раз): 8694   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 23 августа 2012 @ 15:54
Написал: melomaniac — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересно, спасибо winked
Комментарий #2: 4 марта 2013 @ 11:46
Написал: Данил — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Доброго времени суток!
Сайт на joomla 2.5 и такая проблема, что скрипты отказываются работать...
В чём может быть проблема?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


www.akres-a.kz
Широкий выбор поставщиков террасной доски. Зайди, приценись
akres-a.kz
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930