Créer un Effet de Curseur Toile d’Araignée Interactif avec HTML, CSS et JavaScript

Effet de curseur

Créer un Effet de Curseur Toile d’Araignée Interactif avec HTML, CSS et JavaScript

Dans cet article, nous allons explorer comment créer un effet de curseur Toile d’Araignée impressionnant à l’aide de HTML, CSS et JavaScript. Cet effet ajoute une dimension interactive captivante à votre site web, engageant les utilisateurs grâce à un réseau de points et de lignes qui se connectent dynamiquement au curseur, avec une icône d’araignée qui suit son mouvement.

Nous allons décomposer chaque partie du code, expliquer son fonctionnement et vous guider à travers la mise en œuvre complète pour que vous puissiez personnaliser cet effet pour vos propres projets.

Introduction

L’effet de curseur Toile d’Araignée est une animation visuelle unique où des points apparaissent sur l’écran et se connectent dynamiquement avec des lignes en fonction de la position du curseur de la souris. Ce type d’effet est idéal pour des sites créatifs, des portefeuilles interactifs, ou des pages d’accueil qui cherchent à attirer l’attention des utilisateurs et à améliorer l’expérience de navigation.

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.

Structure de la Page HTML

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>

				
			

Explication de la Structure HTML

  • DOCTYPE et Structure HTML : Définissent la version HTML utilisée et la langue du document comme français.
  • Meta Tags  :
    • Le meta charset="UTF-8" assure que le document utilise l’encodage de caractères UTF-8.
    • meta http-equiv="X-UA-Compatible" garantit la compatibilité avec Internet Explorer.
    • Le lien vers la feuille de style style.css définit les styles de la page.
  • Body Section :
    • <h3 id="centerText">@mondesignweb</h3> : Affiche un texte centré sur la page.
    • <canvas id="spiderCanvas"></canvas> : Élément <canvas> où le dessin de la toile d’araignée va se produire.
    • <script src="script.js"></script> : Lie le fichier JavaScript pour animer l’effet.

Mise en Place du Style CSS

Le CSS permet de définir l’apparence visuelle de notre page et de gérer le positionnement des éléments, notamment le canevas (canvas) pour l’animation de la toile d’araignée et le texte centré.

				
					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;
}



				
			

Analyse du CSS :

body :

  • margin: 0; : Supprime les marges par défaut.
  • overflow: hidden; : Cache tout débordement du contenu hors de la page.
  • background: #410000; : Applique une couleur de fond rouge foncé pour donner un effet dramatique.
  • display: flex; align-items: center; justify-content: center; : Centre tous les éléments enfants horizontalement et verticalement.
  • height: 100vh; : Assure que le corps de la page occupe toute la hauteur de la fenêtre.
  • cursor: pointer; : Change le curseur par défaut en une icône de pointeur lorsqu’il survole la page.

canvas :

  • display: block; : Affiche le canevas comme un élément de niveau bloc.
  • position: absolute; : Positionne le canevas par rapport à la fenêtre.
  • 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.

error:
fr_FR