My goal is to create a visual representation of file transfer, such as moving a file from one folder to another. I have successfully achieved this using JavaScript with the following code:
<script type="text/javascript>
var img;
var animateR;
var animateL;
function init(){
img = document.getElementById('file');
img.style.left = '35px';
}
function moveRight(){
img.style.display= 'block';
img.style.left = parseInt(img.style.left) + 10 + 'px';
animateR = setTimeout(moveRight,30);
if(parseInt(img.style.left)>600){
clearTimeout(animateR);
moveLeft();
}
}
function moveLeft(){
img.style.left = parseInt(img.style.left) - 10 + 'px';
animateL = setTimeout(moveLeft,30);
if(parseInt(img.style.left)<38){
clearTimeout(animateL);
moveRight();
}
}
window.onload =init;
</script>
While this code functions as intended, I would like to enhance it by adding a rotating effect to the file as it moves between folders and while being uploaded.
Considering the desired effect of "flying files," I am contemplating whether using a gif would be the best approach for achieving this.
I envision an animated effect resembling flying files