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?
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?
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"/>
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" />