gsap实现三维滚动可点击放大画廊相册效果代码-html代码-BFW代码库

gsap实现三维滚动可点击放大画廊相册效果代码

代码语言：html

代码描述：gsap实现三维滚动可点击放大画廊相册效果代码，参与插件有ScrollTrigger、DrawSVGPlugin3、ScrollToPlugin3。

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


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

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

html, body, #app {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  font-size:0;
  font-family: 'Montserrat', sans-serif;
}

#app {
  opacity:0;
  height:auto;
  background:radial-gradient(#ccc, #999);
}

#app img {
  display:block;
}

#detail {
  position:absolute;
  width:100%;
  height:100%;
  background:#111;
  top:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
}

#detailImg {
  width:85%;
  height:85%;
}

#detailTxt {
  color:#ccc;
  font-size:20px;
  letter-spacing:1px;
}

svg {
  pointer-events:none;
  position:absolute;
  top:0;
  left:0;
}

#headlines {
  max-width:800px;
  min-width:450px;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
</style>



</head>

<body  >
  <div id="scrollDist"></div>

<div id="app">
  
  <svg id="headlines" fill="none" stroke="#fff" stroke-width="3" viewBox="0 0 586 150">
    
    <g id="txt1">
      <path d=".........完整代码请登录后点击上方下载按钮下载查看