A transition or effect

0

Would anyone have any idea of any transition or effect of some image arising from left to right in a sense of being passing in a straight line?

    
asked by anonymous 21.01.2018 / 04:45

1 answer

3

An alternative in pure JS. I used setInterval (continuous timer) that is canceled with clearInterval when the image disappears from the screen. To know when the image disappears from the screen I used offsetLeft which gives me the position of the image from the left of the screen. When the position is greater than the window area ( window.innerWidth ) I stop the timer setInterval .

In CSS, I set% cos_de% to not cause horizontal scrolling in the window, and I also put position: fixed so that the image is outside the window on the left, where left: -200px is the width of the image. 200px is the distance from the image to the top of the window.

In% with_% the value top: 20px; represents how many pixels the image will run. The% w / w in the timer is the time in milliseconds between the timer cycles. When you increase this value, the slower the cycle will occur, that is, the slower the image will move.

document.addEventListener("DOMContentLoaded", function() {
   var img = document.querySelector("#imagem");
   var tempo = setInterval(function(){
      img.offsetLeft > window.innerWidth ?
      clearInterval(tempo)
      : img.style.left = img.offsetLeft+10+"px";
   }, 30);
});
#imagem{
   position: fixed;
   top: 20px;
   left: -200px;
}
<img id="imagem" width="200" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"/>

Repeatafter10seconds

Creatingatriggerthatsimulatestheeventimg.offsetLeft+10:

document.addEventListener("DOMContentLoaded", function() {
   var img = document.querySelector("#imagem");
   var tempo = setInterval(function(){
      if(img.offsetLeft > window.innerWidth){
         clearInterval(tempo);
         setTimeout(function(){
            img.style.left = "-200px";
            var evt = document.createEvent('Event');  
            evt.initEvent('DOMContentLoaded', false, false);  
            document.dispatchEvent(evt);
         }, 10000);
      }else{
         img.style.left = img.offsetLeft+10+"px";
      }
   }, 30);
});
#imagem{
   position: fixed;
   top: 20px;
   left: -200px;
}
<img id="imagem" width="200" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />
    
21.01.2018 / 06:36