Как создать эффект "ауры" из указателя мыши? - PullRequest
Новая
       7

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

13 голосов
/ 05 мая 2011

Если вы откроете Google Chrome и откроете несколько вкладок, вы увидите эффект при наведении на фоновую вкладку. Указатель будет иметь эффект "ауры", который следует за ним.

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

Ответы [ 4 ]

21 голосов
/ 05 мая 2011

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

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 /

0 голосов
/ 05 мая 2011

Почему никто не подумал упомянуть CSS3 переходы? С помощью CSS3 вы можете создать этот эффект с чистым CSS, без использования Flash или JavaScript.

Вот простой пример для вас: 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

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

0 голосов
/ 05 мая 2011

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

  1. использовать javascript, чтобы поместить абсолютно позиционированный полупрозрачный png под позицией курсора
  2. создать файл .cur с собственным курсором и полупрозрачным свечениемпод ним и надеюсь, что браузер сможет его отрендерить
  3. заменить весь курсор на javascript
0 голосов
/ 05 мая 2011 
$('some_element').hover(function(){
    $(this).css('opacity','.5');
},function(){
    $(this).css('opacity','.2');
});

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

Скрипка: http://jsfiddle.net/maniator/Sf92n/

...