+ 1

Can an image move in more than on direction with Web development?

I'm getting the image to move but can it move in multiple places? Something like the TV logo which bounces around but like left and up or something along those lines?

moving image

12th Jun 2025, 1:49 PM

Rondell Nagassar

6 Antworten

+ 2

Rondell Nagassar maybe something like this the top one is controlled by Javascript and CSS. the second is just CSS rotation snimation with transform-origin moved off-center. the third is also CSS animation using an offset-path. https://sololearn.com/compiler-playground/Wuw1edHuv98R/?ref=app

13th Jun 2025, 5:18 AM

Bob_Li

+ 1

Okay Thank you!

12th Jun 2025, 2:44 PM

Rondell Nagassar

Oui, en développement web, une image peut bouger dans plusieurs directions en même temps — pas seulement horizontalement (gauche-droite), mais aussi verticalement (haut-bas), ou même en diagonale comme le logo de la télévision qui rebondit contre les bords de l’écran. Comment ça marche ? Cela se fait principalement grâce à JavaScript (et parfois CSS), en modifiant dynamiquement la position de l’image sur l’axe X (gauche-droite) et Y (haut-bas). 🧪 Exemple simple d’un rebond dans plusieurs directions : html Copier Modifier <!DOCTYPE html> <html lang="fr"> <head> <style> #monImage { position: absolute; width: 100px; height: 100px; background-image: url('image.png'); /* mets ici le chemin de ton image */ background-size: cover; } </style> </head> <body> <div id="monImage"></div> <script> const image = document.getElementById("monImage"); let posX = 0, posY = 0; let vitesseX = 3, vitesseY = 3; function bouger() { const maxX = window.innerWidth - image.clientWidth; const maxY = window.innerHeight - image.clientHeight; posX += vitesseX; posY += vitesseY; if (posX <= 0 || posX >= maxX) vitesseX *= -1; if (posY <= 0 || posY >= maxY) vitesseY *= -1; image.style.left = posX + "px"; image.style.top = posY + "px"; requestAnimationFrame(bouger); } bouger(); </script> </body> </html> 🎯 Ce que ça fait : L’image commence en haut à gauche. Elle avance en diagonale. Elle rebondit automatiquement dès qu’elle touche un bord de la fenêtre. Tu peux modifier les valeurs de vitesseX et vitesseY pour changer la direction initiale ou la vitesse.

12th Jun 2025, 4:14 PM

HAMYD KHADDA