Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Анимация с помощью CSS

Опубликовано: 01.09.2018

видео Анимация с помощью CSS

CSS уроки. Анимация в CSS3. Часть 1

Здравствуйте, сегодня хотелось бы показать примеры создания анимации с помощью CSS3 — будем вращать картинку по часовой стрелки, научимся вращать ее с замедлением и ускорением, а также двигать катринку по клику, наведению и другие примеры анимации.


CSS анимация элементов при наведении

Скачать исходники для статьи можно ниже

Пример анимации 1: Непрерывно вращающаяся картинка:

Вот что у нас получиться:

 

1.1. Создаем блок с картинкой (крутящаяся мельница):

<img class="loader" src="http://mnogoblog.ru/wp-content/uploads/2013/08/windmill-blades.png">

, где «src=» — указывает путь до картинки:


CSS анимация для самых маленьких. Анимация логотипа на миллион долларов

Вставляем вышеуказанный код в любое место на вашем сайте, например, давайте вставим его в виджет — для этого на wordpress заходим в панель управления, в левом меню выбираем пункт «Внешний вид» и его подпункт «Виджеты», ищем виджет с названием «Текст» и переносим его в сайдбар, далее вставляем вышеуказанный код блока с картинкой.

 

1.2. Прописываем к нашему рисунку стили оформления (CSS), которые заставят его двигаться:

.loader{ -webkit-animation: preloader 3s infinite linear; -moz-animation: preloader 3s infinite linear; -ms-animation: preloader 3s infinite linear; -o-animation: preloader 3s infinite linear; animation: preloader 3s infinite linear; } @-webkit-keyframes preloader { to { -webkit-transform: rotate(360deg); } } @-moz-keyframes preloader { to { -moz-transform: rotate(360deg); } } @-ms-keyframes preloader { to { -ms-transform: rotate(360deg); } } @-o-keyframes preloader { to { -o-transform: rotate(360deg); } } @keyframes preloader { to { transform: rotate(360deg); } }

Здесь скорость вращения можно поменять изменив параметр «3s».

В wordpress стили оформления прописываются в файле — style.css. Для того, чтобы его открыть — заходим в панель управления wordpress, слева выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл — style.css, открываем его и в самый конец вставляем вышеуказанный код.

Все готово! — картинка должна крутиться.

Давайте рассмотрим еще один пример анимации — но в нем картинка будет вращаться с замедлением, а потом опять разгоняться.

 

Пример анимации 2: Картинка с меняющейся скоростью вращения.

Вот, что должно получиться во втором примере:

 

2.1 Создаем блок с картинкой (крутящаяся мельница):

<img class="loader" src="http://mnogoblog.ru/wp-content/uploads/2013/08/windmill-blades.png">

 

2.2 Прописываем к нашему рисунку стили оформления (CSS), которые заставят его двигаться:

.loader{ -o-transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -mz-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-animation: preloader 40s 4s ease-in-out infinite; -moz-animation: preloader 40s 4s ease-in-out infinite; -ms-animation: preloader 40s 4s ease-in-out infinite; -o-animation: preloader 40s 4s ease-in-out infinite; animation: preloader 40s 4s ease-in-out infinite; } @-webkit-keyframes preloader { from { -webkit-transform:rotate(3200deg); } to { -webkit-transform:rotate(-40deg); } } @-moz-keyframes preloader { from { -webkit-transform:rotate(3200deg); } to { -webkit-transform:rotate(-40deg); } } @-ms-keyframes preloader { from { -webkit-transform:rotate(3200deg); } to { -webkit-transform:rotate(-40deg); } } @-o-keyframes preloader { from { -webkit-transform:rotate(3200deg); } to { -webkit-transform:rotate(-40deg); } } @keyframes preloader { from { -webkit-transform:rotate(3200deg); } to { -webkit-transform:rotate(-40deg); } }

Все готово! Теперь наша анимация будет с меняющейся скоростью кручения.

 

Пример анимации 3: Интересный эффект перемещения картинки/текста при клике на объект.

При клике на текст или картинку — она будет сдвигаться, вот пример кода:

