Оживающие картинки,фото,баннеры.




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






Заставить двигаться и раскачиваться наши баннеры или фотографии поможет GSS. Установка этого занимательного эффекта проста и думаю будет понятна всем.Первое что необходимо сделать это определиться *что вы хотите увидеть*.Если в ваши планы входит многоразовое применение данного эффекта,то размещённый ниже код GSS, убрав теги в начале и конце <style>..</style>, нужно  будет добавить в шаблон вашего блога перед закрывающим тегом </b:skin>.Или же если это блогер на вкладке настройки дополнительно  внести код GSS  в появившееся окно и нажать вкладку применить к блогу.

Внесённый и сохранённый код GSS в шаблоне будет теперь отвечать за все эффекты тех картинок,фотографий,баннеров куда вы добавите этот небольшой код class="swing" после img . Вот так должен будет выглядеть код вашей картинки в НТМЛ редакторе.
<img class="swing" src="Адрес урл картинки или баннера" />
Как видим всё очень просто: вносим  GSS в шаблон и вручную добавляем к нужной картинке фрагмент кода и всё дело в шляпе. Если же просто планируете одноразовое применение,то внесите в редакторе этот код в конце и страницы и добавьте код вызова эффекта для изображений.

Код GSS

 <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); }
 100% { transform: rotate(0); }
}

</style>
 000






Желтая река исторически считается
Есть сайт или блог? Тогда
чего ты ждёшь? Поставь код
нашей системы и заработай.
тизерная реклама
Мы не строим иллюзий.
Мы просто зарабатываем  
деньги.Приглашаем
сотрудничеству
качественные проекты

Пассивный доход с вашего сайта или блога.Просто добавь свой проект в систему.





Отправить комментарий