Wie schaffen Sie "aura-Effekt" aus die Maus?

Wenn Sie öffnen Sie google chrome und öffnen Sie mehrere Registerkarten, sehen Sie den Effekt, indem man die Maus über eine Registerkarte hintergrund. Die Zeiger haben eine "aura" - Effekt, was danach folgt um.

Zu klären, ich bin NICHT zu Fragen, wie man die gesamte Registerkarte Schein einer helleren Farbe, ich bin zu Fragen, wie man die Zeiger die Wirkung innerhalb eines bestimmten radius von es.

  • Ich hatte nicht erkannt, dass der aura-Effekt sehen, bevor diese Frage!
InformationsquelleAutor CDelaney | 2011-05-05
  1. 21

    Der wichtigste Teil ist, um die Koordinaten der Maus, dann Stelle einen radialen Verlauf mit den entsprechenden Koordinaten.

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

    Etwas wie, dass tun die job.

    Überprüfen Sie diese demo von der berühmten Chris Coyier: http://css-tricks.com/examples/MovingHighlight/

    • Genau das, was ich suchte, danke
    • Hier ist ein Turnschuh für ya ^_^: jsfiddle.net/maniator/Sf92n/2
    • Ich wusste nicht, dass die Website existierte... thanks a ton. Sehr hilfreich
    InformationsquelleAutor Rich Bradshaw
  2. 0

    einige Ideen --

    1. verwenden javascript, um eine absolut positioniert, halbtransparente png-unter der cursor-position
    2. erstellen .cur-Datei mit Ihren eigenen cursor und einige semi-transparente glühen unter ihm und hoffen, dass die browser Rendern lassen
    3. ersetzen Sie den gesamten cursor mit javascript
    InformationsquelleAutor davidosomething
  3. 0

    Warum hat niemand gedacht, zu erwähnen, CSS3-übergänge? Mit CSS3 können Sie erstellen diesen Effekt mit reinem css, kein flash oder javascript benötigt.

    Hier ist ein einfaches Beispiel für dich 😀

    #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;
}

    Fand ich einen schönen link mit Infos hier http://www.w3schools.com/css3/css3_transitions.asp

    Bearbeiten[ merkte, ich sollte Lesen Sie Ihre gesamte post vor der Beantwortung, meine schlecht ^-^
    Man könnte wohl noch den übergang mit einem Farbverlauf, Bild und hover-update das Hintergrundbild Koordinaten mit der Maus-position :/

    • Es gibt keinen Punkt auf übergänge mit dieser, da die Maus bewegt sich reibungslos sowieso (Sie können nicht in der Regel machen Sie Ihren Mauszeiger springen Sie augenblicklich von einem Ort zu einem anderen).
    InformationsquelleAutor Isaiah
  4. -9
    $('some_element').hover(function(){
    $(this).css('opacity','.5');
},function(){
    $(this).css('opacity','.2');
});

    Sowas.

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

    • a) Das war nicht was er gefragt wird und b) Selbst wenn es war, diese benötigt keine jQuery kann man auch mit reinem CSS, mit der :hover pseudo-Klasse, die unterstützt wurde, die in Browsern zumindest für die letzten 10 Jahre.
    InformationsquelleAutor Neal
Schreibe einen Kommentar