• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild das sich im bewegt, wenn man die Maus nach bewegt

C

Cody227

Mitglied
Hallo, ich richte mir gerade eine Homepage ein und möchte als Heading ein großes Bild haben mit einem anderem Bild darüber, das sich verschiebt wenn man die Maus bewegt, wie auf dieser Seite. Wie macht man sowas?
 
Das man sowas verscripten muss ist mir klar. ich würde nur gerne wissen wie das überhaupt geht, vielleicht kann mir ja sogar jemand mal einen beispiel-quelltext posten, den ich dann als vorlage nutzen kann. die attribute, den inhalt usw. kann ich ja in ein paar minuten nach meinen vorstellungen anpassen, es geht hier also um das prinzip
 
Die einzelnen Ebenengrafiken übereinanderlegen (CSS: position: absolute; z-index) und bei mousemove-JS-Events entsprechend verschieben (CSS: top, left).
 
genau das mit css und js hätte ich auch gemacht..
wobei der flüssige verlauf sicher ein problem werden könnte..
 
Das ist eigentlich ein Fall für die Jobbörse.

Na ja, hier ein Ansatz:

Code: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">

body {
    margin: 0;
    padding: 0;
}

#header {
    position: relative;
    border: 1px solid #c00;
    overflow: hidden;
    height: 100px;
}
#eins {
    background: #f00;
    opacity: 0.1;
    width: 800px;
    height: 100px;
    position: absolute;

}
#zwei {
    background: #0f0;
    opacity: 0.1;
    width: 500px;
    height: 100px;
    position: absolute;
}
#drei {
    background: #00f;
    opacity: 0.1;
    width: 800px;
    height: 100px;
    position: absolute;
}

        </style>

<script type="text/javascript">

/**
 *
 * @param float factor Horizontal position relative to document center. Value
 *     should be between -1.0 and 1.0.
 */
function moveObjects(factor)
{
    var eins   = document.getElementById('eins'),
        zwei   = document.getElementById('zwei'),
        drei   = document.getElementById('drei'),
        center = document.width / 2;

    eins.style.left = (center - (eins.offsetWidth / 2) + 100 * factor) + 'px';
    zwei.style.left = (center - (zwei.offsetWidth / 2) + 200 * factor) + 'px';
    drei.style.left = (center - (drei.offsetWidth / 2) + 300 * factor) + 'px';
}

window.onload = function () {
    window.onmousemove = function (e) {
        moveObjects(((e.pageX / document.width) - 0.5) * 2);
    };

    moveObjects(0);
};

</script>
    </head>

    <body>
        <div id="header">
            <div id="eins"></div>
            <div id="zwei"></div>
            <div id="drei"></div>
        </div>
    </body>

</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben