Create an Interactive Spider Web Cursor Effect with HTML, CSS, and JavaScript

In this article, we will explore how to create an impressive Spider Web cursor effect using HTML, CSS, and JavaScript. This effect adds an engaging interactive dimension to your website, captivating users with a network of points and lines that dynamically connect to the cursor, along with a spider icon that follows its movement.

We will break down each part of the code, explain how it works, and guide you through the complete implementation so that you can customize this effect for your own projects.

Introduction

The Spider Web Cursor effect is a unique visual animation where points appear on the screen and dynamically connect with lines based on the mouse cursor's position. This type of effect is ideal for creative websites, interactive portfolios, or homepages that aim to capture users' attention and enhance their browsing experience.

Nous allons utiliser un simple document HTML pour structurer la page, du CSS pour la mise en forme et le style, et du JavaScript pour gérer l’animation et l’interaction en temps réel.

HTML Page Structure

Pour commencer, nous allons créer la structure de base de notre page web en utilisant HTML. Voici le code HTML que vous pouvez utiliser :

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spider Cursor Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3 id="centerText">@mondesignweb</h3>
    <canvas id="spiderCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

Explanation of the HTML Structure

DOCTYPE and HTML Structure: Define the HTML version used and the language of the document as French.
Meta Tags :
- The meta charset="UTF-8" ensures that the document uses UTF-8 character encoding.
- meta http-equiv="X-UA-Compatible" ensures compatibility with Internet Explorer.
- The link to the stylesheet style.css sets the styles for the page.
Body Section :
- h3: @mondesignweb : Displays centered text on the page.
- <canvas id="spiderCanvas"></canvas> : Élément <canvas> où le dessin de la toile d’araignée va se produire.
- : Links the JavaScript file to animate the effect.

Setting Up CSS Style

The CSS defines the visual appearance of our page and manages the positioning of elements, including the canvas (canvas) for the spider web animation and the centered text.

				
					body {
    margin: 0;
    overflow: hidden;
    background: #410000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
    cursor: pointer;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

h3#centerText {
    color: white;
    font-size: 24px;
    z-index: 10;
    position: absolute;
    text-align: center;
}

CSS Analysis:

body :

margin: 0; : Removes the default margins.
overflow: hidden;: Hides any content that overflows outside the page.
background: #410000;: Applies a dark red background color to create a dramatic effect.
display: flex; align-items: center; justify-content: center; : Centers all child elements horizontally and vertically.
height: 100vh;: Ensures that the body of the page occupies the entire height of the viewport.
cursor: pointer; : Changes the default cursor to a pointer icon when hovering over the page.

canvas :

display: block; : Displays the canvas as a block-level element.
position: absolute; : Positions the canvas relative to the window.
top: 0; left: 0; : Place le canevas en haut à gauche de la fenêtre, couvrant toute la page.

h3#centerText :

color: white; : Définit la couleur du texte en blanc.
font-size: 24px; : Taille de police du texte.
z-index: 10; : Assure que le texte est au-dessus du canevas.
position: absolute; : Positionne le texte de manière absolue au centre de la page.

Implémentation de l'Animation en JavaScript

Le JavaScript est utilisé pour animer l’effet de curseur « Toile d’Araignée ». Voici le code JavaScript qui doit être placé dans le fichier script.js :

				
					const canvas = document.getElementById('spiderCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let points = [];

const POINTS_COUNT = 300;
const LINE_LENGTH = 200;
const CURSOR_RADIUS = 50;

const spiderIcon = new Image();
spiderIcon.src = 'spider.png'; // Remplacez par le chemin de votre icône de spider

const SPIDER_ICON_SIZE = 80;

for (let i = 0; i < POINTS_COUNT; i++) {
    points.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        velocityX: (Math.random() - 0.5) * 2,
        velocityY: (Math.random() - 0.5) * 2
    });
}

let cursor = { x: canvas.width / 2, y: canvas.height / 2 };

document.addEventListener('mousemove', function(event) {
    cursor.x = event.clientX;
    cursor.y = event.clientY;
});

