Вот новинка от tympanus.net.Небольшая коллекция диалоговых эффектов с помощью CSS анимации для вашего вдохновения. Некоторые эффекты используют SVG анимации с помощью Snap.svg.Вот сегодня и добавим их На наш сайт.
Итак приступим:
1. Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем ,запускаем исходник и выбираем понравившийся эффект,смотрим исходник и заливаем нужный файл стиля ,я выбрал dialog-sandra.css и заливаем в папку css вашего шаблона,заливаем папку js и font в папку вашего шаблона.
2.Я выбрал первый вариант и в редакторе открываю index.html,и по нему буду делать подключение.
3.В файл main.tpl в хеад подключаем
<!-- common styles -->
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/dialog.css" />
<!-- individual effect -->
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/dialog-sandra.css" />
<script src="{{ tpl_url }}/js/modernizr.custom.js"></script>
4.Перед закрытием тега body добавляем сам код блока окна и скрипты необходимые для работы нашего окна.
<div id="somedialog" class="dialog">
<div class="dialog__overlay"></div>
<div class="dialog__content">
<h2><strong>Привет</strong>, Я диалоговое окошко </h2><div><button class="action" data-dialog-close>Close</button></div>
</div>
</div>
<!-- Related demos -->
</div><!-- /content -->
</div><!-- /container -->
<script src="{{ tpl_url }}/js/classie.js"></script>
<script src="{{ tpl_url }}/js/dialogFx.js"></script>
<script>
(function() {
var dlgtrigger = document.querySelector( '[data-dialog]' ),
somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
dlg = new DialogFx( somedialog );
dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
})();
</script>
<button data-dialog="somedialog" class="trigger">Открыть окно</button>
Можешь почитать и вот эту статейку "Скрипт выделение текста,кода .."
Это тоже интересно
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ответить