エフェクト　ATフィールド

概要

背景画像を逐次マウスの座標に合わせることでマウスの位置から六角形の波紋が広がる。IEではマウス移動中はアニメーションが効かず、アニメーション自体が低速。当然ながらJavaScriptがOFFだと波紋は移動しない。

当然ながらネタ。

使用画像

• 1
• 2
• 3
• 4
• X

コード

function mouse_AT(e)
{
        var obj = document.getElementsByTagName("body")[0];
        if(window.event) e = window.event;
        var x = e.clientX + scrollLeft();
        var y = e.clientY + scrollTop();
        var x_pos = 489-40;
        var y_pos = 433-40;
        obj.style.backgroundPosition = (x-x_pos) + "px " + (y-y_pos) + "px";
}
function init()
{
        if(document.getElementById)document.onmousemove = mouse_AT;
}

function scrollLeft()
{
        if(window.pageXOffset)return window.pageXOffset;
        if(document.compatMode == "CSS1Compat")return document.body.parentNode.scrollLeft;
        if(document.body.scrollLeft)return document.body.scrollLeft;
        return 0;
}
function scrollTop()
{
        if(window.pageYOffset)return window.pageYOffset;
        if(document.compatMode == "CSS1Compat")return document.body.parentNode.scrollTop;
        if(document.body.scrollTop)return document.body.scrollTop;
        return 0;
}

モドル(2006/06/11)