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.
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.
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 :
Spider Cursor Effect
@mondesignweb
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.style.css
définit les styles de la page.<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.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;
}
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.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();
const canvas = document.getElementById('spiderCanvas');
const ctx = canvas.getContext('2d');
<canvas>
avec l’ID spiderCanvas
et le stocke dans la variable canvas
.getContext('2d')
pour obtenir le contexte de dessin 2D du canevas, stocké dans ctx
, ce qui permet de dessiner des formes et des images.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let points = [];
points
qui stockera les positions et les vitesses des points animés.
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.
const spiderIcon = new Image();
spiderIcon.src = 'spider.png'; // Remplacez par le chemin de votre icône de spider
const SPIDER_ICON_SIZE = 80;
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.
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
});
}
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.
let cursor = { x: canvas.width / 2, y: canvas.height / 2 };
cursor
avec des coordonnées au centre du canevas.
document.addEventListener('mousemove', function(event) {
cursor.x = event.clientX;
cursor.y = event.clientY;
});
x
et y
du curseur sont mises à jour en fonction de la position de la souris sur la fenêtre.
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
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();
}
});
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
);
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);
}
requestAnimationFrame
appelle la fonction drawSpiderWeb
de manière répétée, créant une boucle d’animation fluide.
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
drawSpiderWeb();
drawSpiderWeb
pour commencer l’animation.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.
Mondesign Web votre agence marketing digital, dédiée à vous accompagner vers le sommet de votre succès en ligne.