WebPonies

It's ponies, walking around your screen.

by Santiago J

HTML

<iframe id="site" src="http://www.reddit.com"></iframe>
<div class="preloader"></div>

CSS

html, body, #site {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
body {
  overflow: hidden;
}
#site {
  border: 0;
}
span {
  position: absolute;
  z-index: 5;
}
img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.flipped img {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.preloader {
  position: absolute;
  top: -9px;
  left: -9px;
  width: 1px;
  height: 1px;
  background: url(http://dl.dropbox.com/u/416738/img/Derpy/derpy_stand_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Derpy/derpy_fly_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Derpy/derpy_walking_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Princess_Luna/Stand_Left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Princess_Luna/Fly_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Princess_Luna/walking_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Princess_Luna/walking_wing_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Trixie/sit_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Trixie/trixie_fireworks_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Trixie/walking_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Twilight/stand_twilight_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Twilight/twilight_trot_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Pinkie/stand_Pinkiepie_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Pinkie/trotcycle_pinkiepie_left.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Pinkie/trotcycle_pinkiepie_left_n_n.gif);
  background: url(http://dl.dropbox.com/u/416738/img/Pinkie/bounce_pinkiepie_left.gif);
  background:...

JavaScript

var goToHashURL, webPonies = { ponies: [], interval: 0, div: null };
webPonies.drag = { pony: null, offsetX: 0, offsetY: 0 };

webPonies.animations = (function(){
  var anim = {}, _set;

  // Derpy
  anim.derpy = _set = [];
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Derpy/derpy_stand_left.gif",
    still: true,
    leftward: true
  });
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Derpy/derpy_fly_left.gif",
    still: false,
    leftward: true
  });
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Derpy/derpy_walking_left.gif",
    still: false,
    leftward: true
  });

  // Filly Luna
  anim.fillyluna = _set = [];
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Princess_Luna/Stand_Left.gif",
    still: true,
    leftward: true
  });
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Princess_Luna/Fly_left.gif",
    still: false,
    leftward: true
  });
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Princess_Luna/walking_left.gif",
    still: false,
    leftward: true
  });
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Princess_Luna/walking_wing_left.gif",
    still: false,
    leftward: true
  });

  // The Great and Powerful Trixie
  anim.trixie = _set = [];
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Trixie/sit_left.gif",
    still: true,
    leftward: true
  });
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Trixie/trixie_fireworks_left.gif",
    still: true,
    leftward: true,
    duration: 3000
  });
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Trixie/walking_left.gif",
    still: false,
    leftward: true
  });

  // Twilight
  anim.twilight = _set = [];
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Twilight/stand_twilight_left.gif",
    still: true,
    leftward: true
  });
  _set.push({
    url: "http://dl.dropbox.com/u/416738/img/Twilight/twilight_trot_left.gif",
    still: false,
    leftward: true
  });

  //...