滚动动画

codepen: https://codepen.io/quanzaiyu/pen/gvpJqp

结合 TweenMax 插件实现滚动动画。

html {
  height: 100%;
  background: #63D0FF;
}
body {
  margin: 0;
  padding: 0;
  background: #63D0FF;
  height: 100%;
}
#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
#clouds {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/bg-clouds2-tinypng.png") repeat-x 0 bottom #ACE6FF;
  width: 100%;
  height: 230px;
  /*190px*/
  min-height: 230px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0.01);
  transform: translate3d(0, 0, 0.01);
}
#ground {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/56901/grass_tile-tinypng.png") repeat-x 0 0 transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 192px;
  min-height: 192px;
  border: 0 none transparent;
  outline: 0 none transparent;
  -webkit-transform: translate3d(0, 0, 0.01);
  transform: translate3d(0, 0, 0.01);
  will-change: transform;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="wrapper">
  <div id="clouds"></div>
  <div id="ground"></div>
</div>
// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function (event) {
  function ground() {
    var tl = new TimelineMax({
      repeat: -1
    });
    tl.to("#ground", 20, {
      backgroundPosition: "1301px 0px",
      force3D: true,
      rotation: 0.01,
      z: 0.01,
      autoRound: false,
      ease: Linear.easeNone
    });
    return tl;
  }
  function clouds() {
    var tl = new TimelineMax({
      repeat: -1
    });
    tl.to("#clouds", 52, {
      backgroundPosition: "-2247px bottom",
      force3D: true,
      rotation: 0.01,
      z: 0.01,
      //autoRound:false,
      ease: Linear.easeNone
    });
    return tl;
  }
  var masterTL = new TimelineMax({
    repeat: -1
  });
  // window load event makes sure image is
  // loaded before running animation
  window.onload = function () {
    masterTL
      .add(ground(), 0)
      .add(clouds(), 0)
      .timeScale(0.7)
      .progress(1).progress(0)
      .play();
  };
});

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress