ansaurus

Question

Fade in on mouse movement (like on google.com)

Answer 1

A:

I would recommend using a javascript library such as http://jquery.com/.

Using jquery, if you wanted to fade in a div with id "content", you could write the following javascript code...

$(document).mousemove(function() {
    $("#content").fadeIn();
});

CodeToaster 2010-07-02 18:29:24

where is the code to attach it to the mousemove event of the document when the dom finishes loading?

Matt Briggs 2010-07-02 18:50:50

Answer 2

+5 A:

If you use jquery and want it to fade in like google you could do something like this

$('body').mousemove(function() {
  $('#content').fadeIn();
});

Catfish 2010-07-02 18:32:44

Might want to also disconnect the handler after it's fired, so it doesn't continue getting fired again.

GalacticCowboy 2010-07-02 18:51:04

Agreed with Matt Briggs and the Galactic Cowboy - http://jsbin.com/uvene3 here this is in action

altCognito 2010-07-02 18:57:50

-1 no mention of jQuery in the question. happy now?

galambalazs 2010-07-02 19:11:00

You should use `$().one('mousemove',function(){})` rather than just binding to mousemove, since it is intended to only be triggered once.

Alex JL 2010-07-02 20:55:32

Answer 3

+13 A:

Code: (See it in action)

// attach event handler
document.body.onmousemove = function(){
  fadeIn( this, 1000 );      // 1000ms -> 1s
  this.onmousemove = null; // remove to only fade in once!
};

// sets the opacity of an element (x-browser)
function setOpacity( obj, value ) {
  if ( obj ) {
    obj.style.opacity = value / 100;
    obj.style.filter  = 'alpha(opacity=' + value + ')';
    obj.style.zoom    = 1;
  }
}

// makes an element to fade in
function fadeIn( dom, interval, delay ) {

      interval  = interval || 1000;
      delay     = delay    || 10;

  var opacity   = 0,
      start     = Number(new Date()),
      op_per_ms =  100 / interval;

  if ( typeof dom === "string" ) {
    dom = document.getElementById( dom );
  }

  function step() {

    var now     = Number(new Date()),
        elapsed = now - start;
        opacity = elapsed * op_per_ms;

    setOpacity( dom, opacity );

    if ( elapsed < interval )
      setTimeout( step, delay );
    else
      setOpacity( dom, 100 );
  }

  setTimeout( step, delay );
};

Note: the fade function could've been smaller, but in this form you can reuse it easily for any element and duration. Have fun!

galambalazs 2010-07-02 18:35:05

+1 for the simplest and smallest solution (kb-wise) ;-)

Sean Vieira 2010-07-02 18:36:15

+1 for not using a library :)

Matt Briggs 2010-07-02 18:49:07

well i see no jQuery tag, it's kinda obvious. for me at least... :)

galambalazs 2010-07-02 18:50:37

This doesn't fade in on mousemovement. It just fades in .

Catfish 2010-07-02 19:06:36

it is because of jsbin. I checked it locally and it works. Google uses similar to this, so it should work. Or point exactly to the part where it fails. Nothing? Thought so...

galambalazs 2010-07-02 19:20:49

doesn't just fade in using Google chrome, unless the mouse is on the page...

Wayne Werner 2010-07-02 20:54:11

well you can feed the fadeIn function whatever element you want. it's totally up to you. The code is still good btw...

galambalazs 2010-07-02 21:08:15

Answer 4

+2 A:

You can create a fade in effect for the body just like Google with the following code. Please take into consideration this will have similar functionality to Google. You can apply this technique to any element with the proper event handler.

var fps = 24;
var mpf = 1000 / fps;

function fadeIn(ele, mils) {
    // ele: id of document to change.
    // mils: number of mils for the tansition.
    var whole = 0;
    var milsCount = 0;
    var subRatio = 1 / (mils / mpf);

    while (milsCount <= mils) {
        setTimeout('setOpacity("' + ele + '", ' + whole + ')', milsCount);
        whole += subRatio;
        milsCount += mpf;
    }

    // removes the event handler.
    document.getElementById(ele).onmouseover = "";
}

function setOpacity(ele, value) {
    ele = document.getElementById(ele);

    // Set both accepted values. They will ignore the one they do not need.
    ele.style.opacity = value;
    ele.style.filter = "alpha(opacity=" + (value * 100) + ")";
}

You will want to add the event handler to the body of the document in whatever fashion you normally do. Be sure to modify the fadeIn function to pull information from the target/srcElement if you decide to use an attachment method that does not accept arguments. Or you can hard code desired values and objects into the function:

Inline:

<body id="theBody" onmouseover="fadeIn('theBody', 1500)">

DOM Level 0:

document.getElementByTagName("body")[0].onmouseover = function(){ code here };
document.getElementByTagName("body")[0].onmouseover = fadeIn;

DOM Level 2:

document.getElementByTagName("body")[0].addEventListener("mouseover", fadeIn);
document.getElementByTagName("body")[0].attachEvent('onclick', fadeIn);

You will also want to set up a css rule for the body element to make sure that it is not visible when the page loads:

body {
    opacity: 0;
    filter:alpha(opacity=0);
}

I have checked this code to work correctly on IE8, Chrome, Safari, FireFox, and Opera. Good luck.

John 2010-07-02 19:09:46

Might want to show how to attach it to the element (body?) as well.

GalacticCowboy 2010-07-02 19:28:15

The update I made should help people. Thank you for showing the flaw in my answer.

John 2010-07-02 21:10:26

Answer 5

A:

Using CSS3 animations, for whoever supports it at this point.

body {
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
}

In the above example, whenever we change the opacity on the body, it will do a fade effect lasting 0.3 seconds linearly. Attach it to mousemove for one time only.

document.body.onmousemove = function() {
    this.style.opacity = 1;
    this.onmousemove = null;
};

See google.com revamped here :) Chrome and Safari only.

Anurag 2010-07-02 20:05:16

ansaurus

tags:

views:

answers:

Fade in on mouse movement (like on google.com)

related questions