Всем привет! Сегодня я расскажу про одну очень интересную javascript библиотеку, позволяющую добавить динамики на ваш сайт - dynamo.js .
Всем привет! Сегодня я расскажу про одну очень интересную javascript библиотеку, позволяющую добавить динамики на ваш сайт - dynamo.js.
Перейдите по ссылке https://github.com/jdan/dynamo.js и скачайте ее с GitHub.
Оффициальный сайт: http://jdan.github.io/dynamo.js/
В скачанном архиве вы найдете нужный JavaScript файл. Подключите его, а также JQuery.
Использовать данную библиотеку очень просто. Оберните тот участок, который хотите, чтобы менялся. Дальше добавьте span с классом dynamo и атрибутом data-lines, где укажите, на что нужно менять.
<p>Dynam<span class="dynamo" data-lines="ic">o</span></p>
В атрибуте data-lines можно перечислить сразу несколько значений через запятую, и они все поочередно будут меняться.
Если вы хотите, чтобы анимация была остановлена, добавьте атрибут data-pasue со значением true.
<p>Dynam<span class="dynamo" data-lines="ic" data-pause="true">o</span></p>
Если вам нужно, чтобы значения менялись по клику, то повесьте триггер.
<p><span id="manual_example" class="dynamo" data-pause="true" data-lines="Кликните еще раз!,И еще!, Еще разик!">Кликните!</span></p>
Теперь вешаем триггер.
<script type="text/javascript">
$('#manual_example').click(function() {
$(this).dynamo_trigger();
});
</script>
Также вы можете задать свои настройки через такие атрибуты:
- data-lines - текст, разделенный запятой
- data-speed - скорость анимации
- data-delay - задержка
- data-center - центрировать текст
- data-delimeter - разделитель
- data-pause - пауза
- data-callback - функция обратного вызова
Или вы можете указать эти настройки в объекте инициализации.
Примеры смотрите на оффициальном сайте.
Спасибо за внимание и удачи!
