BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Эффект «дрожащий текст или ссылка» на JavaScript

Эффект «дрожащий текст или ссылка» на JavaScript

2016-02-03 / Вр:22:53 / просмотров: 1512

Всем привет!
Бывают случаи, когда нужно привлечь внимание посетителя на новый раздел или категорию. Или в интернет магазине привлечь внимание на скидку.
Как же это сделать? Есть один способ! С помощью JavaScript можно заставить текст или ссылку дрожать.

Эффект «дрожащий текст или ссылка» на 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>

Сохраняйте и смотрите на результат.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

8 Ответов на комментарий - Эффект «дрожащий текст или ссылка» на JavaScript

  1. Николай Гижицкий

    Спасибо!
    Возможно когда-то пригодиться!
    Прогнал пост по соц. сетях!
    Удачи Вам!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Николай, за прогон по соц. сетях!

    Ответить

  2. Прикольно смотрится. Думаю что можно что-то подобное на 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 код! А также, спасибо за то, что Вы дополняете мои статьи делитесь всегда в комментариях кодами!

    Ответить

    Александр отвечает:

    Всегда пожалуйста Степан! Мне нравится ваш блог и я стараюсь следить за вашими статьями. На сегодняшний день очень многие создают свои сайты и блоги и хотят прикрутить к ним какие либо фишки, но не имея опыта не знают что и с чем едят. Так что такая инфа должна быть в свободном доступе.
    Вот к примеру, мне понадобился вчера калькулятор для сайта клиента, в принципе я знаю как его сделать, но есть несколько вариантов расчета, есть с функцией eval, а есть без нее, и я хотел сделать без нее, но недостаточно знаний было. К тому же в калькуляторе нужно было поставить ui-slider, а его прикрутить в расчетам через функцию eval у меня не получалось. Начал искать инфу и итоге практически ничего не подходило, а то что надо стоило денег на платных сервисах. К тому же выкладывают такой код для калькулятора в котором много лишнего, куча скриптов, куча лишнего кода, валом не нужных файлов. В итоге посидев сутками с бубном, решился все таки на танец с ними :!: , Все таки сделал я этот калькулятор с этими слайдами. И кстати, не к каждому ui-slider с готовым JS-кодом который выкладывают в сети можно прикрутить обработчик суммы. Еще, берешь один дизайн ui-slider ставишь другой Js для него чтобы работал калькулятор, и итоге калькулятор работает а ui-slider то криво пашет то вообще никак. Пришлось взять стили от jQuery для ui-slider и переделать их под себя.
    Надеюсь написать в скором времени пост про то как сделать симпатичный и рабочий калькулятор. А то смотрю очень много вопросов в сети по этому поводу.
    Так что инфой делится нужно. Делать полезное для людей это всегда есть GOOD! Как говорится, Делай добро и оно к тебе вернется.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    “Как говорится, Делай добро и оно к тебе вернется” – абсолютно согласен :arrow:

    Ответить

  3. Дмитрий

    Очень интересный прием ;-) Попробую внедрить ее к себе. Я вообще люблю подобные вещи

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Дмитрий!
    Через пару дней скину еще один интересный код.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 704
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3821