Move Browser mit der Maus

Question

Ich versuche etwas zu tun like this, wo der Inhalt aus dem Bildschirm ist und wenn Sie die Maus bewegen, folgt der Browser es herum. Ich dachte, es wäre ähnlich wie this wo der Rand des Bildschirms animiert wird, wenn die Maus bewegt.

Es sieht aus wie im ursprünglichen Beispiel verwenden sie JS, um die transform: matrix zu ändern. Auf dem zweiten Link wird der Bildschirm GreenSock und den folgenden Code animiert mit der CSS zu ändern:

// Mouse move tilt effect 
$(document).mousemove(function(event){ 

    // Detect mouse position 
    var xPos = (event.clientX/$(window).width())-0.5; 
    var yPos = (event.clientY/$(window).height())-0.5; 

    // Tilt the hero container 
    TweenLite.to($hero, 0.6, {rotationY:5*xPos, rotationX:5*yPos, ease:Power1.easeOut, transformPerspective:900, transformOrigin:"center"}); 

    // Update text on the page with the current mouse position 
    $(".bottom strong").text(event.pageX + ", " + event.pageY); 
}); 

Ist es möglich, etwas zu tun, ähnlich zu tun, was ich brauche?

Answer 1

Basierend auf wie ich Ihre Absichten im Grunde genommen, was Sie tun müssen, ist.

1. einen div Behälter schaffen, die es größer als die Fenstergröße aufweist und füllt Breite und Höhe mit Inhalt
2. div Behälter schaffen, das gleich Fenster und Überlauf hat eine Breite und Höhe: den Behälter in 1 versteckt und enthält.
3. Center Container in 1 in 2 mit transform: translateX(-25%) translateX(-25%); und transition: transform 1s;

Danach

1. Erkannt Mausposition
2. berechnen Abstand von der Mitte des Fensters
3. Und auf dieser Grundlage hinzuzufügen oder zu entfernen, um den translateX und translateY Wert bis zu 25%

EDIT:

document.querySelector('body').style.transition = 'transform 1s'; 

window.addEventListener('mousemove', event => { 
    const absMaxX = window.innerWidth/2; 
    const absMaxY = window.innerHeight/2; 

    const maxDistance = Math.sqrt(Math.pow(absMaxX, 2) + Math.pow(absMaxY, 2)); 

    const mouseX = event.clientX; 
    const mouseY = event.clientY; 

    const directionX = mouseX - absMaxX >= 0 ? 1 : -1; 
    const directionY = mouseY - absMaxY >= 0 ? 1 : -1; 

    const distance = Math.sqrt(Math.pow(mouseX - absMaxX, 2) + Math.pow(mouseY - absMaxY, 2)) 
    const translation = distance/maxDistance * 100; 

    document.querySelector('body').style.transform = 
    `translateX(${directionX * translation}px) translateY(${directionY * translation}px)` 
});