gsap立体滚动图片效果-html代码-BFW代码库

gsap立体滚动图片效果

代码语言：html

代码描述：gsap立体滚动图片效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
div {
  position:absolute;
  user-select: none;
}

#container {
  position:fixed;
  width:100%;
  height:100%;
  overflow:hidden;
}

#scrollDist {
  top:0;
  width:100%;  
  height:400%;
}
</style>

</head>
<body translate="no">
<div id="scrollDist"></div>
<div id="container"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/ScrollTrigger.min.js"></script>
<script>
var c = document.getElementById('container'),
    boxes = [];

makeBoxes(30);

function makeBoxes(n){
  for (var i=0; i<n; i++){
    var b = document.createElement('div');
    boxes.push(b);
    c.appendChild(b);
  }
}

gsap.to(c, 0.4, {perspective:200, backgroundColor:'#fff'});

for (var i=0; i<boxes.length; i++){
  var b = boxes[i];
  gsap.set(b, {
    left:'50%',
  	top:'50%',
    mar.........完整代码请登录后点击上方下载按钮下载查看