function drawSpiderWeb() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    points.forEach(point => {
        ctx.beginPath();
        ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
        ctx.fillStyle = 'white';
        ctx.fill();
    });

    points.forEach(point => {
        const distance = Math.hypot(cursor.x - point.x, cursor.y - point.y);
        if (distance < LINE_LENGTH) {
            ctx.beginPath();
            ctx.moveTo(cursor.x, cursor.y);
            ctx.lineTo(point.x, point.y);
            ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance / LINE_LENGTH})`;
            ctx.stroke();
        }
    });

    ctx.drawImage(
        spiderIcon,
        cursor.x - SPIDER_ICON_SIZE / 2,
        cursor.y - SPIDER_ICON_SIZE / 2,
        SPIDER_ICON_SIZE,
        SPIDER_ICON_SIZE
    );

    points.forEach(point => {
        point.x += point.velocityX;
        point.y += point.velocityY;

        if (point.x <= 0 || point.x >= canvas.width) point.velocityX *= -1;
        if (point.y <= 0 || point.y >= canvas.height) point.velocityY *= -1;
    });

    requestAnimationFrame(drawSpiderWeb);
}

window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

drawSpiderWeb();

Explication du Code JavaScript :

1. Initialisation du Canevas et Contexte 2D :

				
					const canvas = document.getElementById('spiderCanvas');
const ctx = canvas.getContext('2d');

Sélectionne l’élément <canvas> avec l’ID spiderCanvas et le stocke dans la variable canvas.
Utilise getContext('2d') pour obtenir le contexte de dessin 2D du canevas, stocké dans ctx, ce qui permet de dessiner des formes et des images.

2. Définir la Taille du Canevas :

				
					canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Définit la largeur et la hauteur du canevas pour qu’elles correspondent à la taille de la fenêtre du navigateur. Cela garantit que le canevas couvre tout l’écran.

3. Création d'un Tableau de Points :

				
					let points = [];

Initialise un tableau vide points qui stockera les positions et les vitesses des points animés.

4. Définition des Constantes :

				
					const POINTS_COUNT = 300;
const LINE_LENGTH = 200;
const CURSOR_RADIUS = 50;

POINTS_COUNT : Nombre de points qui seront générés aléatoirement sur le canevas.
LINE_LENGTH : Distance maximale à laquelle une ligne sera dessinée entre le curseur et un point.
CURSOR_RADIUS : Rayon du cercle autour du curseur à l’intérieur duquel les lignes sont dessinées.

5. Chargement de l'Icône d'Araignée :

				
					const spiderIcon = new Image();
spiderIcon.src = 'spider.png'; // Remplacez par le chemin de votre icône de spider
const SPIDER_ICON_SIZE = 80;

Crée une nouvelle image spiderIcon et définit sa source pour charger l’icône de l’araignée.
SPIDER_ICON_SIZE : Définit la taille de l’icône d’araignée à 80 pixels.

6. Génération de Points Aléatoires :

				
					for (let i = 0; i < POINTS_COUNT; i++) {
    points.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        velocityX: (Math.random() - 0.5) * 2,
        velocityY: (Math.random() - 0.5) * 2
    });
}

Une boucle for génère POINTS_COUNT points, chacun avec une position (x, y) aléatoire sur le canevas.
velocityX et velocityY sont également générées aléatoirement, déterminant la vitesse de déplacement des points sur les axes X et Y.

7. Définition de la Position Initiale du Curseur :

				
					let cursor = { x: canvas.width / 2, y: canvas.height / 2 };

Initialise l’objet cursor avec des coordonnées au centre du canevas.

8. Suivi du Mouvement de la Souris :

				
					document.addEventListener('mousemove', function(event) {
    cursor.x = event.clientX;
    cursor.y = event.clientY;
});

Ajoute un écouteur d’événements pour le mouvement de la souris. À chaque mouvement, les coordonnées x et y du curseur sont mises à jour en fonction de la position de la souris sur la fenêtre.

9. Fonction drawSpiderWeb pour Dessiner la Toile d'Araignée :

				
					function drawSpiderWeb() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

Efface le Canevas : Supprime tout dessin précédent pour éviter les superpositions indésirables.

				
					    points.forEach(point => {
        ctx.beginPath();
        ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
        ctx.fillStyle = 'white';
        ctx.fill();
    });

Dessine les Points : Parcourt chaque point dans le tableau points et dessine un petit cercle blanc à la position (x, y) de chaque point.

				
					      points.forEach(point => {
        const distance = Math.hypot(cursor.x - point.x, cursor.y - point.y);
        if (distance < LINE_LENGTH) {
            ctx.beginPath();
            ctx.moveTo(cursor.x, cursor.y);
            ctx.lineTo(point.x, point.y);
            ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance / LINE_LENGTH})`;
            ctx.stroke();
        }
    });

Dessine les Lignes : Pour chaque point, calcule la distance entre le point et le curseur. Si la distance est inférieure à LINE_LENGTH, une ligne est dessinée entre le curseur et le point, avec une opacité qui diminue à mesure que la distance augmente.

				
					    ctx.drawImage(
        spiderIcon,
        cursor.x - SPIDER_ICON_SIZE / 2,
        cursor.y - SPIDER_ICON_SIZE / 2,
        SPIDER_ICON_SIZE,
        SPIDER_ICON_SIZE
    );

Dessine l’Icône de l’Araignée : Affiche l’icône de l’araignée au centre de la position du curseur.

				
					    points.forEach(point => {
        point.x += point.velocityX;
        point.y += point.velocityY;

        if (point.x <= 0 || point.x >= canvas.width) point.velocityX *= -1;
        if (point.y <= 0 || point.y >= canvas.height) point.velocityY *= -1;
    });

Met à Jour les Positions des Points : Modifie la position de chaque point en fonction de sa vitesse. Si un point atteint le bord du canevas, sa direction est inversée (rebondit sur les bords).

				
					    requestAnimationFrame(drawSpiderWeb);
}

Animation Continue : requestAnimationFrame appelle la fonction drawSpiderWeb de manière répétée, créant une boucle d’animation fluide.

10. Redimensionnement du Canevas Lors du Redimensionnement de la Fenêtre :

				
					window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

Ajuste la taille du canevas pour correspondre à la nouvelle taille de la fenêtre lorsque celle-ci est redimensionnée.

11. Démarrage de l'Animation :

				
					drawSpiderWeb();

Appelle la fonction drawSpiderWeb pour commencer l’animation.

Conclusion :

En suivant ce tutoriel, vous avez appris à créer un effet de curseur Toile d’Araignée interactif en utilisant HTML, CSS et JavaScript. Cet effet peut rendre votre site web plus dynamique et attrayant, tout en offrant une expérience utilisateur unique. N’hésitez pas à personnaliser les paramètres pour ajuster l’effet à vos besoins et à votre style.

Create an Interactive Spider Web Cursor Effect with HTML, CSS, and JavaScript