Fade in on mouse movement

前端 未结 5 1661
轻奢々
轻奢々 2020-12-29 14:32

How do I fade in div content on first mouse movement, like on google.com, using JavaScript? I don\'t want it to fade out again.

5条回答
  •  南方客
    南方客 (楼主)
    2020-12-29 14:56

    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.

提交回复
热议问题