Всем привет!
Бывают случаи, когда нужно привлечь внимание посетителя на новый раздел или категорию. Или в интернет магазине привлечь внимание на скидку.
Как же это сделать? Есть один способ! С помощью 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>
Сохраняйте и смотрите на результат.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Эффект для ссылки – радужная ссылка
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайтаПохожие статьи
CSS стили для горизонтальных линий «HR»
Как сделать, чтобы при нажатии на первый блок, второй закрывался
Меняется шапка сайта от времени года
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 331670 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 275609 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 226702 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 193199 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 187093
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! Как говорится, Делай добро и оно к тебе вернется.
«Как говорится, Делай добро и оно к тебе вернется» — абсолютно согласен
Очень интересный прием
Попробую внедрить ее к себе. Я вообще люблю подобные вещи
Пожалуйста, Дмитрий!
Через пару дней скину еще один интересный код.