Простой рекламный баннер тупо примостившийся где нибудь на странице мало кого в наше время привлечёт и заставит обратить на себя внимание.А если никто не обращает свой взор,то и денег за за размещение рекламных баннеров можно и не дождаться.Оживим наши рекламные баннеры и заставим их работать плавно покачиваясь и привлекая внимание посетителей.
| Заставить двигаться и раскачиваться наши баннеры или фотографии поможет 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 |
|
Отправить комментарий