EffectHub.com: your best source for gaming

Recommendation

More Effects...

function sceneOne() {
  var tl = new TimelineMax();

tl.add("begin", "+=1");
  tl.fromTo(".pumpkin", 2, {
    scale: 0,
    x: 0,
    y: 0,
    rotation: 180
  }, {
    scale: 1,
    bezier: {
      type: "soft",
      values: [{
        x: 400,
        y: 175
      }, {
        x: 30,
        y: 250
      }],
      autoRotate: false
    },
    rotation: 0,
    ease: Circ.easeInOut
  }, "begin+=1");
  tl.to("#face, #back-area", 1, {
    opacity: 0.5,
    yoyo: true,
    repeatDelay: 0.65,
    repeat: -1,
    ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 1, points: 20, taper: "none", randomize:  true, clamp: false})
  }, "begin+=3");
  tl.from("h1", 2, {
    opacity: 0,
    ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 1, points: 20, taper: "none", randomize:  true, clamp: false})
  }, "begin+=3");
  tl.from("h1", 1, {
    rotationX: 180,
    ease: Sine.easeOut
  }, "begin+=3");

return tl;
}

//add it all to master timeline
var master = new TimelineMax();
master.add(sceneOne(), "first");

CSS

body, html {
  width: 100%;
  height: 100%;
  min-height: 700px;
  background: #041e2b;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #041e2b 0%, #407886 41%, #d4dbdb 69%, black 69%, black 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #041e2b 0%, #407886 41%, #d4dbdb 69%, black 69%, black 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#041e2b', endColorstr='#000000',GradientType=0 );
  /* IE6-9 */
  font-family: 'Freckle Face', cursive;
}

#foreground {
  height: 600px;
  position: absolute;
  margin-top: -200px;
  overflow-y: hidden;
}

h1 {
  position: absolute;
  top: 550px;
  width: 100%;
  text-align: center;
  font-size: 45px;
  color: orange;
  white-space: pre;
  margin-left: 20px;
}

span {
  letterspacing: 200px;
}

.moon {
  left: 25%;
  position: absolute;
  top: 100px;
}

.horseman {
  width: 184px;
  height: 123px;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/horse-hallow5.svg");
  -webkit-animation: horsemove 0.7s steps(15) infinite;
          animation: horsemove 0.7s steps(15) infinite;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 300px;
}

.pumpkin {
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 300px;
}

.ground {
  width: 151%;
  height: 697px;
  position: absolute;
  background-size: 800px 716px;
  left: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.front {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowfront4.svg") repeat-x;
  background-size: 1000px 871px;
  top: -100px;
  -webkit-animation: bk 20s -5s linear infinite;
          animation: bk 20s -5s linear infinite;
}

.frontmid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowmidfront2.svg") repeat-x;
  background-size: 1000px 871px;
  top: -100px;
  -webkit-animation: bk 50s -5s linear infinite;
          animation: bk 50s -5s linear infinite;
}

.mid {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowmid2.svg") repeat-x;
  background-size: 1000px 871px;
  top: -100px;
  -webkit-animation: bk 100s -5s linear infinite;
          animation: bk 100s -5s linear infinite;
}

.back {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowback2.svg") repeat-x;
  background-size: 1000px 871px;
  top: -100px;
  -webkit-animation: bk 100s -5s linear infinite;
          animation: bk 100s -5s linear infinite;
}

@-webkit-keyframes horsemove {
  100% {
    background-position: 0 -1848px;
  }
}

@keyframes horsemove {
  100% {
    background-position: 0 -1848px;
  }
}
@-webkit-keyframes bk {
  100% {
    background-position: -200% 0;
  }
}
@keyframes bk {
  100% {
    background-position: -200% 0;
  }
}

HTML

Recommendation

Join Effecthub.com