Всем привет!
Бывают случаи, когда нужно привлечь внимание посетителя на новый раздел или категорию. Или в интернет магазине привлечь внимание на скидку.
Как же это сделать? Есть один способ! С помощью JavaScript можно заставить текст или ссылку дрожать.
Итак, вот так выглядит дрожащий текст:
А вот и сам код.
Добавьте между тегами <head> </ head> вот такой код:
<style>
.jc2 {
position:relative;
color:#cc0000;
}
</style>
<script>
var pauseFactor=15;
function jiggleit(num){
this.el=jiggleit.el('jiggle'+num);
this.to=80;
this.jig=function(){
var c=this; if(pauseFactor){c.t=c.t? ++c.t : 1;
if(c.t%pauseFactor==0){c.to=pauseFactor*80;c.t=0;
} else c.to=80;}
c.el.style.left=(parseInt(c.el.style.left)==1)? '-1px' : '1px';
setTimeout(function(){c.jig();}, c.to);
};
this.jig();
};
jiggleit.el=function(id){
return document.all? document.all[id] : document.getElementById(id);
};
jiggleit.init=function(){
var i=0; while(jiggleit.el('jiggle'+i))
i++; if(i--) for (i ; i > -1; --i)
new jiggleit(i);
}
if(document.all||document.getElementById)
window.onload=jiggleit.init;
</script>
Я думаю, вы понимаете, что все, что находится
в теге <style> </style> – это CSS стили и все, что находится
в теге <script > </script > – это JavaScript.
Теперь добавьте между тегами <body></body> вот такой код:
Купить сайт - <span id="jiggle0" class="jc2">Cкидка 10%</span>
Сохраняйте и смотрите на результат.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
Как сделать окно для сайта, всплывающее через заданное время?
Комментарии ВКонтакте для WordPress
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222517 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187685 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186563
8 Ответов на комментарий - Эффект «дрожащий текст или ссылка» на JavaScript
Добавить комментарий
Метки: javascript, для сайта, эффекты для сайта
Спасибо!
Возможно когда-то пригодиться!
Прогнал пост по соц. сетях!
Удачи Вам!
Спасибо, Николай, за прогон по соц. сетях!
Прикольно смотрится. Думаю что можно что-то подобное на CSS сделать. Вот к примеру что-то похожее, создать блок div с id Text и прописать в него текст, потом к блоку применить вот эти стили:
#Text { background-color: transparent; border: 0px #000000 solid; width:10px; /* Ширина блока */ height:10px; /* Высота блока */ padding: 0; color:#000000; /* Цвет текста в блоке */ text-align: left; /* Здесь задаем время трансформации в секундах, * в данном случае стоит одна секунда */ /* Если оставить linear, то эффект будет * продолжатся постоянно, а если вместо linear * поставить 5, то эффект будет сделать всего 5 раз */ -webkit-animation: transform-pulse 1000ms linear 0ms infinite normal; -moz-animation: transform-pulse 1000ms linear 0ms infinite normal; -ms-animation: transform-pulse 1000ms linear 0ms infinite normal; animation: transform-pulse 1000ms linear 0ms infinite normal; } @-webkit-keyframes transform-pulse { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(0deg) scale(1.1,1.1); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes transform-pulse { 0% { -moz-transform: rotate(0deg); } 50% { -moz-transform: rotate(0deg) scale(1.1,1.1); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes transform-pulse { 0% { -o-transform: rotate(0deg); } 50% { -o-transform: rotate(0deg) scale(1.1,1.1); } 100% { -o-transform: rotate(0deg); } } @-ms-keyframes transform-pulse { 0% { -ms-transform: rotate(0deg); } 50% { -ms-transform: rotate(0deg) scale(1.1,1.1); } 100% { -ms-transform: rotate(0deg); } } @keyframes transform-pulse { 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg) scale(1.1,1.1); } 100% { transform: rotate(0deg); } }Эффект конечно не дрожащий, а пульсирующий. Но плюс в том что это простая анимация на CSS и нет никаких JS скриптов. Вообще такой анимации на CSS валом. Все хочу у себя на блоге статью написать то про то то про это, да вот все времени не хватает. Инфы много и нужно ей делится с другими.
Ну да ладно, все равно пост полезный, он мне очень понравился Степан!
Спасибо, Александр, за полезный CSS код! А также, спасибо за то, что Вы дополняете мои статьи делитесь всегда в комментариях кодами!
Всегда пожалуйста Степан! Мне нравится ваш блог и я стараюсь следить за вашими статьями. На сегодняшний день очень многие создают свои сайты и блоги и хотят прикрутить к ним какие либо фишки, но не имея опыта не знают что и с чем едят. Так что такая инфа должна быть в свободном доступе.
, Все таки сделал я этот калькулятор с этими слайдами. И кстати, не к каждому ui-slider с готовым JS-кодом который выкладывают в сети можно прикрутить обработчик суммы. Еще, берешь один дизайн ui-slider ставишь другой Js для него чтобы работал калькулятор, и итоге калькулятор работает а ui-slider то криво пашет то вообще никак. Пришлось взять стили от jQuery для ui-slider и переделать их под себя.
Вот к примеру, мне понадобился вчера калькулятор для сайта клиента, в принципе я знаю как его сделать, но есть несколько вариантов расчета, есть с функцией eval, а есть без нее, и я хотел сделать без нее, но недостаточно знаний было. К тому же в калькуляторе нужно было поставить ui-slider, а его прикрутить в расчетам через функцию eval у меня не получалось. Начал искать инфу и итоге практически ничего не подходило, а то что надо стоило денег на платных сервисах. К тому же выкладывают такой код для калькулятора в котором много лишнего, куча скриптов, куча лишнего кода, валом не нужных файлов. В итоге посидев сутками с бубном, решился все таки на танец с ними
Надеюсь написать в скором времени пост про то как сделать симпатичный и рабочий калькулятор. А то смотрю очень много вопросов в сети по этому поводу.
Так что инфой делится нужно. Делать полезное для людей это всегда есть GOOD! Как говорится, Делай добро и оно к тебе вернется.
“Как говорится, Делай добро и оно к тебе вернется” – абсолютно согласен
Очень интересный прием
Попробую внедрить ее к себе. Я вообще люблю подобные вещи
Пожалуйста, Дмитрий!
Через пару дней скину еще один интересный код.