I'm trying to apply a motion blur effect to a HTML div when scrolling. In order to do this, I'll need to make clone of the each div every 1/5 of a second, and keep its position fixed on the page when scrolling. I'll also need to decrease the opacity of each div clone every 1/5 second, and make sure that there are only 5 clones of the div on the page at a time (so that I won's have hundreds of clones of the div on the page after a few seconds). Would it be possible to create a motion blur effect in JavaScript using this method?

<div id = "blurOnScroll"> Create the illusion of a motion blur by creating clones of this div every 1/5 of a second, reducing the opacity of each clone every 1/5 of a second, and remove each clone as soon as it has completely faded away. </div> <script type = "text/javascript"> function motionBlurEffect(){ //create the illusion of a motion blur effect, as described above. } </script>