gsap实现圆环立体视觉滚动幻灯片效果代码-html代码-BFW代码库

gsap实现圆环立体视觉滚动幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：gsap实现圆环立体视觉滚动幻灯片效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
html, body, .stage, .ring, .img {
  width:100%;
  height: 100%;
  transform-style: preserve-3d;
  user-select:none;
}

html, body, .stage {
  overflow:hidden;
  background:#000;
  
}

div, svg {
  position: absolute;
}

.container {
  perspective: 2000px;
  width: 300px;
  height: 400px;  
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
</style>


</head>

<body >
  <div class="stage">
  
  
<div class="container">
  <div class="ring">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
</div>

</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.min.js"></script>
      <script  >
let xPos = 0;

gsap.timeline().
set('.ring', { rotationY: 180, cursor: 'grab' }) //set initial rotationY so the parallax jump happens off screen
.set('.img', { // apply transform rotations to each image
  rotateY: i => i * -36,
  transformOrigin: '50% 50% 500px',
  z: -500,
  backgroundImage: i => 'url(//re.........完整代码请登录后点击上方下载按钮下载查看