BloGGood.ru

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

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

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

Главная » Эффекты для сайта » Эффект для ссылки – радужная ссылка

Эффект для ссылки – радужная ссылка

2016-12-03 / Вр:11:11 / просмотров: 642

Эффект для ссылки – радужная ссылка

Всем привет!
Немного расскажу об эффекте!
Когда вы наведете на ссылку или проведете по ней, вы увидите, как буквы будут переливаться цветами радуги.
Эффект очень красивый.

Итак, вставляем между тегами <head></head> вот такой код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
(function($)
{
$.fn.jMagnify = function(o) {

o = $.extend({
centralEffect: {'font-size': '200%'},
lat1Effect: {'font-size': '180%'},
lat2Effect: {'font-size': '150%'},
lat3Effect: {'font-size': '120%'},
resetEffect: {'font-size': '100%'}
}, o);

return this.each(function(i) {
var el = $(this);
var uuid = (el.attr('id') || el.attr('class') || 'internalName') + '_jMagnify';
var myText = "";
var aStr = el.text().split("");

for (var len in aStr)
myText += "<span class='" + uuid + "'>" + aStr[len] + "</span>";
el.html(myText);
$('.' + uuid).hover(function(){
$(this).css(o.centralEffect)
.next().css(o.lat1Effect)
.next().css(o.lat2Effect)
.next().css(o.lat3Effect);
$(this).prev().css(o.lat1Effect)
.prev().css(o.lat2Effect)
.prev().css(o.lat3Effect);
},
function() {
$(this).css(o.resetEffect)
.next().css(o.resetEffect)
.next().css(o.resetEffect)
.next().css(o.resetEffect);
$(this).prev().css(o.resetEffect)
.prev().css(o.resetEffect)
.prev().css(o.resetEffect);
});
});
};
})(jQuery);

<!-- Радужный эффект -->
$().ready(function() {
$('.second').jMagnify({
centralEffect: {'color': 'yellow'},
lat1Effect: {'color': 'orange'},
lat2Effect: {'color': 'red'},
lat3Effect: {'color': 'magenta'},
resetEffect: {'color': 'black'}
});
});
</script>

И вот такой в HTML:

<p class='second' style='font-size: 22pt;'>Привет читатель BlogGood.ru</p>

Или вот так (для ссылки):

<a href="http://bloggood.ru/" class="second">Привет читатель BlogGood.ru</a>

Или так для заголовка:

<h2 class='second'>Привет читатель BlogGood.ru</h2>

А вот и результат:

[демонстрация]

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

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

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

2 Ответов на комментарий - Эффект для ссылки – радужная ссылка

  1. Кирилл

    Класс, мне понравилось! Возьму на вооружение, спасибо

    Ответить

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

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

    Пожалуйста, Кирилл!

    Ответить

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

;-) :| :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

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

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