Анимация для сайта CSS и HTML
Автор Макс ПуляВ этой статье расскажу подробно о том, как сделать анимацию на своем сайте с помощью CSS и HTML. Плюс будем использовать пару JavaScript'ов для скроллинга.
Итак, наверняка вы видели множество сайтов с эффектами анимации - и это смотрится очень красиво! А сделать такую анимацию у себя на сайте очень легко. Следуйте инструкции и наслаждайтесь результатом. На мой взгляд, главное не переборщить с анимацией на сайте - нескольких элементов будет вполне достаточно.
Инструкция
1. Сначала вам нужно скачать этот архив с моего сайта. В нем находятся три файла: animate.css, wow.js и wow.min.js. Для работы анимации нам нужен только файл CSS. Но если вы хотите, чтобы анимация не запускалась пока пользователь не прокрутит страницу, тогда нужно задействовать эти два яваскрипта. В файле wow.js есть пара настроек, такие как: "расстояние до элемента при запуске анимации" и "включение отключение анимации на мобильных устройствах". Посмотрите, там всё просто!
2. Конечно же, нужно загрузить эти файлы на хостинг сайта. После чего, перед тегом </head> прописать пути к данным файлам. Например,
<link rel="stylesheet" href="/шаблон/eb/css/animate.css">
<script src="/шаблон/eb/js/wow.min.js"></script>
<script src="/шаблон/eb/js/wow.js"></script>
3. Теперь подключаем стили анимации в блоки. Блоки могут быть разные (p, div и другие). Более того, анимацию можно подключить к уже имеющимся стилям. Например,
<p class="wow animated fadeInUp">Epic Blog</p> - здесь мы подключили анимацию fadeInUp к тексту Epic Blog, wow animated означает, что анимация запустится только когда данный блок будет в видимой части экрана, это очень удобно, если ваш блок находится где-то внизу страницы.
<div class="logo wow animated fadeInUp"><a href="/index.html"><img src="/images/logo.png" /></a></div> - тут мы подключили анимацию к логотипу, у которого уже есть свой стиль.
Также можно выставлять задержку анимации. Например,
<p class="wow animated zoomIn">wow animated zoomIn</p>
<p class="wow animated zoomIn" data-wow-delay="0.3s">wow animated zoomIn</p>
<p class="wow animated zoomIn" data-wow-delay="0.6s">wow animated zoomIn</p>
<p class="wow animated zoomIn" data-wow-delay="0.9s">wow animated zoomIn</p>
Живой пример такой анимации можно посмотреть здесь.
Далее следуют примеры и вся возможная анимация в файле animate.css
Примеры
wow animated pulse
wow animated flash
wow animated rubberBand
wow animated shake
wow animated swing
wow animated tada
wow animated wobble
wow animated bounce
wow animated bounceInLeft
wow animated bounceInRight
wow animated bounceInUp
wow animated bounceInDown
wow animated bounceOut
wow animated bounceOutDown
wow animated bounceOutLeft
wow animated bounceOutRight
wow animated bounceOutUp
wow animated fadeInRight
wow animated fadeInLeft
wow animated fadeInDown
wow animated fadeInUp
wow animated fadeInDownBig
wow animated fadeInLeftBig
wow animated fadeInRightBig
wow animated fadeInUpBig
wow animated fadeOutDown
wow animated fadeOutUp
wow animated fadeOutDownBig
wow animated fadeOutLeftBig
wow animated fadeOutRightBig
wow animated fadeOutUpBig
wow animated flipInX
wow animated flipInY
wow animated flipOutX
wow animated flipOutY
wow animated lightSpeedIn
wow animated lightSpeedOut
wow animated rotateIn
wow animated rotateInDownLeft
wow animated rotateInDownRight
wow animated rotateInUpLeft
wow animated rotateInUpRight
wow animated rotateOut
wow animated rotateOutDownLeft
wow animated rotateOutDownRight
wow animated rotateOutUpLeft
wow animated rotateOutUpRight
wow animated slideInDown
wow animated slideInLeft
wow animated slideInRight
wow animated slideOutLeft
wow animated slideOutRight
wow animated slideOutUp
wow animated slideInUp
wow animated slideOutDown
wow animated hinge
wow animated rollIn
wow animated rollOut
wow animated zoomIn
wow animated zoomInDown
wow animated zoomInLeft
wow animated zoomInRight
wow animated zoomInUp
wow animated zoomOut
wow animated zoomOutDown
wow animated zoomOutLeft
wow animated zoomOutRight
wow animated zoomOutUp
На этом всё!
Всем удачи и добра!
Макс Пуля
Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.
Последнее от Макс Пуля
- $100 длиной в 2,5 года: доход сайта AdSense за два с половиной года
- Поворот текста, текст по диагонали CSS
- Как сделать верхний слой неактивным (некликабельным) CSS pointer-events
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Ajax подгрузка контента по клику в div jQuery
- Скрыть / Показать DIV блок при выборе select пункта
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры