Espero que las imágenes se desplacen hacia la derecha. Runner incrementa e imprime 1px, 2px, 3px, etc. en la consola, pero no se establecerá un nuevo margen. ¿Cuál es el problema?
Junto con el código a continuación, lo que he escrito anteriormente debería ser suficiente para comprender mi problema. Pero, en este punto, simplemente estoy escribiendo para deshacerme del mensaje para escribir más texto.
<body> <div class="normal"> <img id="normal" src="whiteboard.jpeg"> </div> <div class="scaled"> <img id="scaled" src="whiteboard.jpeg"> </div> </body> <style> .normal{ background-image: url('whiteboard.jpeg'); position:absolute; z-index:-1; } .scaled{ transform:scale(120%); z-index:2; clip-path: circle(5% at 33% 42%); } .normal, .scaled{ width:100vw; } div img{ width:100%; height:auto; } </style> <script> window.onload=function(){ const normal = document.getElementById('normal'); const scaled = document.getElementById('scaled'); let runner =0; setInterval(function(){ normal.style.marginRight="-"+runner+"px"; scaled.style.marginRight="-"+runner+"px"; runner++; console.log("respons - "+runner+"px") },50); } </script>El estilo marginRight describe la distancia del elemento div al lado derecho de su padre. Un marginRight negativo no funcionará aquí; en su lugar, intente marginLeft . Dependiendo de la dirección deseada de la animación, use un valor positivo o negativo.
window.onload = function() { const normal = document.getElementById('normal'); const scaled = document.getElementById('scaled'); let runner = 0; setInterval(function() { normal.style.marginLeft = "-" +runner + "px"; scaled.style.marginLeft = "-" +runner + "px"; runner++; console.log("respons - "+runner+"px") }, 50); } <body> <div class="normal"> <img id="normal" src="whiteboard.jpeg"> </div> <div class="scaled"> <img id="scaled" src="whiteboard.jpeg"> </div> </body> <style> .normal { background-image: url('whiteboard.jpeg'); position: absolute; z-index: -1; background-color: blue; } .scaled{ transform: scale(120%); z-index:2; clip-path: circle(5% at 33% 42%); background-color: red; } .normal, .scaled{ width: 100vw; } div img { width: 100%; height: auto; } </style>