Diverses Objekt folgt dem Cursor
In diesem Tutorial wird ein div Objekt gebaut das dem Cursor folgt und diesen auch “ersetzen” kann. Dabei werden verschiedene Abbildungsmöglichkeiten und Formate thematisiert.
Grundaufbau: Kreis folgt dem Cursor
Zuerst wird der Basic HTML Aufbau errichtet, welcher aus dem Body und mydiv besteht. Im Body wird die Größe des canvas und die Farbe des Hintergrunds der Page ausgeführt.
Danach wird der mydiv Abschnitt erstellt. Daraufhin spezialisieren wir uns auf den Cursor, sowie das Objekt, welches diesem folgt. Alles, was in diesem Teil definiert wird ist in einem Rechteck zu sehen.
<!DOCTYPE html>
<html lang="en" id="top">
<head>
<!-- infos über diese website-->
<meta charset="utf-8">
<h1><title> KREIS FOLGT CURSOR </h1></title>
<style>
</style>
<!-- Responsiv auf alle Geräte-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Kreis folgt Cursor</title>
<!--die verbindung zum stylesheet-->
<link href="../kreis folgt cursor/style.css" rel="stylesheet">
</head>
<body style="padding: 0;
margin: 0;
height: 100vh;
background-color: #7173f5">
<div id="my-div"></div>
<script src="../kreis folgt cursor/follow.js"></script>
<header>
</header>
<main>
</body>
</html>Nun wird in CSS über “style” die Farbe, Form und Größe des Objektes bestimmt. Außerdem kann aus dem vorherigen erstellten Rechteck nun ein Kreis geformt werden. Daraufhin wird der Schatten des Kreises definiert und die Geschwindigkeit, mit welcher er dem Cursor folgen soll.
#my-div{
width: 3em;
height: 3em;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 20px rgba(16, 0, 54, 0.2);
transition: 0.3s ease-out ;
}Dann wird die JavaScript Datei “follow.js” erstellt. In dieser wird mit der mydiv Funktion das Verhalten des Cursors bestimmt.
(Im nächsten Schritt versuchen wir die Website auch für Touchdevices bedienbar zu machen. So würde der Cursor dem Finger auf dem Bildschirm folgen. Diese Funktion wird jedoch in den nächsten Schritten vernachlässigt.)
Die const move Funktion stellt das tracken des Cursors dar mithilfe der x- und y- Koordinaten. In unserem Fall stellt +/- 30 den Abstand zu unserem Cursor dar.
let myDiv = document.getElementById("my-div");
//Detect touch device
function isTouchDevice () {
try{
document.createEvent("ToucheEvent");
return true;
}
catch (e){
return false;
}
}
const move = (e) =>{
try{
var x = !isTouchDevice() ? e.pageX: e.touches[0].pageX;
var y = !isTouchDevice() ? e.pageY: e.touches[0].pageY;
}
catch(e){}
myDiv.style.left = x - 30 + "px";
myDiv.style.top = y - 30 + "px";
};
//Für Maus
document.addEventListener("mousemove",(e) => {
move(e);
});
//Für Touch
document.addEventListener("touchmove", (e) => {
move(e);
})Der Kreis pulsiert
Um unser Cursorprojekt noch mehr zu personalisieren, haben wir uns dazu entschieden, den Cursor zu animieren.
Dabei wird my div nun als Container für 2 Objekte, den Kreis und den pulsierenden Ring, verwendet.
<div id="my-div">
<div class="kreis"></div>
<div class="ring"></div>
</div>In CSS müssen diese Klassen nun auch definiert werden.
Der Code, der zuvor in my-div stand, wird in den Kreis kopiert und nur die Größe verändert. Derselbe Code kommt auch in den Ring, wobei dieser noch Erweiterungen für dessen Animation besitzt. Die letzten 3 Zeilen der Ring Klasse bestimmen die Animationsart: pulsierend, die Dauer, den Übergang, den unendlichen Loop und die Durchsichtigkeit am Ende eines Durchlaufs.
#my-div{
position: absolute;
}
.kreis{
width: 0.3em;
height: 0.3em;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 20px rgba(16, 0, 54, 0.2);
}
.ring{
width: 0.1em;
height: 0.1em;
background-color: #ffffff;
position: center ;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: 0.3s ease-out ;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
opacity: 0.0
}Für die Keyframes der Animation müssen die Zustände einzeln beschrieben werden, sodass der Kreis größer wird und am Ende durchsichtig wird und „verschwindet“.
/*Ringanimation*/
@keyframes pulsate {
0% {transform: scale(3.5, 3.5); opacity: 0.0;}
50% {opacity: 1.0;}
100% {transform: scale(10.5, 10.5); opacity: 0.0;}
}Quellen:
https://www.youtube.com/watch?v=62BCYtJX2tY&t=1s
