4501
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
- Демо:
Всем здорово. Вот наткнулся у себя в архивах на интересный эффект,может кому пригодится, ну сам эффект заключается в том ,при наведении на ссылку или клику, буквы будут переливаться цветами радуги.
Итак, приступим
В секцию 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;'>Всем привет </p>
Всем привет
Код:
<a href="https://ngcmshak.ru" class="second">Всем привет</a>
Всем привет
Код:
<h2 class='second'>Всем привет</h2>
Можешь почитать и вот эту статейку "Оформляем поле поиска"
Это тоже интересно
05.10.13Текст 3D на CSS3
24.03.15Интересная анимация в поле input
26.04.21Делаем примочки для слабовидящих
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
