Всем привет!
Немного расскажу об эффекте!
Когда вы наведете на ссылку или проведете по ней, вы увидите, как буквы будут переливаться цветами радуги.
Эффект очень красивый.
Итак, вставляем между тегами <head></head> вот такой код:
<script ENGINE="text/javascript" src="https://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="https://bloggood.ru/" class="second">Привет читатель BlogGood.ru</a>
Или так для заголовка:
<h2 class='second'>Привет читатель BlogGood.ru</h2>
А вот и результат:
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Шумящий эффект для картинки при наведении
Выделение цветом ссылок при наведении на параграф
Фиксированное меню при прокрутке сайта
Как с помощью CSS3 и JQuery создать анимированный «прилипающий» заголовок?Похожие статьи
Описание популярных счетчиков посещения сайта
HTML кнопка, как ссылка и ссылка, как кнопка
Как сделать адаптивный рекламный блок AdSense
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220443 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181503
2 Ответов на комментарий - Эффект для ссылки – радужная ссылка
Добавить комментарий
Метки: javascript, Вебмастеру, для сайта, эффекты для сайта
Класс, мне понравилось! Возьму на вооружение, спасибо
Пожалуйста, Кирилл!