CODEWITHSUNDEEP
javascriptjquerymouseeventopacity
JTurtle
JTurtle

Reputation: 21

Changing Opacity with Mouse Position

I am trying to change the opacity of an element (in this instance a .png) based on mouse position.

I found this great example for color: http://jsfiddle.net/WV8jX/ 

var $win = $(window),
w = 0,h = 0,
rgb = [],
getWidth = function() {
    w = $win.width();
    h = $win.height();
};

$win.resize(getWidth).mousemove(function(e) {

rgb = [
    Math.round(e.pageX/w * 255),
    Math.round(e.pageY/h * 255),
    150
];

$(document.body).css('background','rgb('+rgb.join(',')+')'); }).resize();

but I am confused how I might do it with opacity. I want the same smooth and seamless effect.

All help would be greatly appreciated!

Upvotes: 2

Views: 2327

Answers (2)

nirazul
nirazul

Reputation: 3955

It's fairly simple:

JSFiddle

$(function(){
    var $win = $(window),
    w = 0,h = 0,
    opacity = 1,
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };

    $win.mousemove(function(e) {
        getWidth();
        opacity = (e.pageX/w * 0.5) + (e.pageY/h * 0.5);

        $('#myElement').css('opacity',opacity);

    });
});

I edited out the whole resize thing because it didn't make sense to me.

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 205979

<div id="wrapper"><h1></h1></div>

http://jsfiddle.net/WV8jX/159/

var $win = $(window),
    w = 0,
    h = 0,
    opacity = 0,
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };

$win.resize(getWidth).mousemove(function(e) {

    opacity = (e.pageX/w) * (e.pageY/h);
    $('h1').text(opacity);

    $('#wrapper').css('opacity',opacity);

}).resize();

Upvotes: 0

Related Questions