<div class="" onclick="this.style.left=parseInt(this.style.left)+50+'px'" style="left: 10px; position: relative;"><img src="http://mnogoblog.ru/wp-content/uploads/2013/07/stroka.png" alt="" /></div>

, где:

50+px — означает смещение изображения/текста при клике на 50 px.

left: 10px — отступ слева на 10 px — изначальная позиция изображение.

position — устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице, в частности relative — относительное позиционирование. Если поставить position: absolute — то отступ будет считаться относительно окна браузера.

Демонстрация примера:

 

Пример анимации 4: Еще один эффект перемещения картинки/текста при клике на объект.

Но здесь, в отличие от предыдущего примера объект перемещается плавно, а не моментально.

Вот например для разных видов браузеров, но в данном примере у вас появятся 3 объекта:

<div style="-webkit-transition: -webkit-transform 3s ease-in; width: 50px" onclick="this.style.webkitTransform='translate(40em,0)'"> Привет посетитель2! </div>/* Для Chrome, iOS */ <div style="-moz-transition: -moz-transform 3s ease-in; width: 50px" onclick="this.style.MozTransform='translate(40em,0)'"> Привет посетитель2! </div>/* Для Firefox */ <div style="-o-transition: -o-transform 3s ease-in; width: 50px" onclick="this.style.OTransform='translate(40em,0)'"> Привет посетитель2! </div>/* Для Opera */

 

Чтобы объединить данные стили для одного объекта можно воспользоваться следующей конструкцией:

<?php // Информация о браузере пользователя $browser = $_SERVER["HTTP_USER_AGENT"]; // Смотрим, есть ли в этой строке упоминание соответствующего браузера if ( stristr($_SERVER['HTTP_USER_AGENT'], 'Firefox') ) echo 'firefox'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Chrome') ) echo 'chrome'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Safari') ) echo 'safari'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Opera') ) echo 'opera'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE 6.0') ) echo 'ie6'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE 7.0') ) echo 'ie7'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE 8.0') ) echo 'ie8'; ?>

Незабываем экранировать одинарные кавычки (‘) с помощью обратного слеша (\) и в итоге получаем следующий код:

<?php // Информация о браузере пользователя $browser = $_SERVER["HTTP_USER_AGENT"]; if ( stristr($_SERVER['HTTP_USER_AGENT'], 'Firefox') ) echo ' <div style="-moz-transition: -moz-transform 3s ease-in; width: 50px" onclick="this.style.MozTransform=\'translate(40em,0)\'"> <img src="http://mnogoblog.ru/wp-content/uploads/2013/07/stroka.png" /> </div>'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Chrome') ) echo ' <div style="-webkit-transition: -webkit-transform 3s ease-in; width: 50px" onclick="this.style.webkitTransform=\'translate(40em,0)\'"> <img src="http://mnogoblog.ru/wp-content/uploads/2013/07/stroka.png" /> </div>'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Safari') ) echo 'safari'; elseif ( stristr($_SERVER['HTTP_USER_AGENT'], 'Opera') ) echo ' <div style="-o-transition: -o-transform 3s ease-in; width: 50px" onclick="this.style.OTransform=\'translate(40em,0)\'"> <img src="http://mnogoblog.ru/wp-content/uploads/2013/07/stroka.png" /> </div>'; ?>

То есть будет отображаться только один объект — и в зависимости от браузера — к нему будут применяться соответствующие стили оформления.

 

Пример анимации 5: Движение объекта при наведении на него мышкой.

<img class="turn" src="http://mnogoblog.ru/wp-content/uploads/2013/07/stroka.png" />

Здесь придется прописать стили оформления для картинки:

.turn:hover { -moz-transform: translate(40em,0); /* Для Firefox */ -ms-transform: translate(40em,0); /* Для IE */ -webkit-transform: translate(40em,0); /* Для Chrome, iOS */ -o-transform: translate(40em,0); /* Для Opera */ transform: translate(40em,0); -webkit-transition: all 4s ease-in-out; -moz-transition: all 4s ease-in-out; -o-transition: all 4s ease-in-out; -ms-transition: all 4s ease-in-out; }
rss