Let's say i have a gif image of a cat, which for 3 seconds shows the cat walking, and after that the cat jumps. I want to implement the following:
In a specific container div, the cat gif (which has a transparent background) should walk freely and follow the cursor. This means that only the part from 0 - 3 seconds should be played, and then the gif should be restarted, making it seem like a perfect loop.
When the user clicks, the cat gif should jump, so the part after 3 seconds should be played, and then the cat should walk again.
I have no idea how to tangle with the frames of the gif. The only thing i have so far is the "follow" part.
<body>
<div onmousemove="follow(event)" id="container">
<img id="cat" src="cat.gif">
</div>
<script>
function follow(event) {
var cat = document.getElementById("cat");
cat.style.left = event.pageX + 'px';
cat.style.top = event.pageY + 'px';
}
</script>
</body>
Is what i am asking possible? Do i need 2 seperate gifs, one for the jump and one for the walk, or will one suffice? Is there some module i can use to handle the gif part?
