En este artículo, aprenderemos a crear un div HTML en movimiento usando JavaScript. El div se moverá de izquierda a derecha usando HTML , CSS y JavaScript .
Acercarse:
- Tenemos que crear un div HTML y agregar algo de CSS al div usando una bola de clase .
- En CSS, agregamos algo de color de fondo al cuerpo y le damos algo de alto, ancho y color al div .
- Ahora agregaremos margin-left al div usando JavaScript. Así que se moverá de izquierda a derecha.
- En JavaScript, tomamos el div usando el nombre de identificación. Y después de un intervalo de tiempo, agregaremos margin-left al div .
Código HTML:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<style>
body {
background-color: aqua;
display: flex;
align-items: center;
}
.ball {
height: 12rem;
width: 12rem;
background-color: white;
border-radius: 50%;
margin-top: 20rem;
}
</style>
</head>
<body>
<div class="container">
<div class="ball" id="ballID"></div>
</div>
<script>
let ball = document.getElementById("ballID");
var myVar = setInterval(spostaDiv, 90);
var margin = 0;
let l = window.screen.width;
let w = 1300;
function spostaDiv() {
console.log(w);
if (margin == w) {
margin = 0 + "px";
} else {
ball.style.marginLeft = margin + "px";
}
margin += 10;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por saurabh294 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA