make new year animation on my web page with santa.gif :)

Question

Here is my personal web page.

I used this html tag for moving PozSanta.gif

<div id="animatedImage" style="position:fixed;padding-top:550px;z-index:99;left:1px;bottom:1px;">
 <img src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/img/Poz_Santa.gif" alt="animatedImage" />
</div>
<script type="text/javascript" src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/js/PozSanta.js"></script>

I want to change something for this, for example when Pozsanta.gif come to end of the Screens right should be come back (walk to right to left ) ? Is that possible if it is how ?

Js file :

http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/js/PozSanta.js

Thanks.

Nope Lee.. I dont have it. Maybe it could make with CSS3 or not ? — Fatih Toprak, Dec 28 '12 at 02:40
Also i found some sulotion for flip image here : http://css-tricks.com/snippets/css/flip-an-image/ now, we just need to hack some jquery or javascript code Anyone help ? — Fatih Toprak, Dec 28 '12 at 02:43

score 2 · Accepted Answer · answered Dec 28 '12 at 04:47

Here is Your code ,A simple css is required to flip the image whether it is a gif or jpg or any othere format we can always apply flip to an image.

Check Your WORKING EXAMPLE HERE Fiddle

NOTE: Image will walk width of screen as it is taken required please copy and check on your desktop

<!DOCTYPE html>
<html>
<style>
.left {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
.right {
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

</style>
<body>
<div id="animatedImage" style="position:fixed;padding-top:550px;z-index:99;left:1px;bottom:1px;">
 <img id="img1" src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/img/Poz_Santa.gif" alt="animatedImage" />
</div>
<script>
var distanceBall=0; 
var directionBall=1; 
document.getElementById('animatedImage').style.top = 10;
document.getElementById('animatedImage').style.left = 10;
var timerToggle=null; 
animateBall();
var setting = 0;          

  function animateBall() {   
  document.getElementById("animatedImage").style.left=distanceBall + "px";

  distanceBall+=directionBall;

  if (distanceBall>window.screen.width - 70) { 
  document.getElementById('animatedImage').style.top = 10;
  document.getElementById('animatedImage').style.left = 10;
  directionBall = -1;
  document.getElementById('img1').className = 'left';
  }

  if (distanceBall<0) {
  directionBall = 1;
  document.getElementById('img1').className = 'right';
  }

  timerToggle=setTimeout(function() { animateBall(); },1);
  }
</script>
</body>
</html>

score 1 · Answer 2 · answered Dec 28 '12 at 02:48

Add an extra condition on this line:

  if (0 > distanceBall && directionBall == 1) 
  { 
    directionBall=0; 
  }
  else if (distanceBall == 0 && directionBall == 0) 
  { 
    directionBall = 1; 
    distanceBall = 1;
  }

Then alternate the direction:

  if (directionBall == 1) 
  { 
     distanceBall += 1;
  }
  else
  {
     distanceBall -= 1;
  }

score -1 · Answer 3 · answered Dec 28 '12 at 02:50

Flipping an image is one thing, when its a flat image, but an animated gif is a series of images lines up to play one after the other, visualize a film reel if you will, and then imaging each movement of your gif as the same thing. So the problem isn't so much as flipping the image as it would be to flip the whole line of images within, which I'm pretty sure isn't possible, not through javascript or any server/client based language I can think of off hand.

One thing you could consider however is extracting all the frames from the gif, and making them a sprite style image, and through some clever scripting flipbook through the sprite images frame by frame as its going across the screen.

Not that I have tested this particular piece of software but one of the first results via google for extracting gif frames is http://www.addictivetips.com/windows-tips/how-to-extract-frames-from-gif-animation-image/ might be able to get you started.

I reckon I could do this [programatically](http://stackoverflow.com/a/13486374/495455) — Jeremy Thompson, Dec 28 '12 at 02:51
chris thank you but i think i can fix it with CSS3 Flip effect just need to hack some js code. — Fatih Toprak, Dec 28 '12 at 02:54
@chris - We can flip .gif image, please check it out. Your methodology to extract frames from .gif and applying sprite style is cumbersome, where we can do it with simple CSS flip. — ameya rote, Dec 28 '12 at 04:54

make new year animation on my web page with santa.gif :)

3 Answers3