mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 25.02.2020 23:27 Benutzername: Passwort: Auto-Login

Thema: CSS/JS: Element mit Mausposition verschieben vom 27.10.2016


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS/JS: Element mit Mausposition verschieben
Autor Nachricht
heav
Threadersteller

Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 35
Geschlecht: Männlich
Verfasst Do 27.10.2016 09:22
Titel

CSS/JS: Element mit Mausposition verschieben

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich versuche gerade herauszufinden, wie der Effekt auf der
Startseite von bff.de gemacht ist.
(Das sich das Bild mit der Maus verschiebt).

Schon klar, dass sich die Werte von transform: translateX()
bzw. translateY verändern, aber wie steuere ich das an?

Ich müsste ja irgendwie die Mauszeigerposition per JS auslesen,
uns dass dann in den Wert für’s CSS umsetzen. Ich komm nur nicht
dahinter, wie das exakt gemacht ist (welches Script welches Element
ansteuert, etc.)

Der Blur-Effekt ist irrelevant für mich.

Danke & Grüße
hv
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein Status:0
Alter: 48
Geschlecht: Männlich
Verfasst Do 27.10.2016 09:54
Titel

Re: CSS/JS: Element mit Mausposition verschieben

Antworten mit Zitat Zum Seitenanfang

heav hat geschrieben:
...

Ich müsste ja irgendwie die Mauszeigerposition per JS auslesen,
...


Ich habe mir nicht angeschaut wie die die Mausposition auslesen, aber dafür hatte ich hier mal eine Vorlage gefunden:
http://www.javascriptsource.com/page-details/mouse-coordinates.html
  View user's profile Private Nachricht senden
Anzeige
Anzeige
heav
Threadersteller

Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 35
Geschlecht: Männlich
Verfasst Do 27.10.2016 15:52
Titel

Antworten mit Zitat Zum Seitenanfang

Habs.
Falls es jemanden interessiert:

Code:
<head>

    <script type="text/javascript">
    function move(event)
    {
     
      var x = document.all ? event.offsetX : event.pageX;
      var y = document.all ? event.offsetY : event.pageY;
           
      document.getElementById("div-id").style.transform="translateX("+x/1000+"%) translateY("+y/1000+"%)";
    }
    </script>

</head>


<body onmousemove="move(event)">


Das Objekt mit der ID „div-id“ wird jeweils um
ein tausendstel der Mauszeigerposition (x/y)
verschoben. Kann man natürlich in der Stärke einstellen.


Zuletzt bearbeitet von heav am Do 27.10.2016 15:53, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein Status:0
Alter: 48
Geschlecht: Männlich
Verfasst Do 27.10.2016 16:11
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn du auch noch auf unterschiedliche Größen des Browserfensters eingehen willst, könntest du statt dem Tausendstel, auch mit $window.width() die Breite des Fensters auslesen und dann einen gewünschten Faktor ergänzen. *zwinker*
  View user's profile Private Nachricht senden
 
Ähnliche Themen über css ein Element nach definiertem Element ansprechen
CSS: element in klasse ansprechen.
CSS-Element zentral positionieren
[CSS] Scrollender Background in fixed Element?
[html/css] element soll sich immer an die höhe anpassen.
CSS für bestimmtes Element auf fremden Webseite ermitteln
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.