Как сделать качающуюся картинку или баннер в блоге



картинка качаетсяЗдравствуйте мои дорогие читатели и гости блога. Хочу вам сегодня предложить небольшую шпаргалку на тему оформления сообщения или даже всего блога.  Не так давно мы придали движение ссылкам . Об этом можно прочитать здесь. Сейчас же, мы заставим картинки блога и подвигаться, и покачаться из стороны в сторону.



Такой эффект можно применить не только к картинкам в сообщении, но и к любому баннеру.Что, несомненно, привлечёт большее внимания к нему.  Как выглядит таковой можно увидеть на тестовом блоге.

Делать мы это будем с использованием CSS, а сам процесс реализации настолько прост, что вы легко с этим справитесь. Я не думаю, что стоит подобный эффект использовать постоянно. Можно заставить один баннер или картинку оживить. Решать вам. Всё же рассмотрим и тот и другой вариант. Для начала нам понадобиться вот такой код

<style>

.swing{
 -webkit-animation:swinging 10s ease-in-out 0s infinite;
 -moz-animation:swinging 10s ease-in-out 0s infinite;
 animation:swinging 10s ease-in-out 0s infinite;
 -webkit-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 transform-origin:50% 0;
}

@-webkit-keyframes swinging{
 0% { -webkit-transform: rotate(0); }
 5% { -webkit-transform: rotate(10deg); }
 10% { -webkit-transform: rotate(-9deg); }
 15% { -webkit-transform: rotate(8deg); }
 20% { -webkit-transform: rotate(-7deg); }
 25% { -webkit-transform: rotate(6deg); }
 30% { -webkit-transform: rotate(-5deg); }
 35% { -webkit-transform: rotate(4deg); }
 40% { -webkit-transform: rotate(-3deg); }
 45% { -webkit-transform: rotate(2deg); }
 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
 0% { -moz-transform: rotate(0); }
 5% { -moz-transform: rotate(10deg); }
 10% { -moz-transform: rotate(-9deg); }
 15% { -moz-transform: rotate(8deg); }
 20% { -moz-transform: rotate(-7deg); }
 25% { -moz-transform: rotate(6deg); }
 30% { -moz-transform: rotate(-5deg); }
 35% { -moz-transform: rotate(4deg); }
 40% { -moz-transform: rotate(-3deg); }
 45% { -moz-transform: rotate(2deg); }
 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
 0% { transform: rotate(0); }
 5% { transform: rotate(10deg); }
 10% { transform: rotate(-9deg); }
 15% { transform: rotate(8deg); }
 20% { transform: rotate(-7deg); }
 25% { transform: rotate(6deg); }
 30% { transform: rotate(-5deg); }
 35% { transform: rotate(4deg); }
 40% { transform: rotate(-3deg); }
 45% { transform: rotate(2deg); }
 50% { transform: rotate(0); } /* Come  to rest at 50%. The rest is just stillness */
 100% { transform: rotate(0); }
}

</style>

Теперь, если решили что будем раскачивать какую-то определённую картинку, делаем следующее. После того, как написали сообщения перейдём из режима создать в режим HTML

картинка качается


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

<img class="swing" src="Адрес картинки или баннера" />

Вот и все дела. Если уже постоянно с этим длинным кодом возиться не захочется, то тогда его можно установить непосредственно в шаблон блога. Как обычно. Вкладка дизайн-изменить HTML. Находим заветную строку  ]]></b:skin> и перед ней вставляем его. Только здесь необходимо убрать из кода <style> и </style>. Я выделила их синим цветом. А с самой картинкой в сообщении поступаем так же.

Кому интересно узнать, как сделать изображения в блоге круглой формы вот пост об этом .
А мне остаётся пожелать вам всего самого лучшего и расстаться на некоторое время.
Удачи всем нам.


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

4 комментария:

  1. Виктория, спасибо! Получилось. Очень полезная шпаргалка.

    ОтветитьУдалить
  2. Татьяна, пожалуйста. Иногда можно такой фишкой воспользоваться. Да и в шаблон лишний раз не надо заходить. Удобно.

    ОтветитьУдалить
  3. Спасибо, Виктория. Интересная штучка. Попробую в своём блоге.

    ОтветитьУдалить
  4. Наталья, не за что. Попробуйте конечно.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo