gsap+ScrollTrigger+ScrollSmoother实现滚动式触发手风琴式折叠卡片效果代码-html代码-BFW代码库

gsap+ScrollTrigger+ScrollSmoother实现滚动式触发手风琴式折叠卡片效果代码

代码语言：html

代码描述：gsap+ScrollTrigger+ScrollSmoother实现滚动式触发手风琴式折叠卡片效果代码

代码标签： gsap ScrollTrigger ScrollSmoother 滚动触发手风琴折叠卡片

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
body {
  margin: 0;
  background: #fff;
  font-family: sans-serif;
  background: linear-gradient(120deg, #5c2fa6 13.57%, #5a36c0 98.38%);
  scroll-behavior: none;
}

.title {
  font-size: max(2vw, 24px);
  line-height: 1.1;
  padding-bottom: 0.4em;
  color: white;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.text {
  font-size: max(1vw, 15px);
  line-height: 1.4;
  overflow: hidden;
  padding-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.accordions {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20vh;
}

.accordion {
  background: linear-gradient(200deg, #1d91fc 13.57%, #5a36c0 98.38%);
  width: max(50vw, 280px);
  padding: 25px 30px 10px;
  border-radius: 15px;
  margin-bottom: 40px;
  box-shadow: 0 30px 30px -10px rgba(0, 0, 0, 0.3);
}
.accordion:nth-child(2) {
  background: linear-gradient(200deg, #f28885 13.57%, #e94f66 98.38%);
}
.accordion:nth-child(3) {
  background: linear-gradient(200deg, #65bb76 13.57%, #466fab 98.38%);
}
.accordion:nth-child(4) {
  background: linear-gradient(200deg, #c215d1 13.57%, #9813a1 98.38%);
}

.spacer {
  height: 70vh;
}

@media (max-width: 480px) {
  .accordion {
    padding: 15px 20px 8px;
  }

  .title {
    font-size: 20px;
  }
}
</style>

  


</head>

<body >
  <div id="wrapper">
  <div id="content">
    <div class="spacer"></div>
    <div class="accordions">
      <div class="accordion">
        <div class="title">
          All-screen design.
        </div>
        <div class="text">
          Lets you immerse yourself in whatever you’re reading, watching, or creating. The 10.9-inch Liquid Retina display features advanced technologies like True Tone, P3 wide color, and an antireflective coating.1
        </div>
      </div>
      <div class="accordion">
        <div class="title"> Beauty all around.</div>
        <div class="text">
          The breakthrough M1 chip is now in Air. An 8-core CPU delivers up to 60 percent faster performance than the previous generation, making Air a cre.........完整代码请登录后点击上方下载按钮下载查看