Как вы создаете эффект "ауры" с помощью указателя мыши?

Если вы открываете google chrome и открываете несколько вкладок, вы видите эффект, зависая над вкладкой фона. Указатель будет иметь эффект "ауры", который следует за ним.

Чтобы уточнить, я НЕ спрашиваю, как сделать всю вкладку светлее светлым цветом, я спрашиваю, как дать указатель эффект в пределах определенного радиуса его.

Ответы

Ответ 1

Ключевая часть состоит в том, чтобы получить координаты мыши, а затем поместить радиальный градиент с этими координатами.

var originalBG = $(".nav a").css("background-color");

$('.nav li:not(".active") a').mousemove(function(e) {
    x = e.pageX - this.offsetLeft;
    y = e.pageY - this.offsetTop;
    xy = x + " " + y;
    bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
    bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

    $(this)
        .css({background: bgWebKit})
        .css({background: bgMoz});
    }).mouseleave(function() {
    $(this).css({
        background: originalBG
    });
});

Нечто подобное сделает эту работу.

Проверьте это демо от знаменитого Криса Койера: http://css-tricks.com/examples/MovingHighlight/

Ответ 2

некоторые идеи -

  • используйте javascript для размещения абсолютно позиционированного полупрозрачного png под позицией курсора.
  • создайте файл .cur со своим собственным курсором и некоторое полупрозрачное свечение под ним и надейтесь, что браузер сможет его отобразить.
  • заменить весь курсор на javascript

Ответ 3

Почему никто не думал упоминать переходы CSS3? С помощью CSS3 вы можете создать этот эффект с чистым css, не нужно флэш или javascript.

Здесь простой пример для ya: D

#auraThingy{
  height:50px;
  width:200px;
  background:blue;
  transistion:background 3s;
  -webkit-transition:background 3s; /*safari/chrome*/
  -moz-transition:background 3s;  /*firefox*/
  -o-transition:background 3s;  /*opera*/
}
#auraThingy:hover{
  background:lightblue;
}

Я нашел хорошую ссылку с информацией здесь http://www.w3schools.com/css3/css3_transitions.asp

Изменить [Только что я понял, что должен прочитать весь ваш пост, прежде чем ответить, мой плохой ^ - ^ Вероятно, вы все равно можете использовать переход с градиентным изображением, а при наведении обновить координаты фонового изображения с помощью мыши:/

Ответ 4

$('some_element').hover(function(){
    $(this).css('opacity','.5');
},function(){
    $(this).css('opacity','.2');
});

Что-то вроде этого.

Fiddle: http://jsfiddle.net/maniator/Sf92n/