gsap实现悬浮手风琴带数字图片幻灯切换效果代码-html代码-BFW代码库

gsap实现悬浮手风琴带数字图片幻灯切换效果代码

代码语言：html

所属分类：幻灯片

代码描述：gsap实现悬浮手风琴带数字图片幻灯切换效果代码

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


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

<head>

  <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

html, body, #fg, #bg {
  width:100%;
  height:100%;
  color:#fff;
  font-size:35px;
  font-family:'Montserrat', sans-serif;
  overflow:hidden;
}

div {
  position:absolute;
  top:0;
}

sub {
  font-size:12px;
  display:block;
}

p {
  padding:12px;
}
</style>


</head>

<body >
  <div id="bg"></div>
<div id="fg"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
      <script >
var imgs = [
      '//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png',
      '//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png',
      '//repo.bfw.wiki/bfwrepo/image/5ef941337115b.png',
      '//repo.bfw.wiki/bfwrepo/image/5f9e2418ca70b.png',
      '//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png',
    ],
    n = imgs.length,
    current = n-1,
    closedWidth = Math.floor(window.innerWidth/10)


for (var i=0; i<n; i++){
  
  var bgImg = document.createElement('div');
  bg.appendChild(bgImg);
  
  gsap.set(bgImg, {
    attr:{id:'bgImg'+i, class:'bgImg'},
    width:'100%',
    height:'100%',
    backgroundImage:'url('+imgs[i]+')',
    backgroundSize:'cover',
.........完整代码请登录后点击上方下载按钮下载查看