gsap+ScrollTrigger实现滚动页面幻灯片展示切换效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap+ScrollTrigger实现滚动页面幻灯片展示切换效果代码，包含垂直与水平切换。

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

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

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Signika+Negative:wght@400;600&display=swap");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: white;
  font-family: "Signika Negative", sans-serif, Arial;
}

h4 {
  margin: 0;
  width: 100%;
  max-width: 800px;
  padding: 0 1rem;
  font-size: 30px;
  text-align: center;
}

.section {
  width: 100%;
  height: 100vh;
  background-color: coral;
  position: relative;
  z-index: 10;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.final {
  z-index: 20;
}

.gray {
  background-color: #777;
  background-image: radial-gradient(
      circle at 47% 14%,
      rgba(205, 205, 205, 0.04) 0%,
      rgba(205, 205, 205, 0.04) 43%,
      transparent 43%,
      transparent 100%
    ),
    radial-gradient(
      circle at 35% 12%,
      rgba(215, 215, 215, 0.04) 0%,
      rgba(215, 215, 215, 0.04) 4%,
      transparent 4%,
      transparent 100%
    ),
    radial-gradient(
      circle at 1% 35%,
      rgba(24, 24, 24, 0.04) 0%,
      rgba(24, 24, 24, 0.04) 37%,
      transparent 37%,
      transparent 100%
    ),
    radial-gradient(
      circle at 21% 1%,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.04) 26%,
      transparent 26%,
      transparent 100%
    ),
    radial-gradient(
      circle at 23% 82%,
      rgba(249, 249, 249, 0.04) 0%,
      rgba(249, 249, 249, 0.04) 60%,
      transparent 60%,
      transparent 100%
    ),
    radial-gradient(
      circle at 11% 54%,
      rgba(251, 251, 251, 0.04) 0%,
      rgba(251, 251, 251, 0.04) 23%,
      transparent 23%,
      transparent 100%
    ),
    radial-gradient(
      circle at 69% 68%,
      rgba(234, 234, 234, 0.04) 0%,
      rgba(234, 234, 234, 0.04) 10%,
      transparent 10%,
      transparent 100%
    ),
    linear-gradient(90deg, #777, #606060);
}

.blue {
  background-color: #2c7ad2;
  background-image: radial-gradient(
      circle at 47% 14%,
      rgba(205, 205, 205, 0.04) 0%,
      rgba(205, 205, 205, 0.04) 43%,
      transparent 43%,
      transparent 100%
    ),
    radial-gradient(
      circle at 35% 12%,
      rgba(215, 215, 215, 0.04) 0%,
      rgba(215, 215, 215, 0.04) 4%,
      transparent 4%,
      transparent 100%
    ),
    radial-gradient(
      circle at 1% 35%,
      rgba(24, 24, 24, 0.04) 0%,
      rgba(24, 24, 24, 0.04) 37%,
      transparent 37%,
      transparent 100%
    ),
    radial-gradient(
      circle at 21% 1%,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.04) 26%,
      transparent 26%,
      transparent 100%
    ),
    radial-gradient(
      circle at 23% 82%,
      rgba(249, 249, 249, 0.04) 0%,
      rgba(249, 249, 249, 0.04) 60%,
      transparent 60%,
      transparent 100%
    ),
    radial-gradient(
      circle at 11% 54%,
      rgba(251, 251, 251, 0.04) 0%,
      rgba(251, 251, 251, 0.04) 23%,
      transparent 23%,
      transparent 100%
    ),
    radial-gradient(
      circle at 69% 68%,
      rgba(234, 234, 234, 0.04) 0%,
      rgba(234, 234, 234, 0.04) 10%,
      transparent 10%,
      transparent 100%
    ),
    linear-gradient(90deg, #2c7ad2, #1568c6);
}

.orange {
  background-color: #e77614;
  background-image: radial-gradient(
      circle at 46% 40%,
      rgba(228, 228, 228, 0.06) 0%,
      rgba(228, 228, 228, 0.06) 13%,
      transparent 13%,
      transparent 100%
    ),
    radial-gradient(
      circle at 11% 41%,
      rgba(198, 198, 198, 0.06) 0%,
      rgba(198, 198, 198, 0.06) 19%,
      transparent 19%,
      transparent 100%
    ),
    radial-gradient(
      circle at 52% 23%,
      rgba(14, 14, 14, 0.06) 0%,
      rgba(14, 14, 14, 0.06) 69%,
      transparent 69%,
      transparent 100%
    ),
    radial-gradient(
      circle at 13% 85%,
      rgba(148, 148, 148, 0.06) 0%,
      rgba(148, 148, 148, 0.06) 44%,
      transparent 44%,
      transparent 100%
    ),
    radial-gradient(
      circle at 57% 74%,
      rgba(232, 232, 232, 0.06) 0%,
      rgba(232, 232, 232, 0.06) 21%,
      transparent 21%,
      transparent 100%
    ),
    radial-gradient(
      circle at 59% 54%,
      rgba(39, 39, 39, 0.06) 0%,
      rgba(39, 39, 39, 0.06) 49%,
      transparent 49%,
      transparent 100%
    ),
    radial-gradient(
      circle at 98% 38%,
      rgba(157, 157, 157, 0.06) 0%,
      rgba(157, 157, 157, 0.06) 24%,
      transparent 24%,
      transparent 100%
    ),
    radial-gradient(
      circle at 8% 6%,
      rgba(60, 60, 60, 0.06) 0%,
      rgba(60, 60, 60, 0.06) 12%,
      transparent 12%,
      transparent 100%
    ),
    linear-gradient(90deg, #ff7600, #ff7600);
}

.red {
  background-color: #c82736;
  background-image: radial-gradient(
      circle at 19% 90%,
      rgba(190, 190, 190, 0.04) 0%,
      rgba(190, 190, 190, 0.04) 17%,
      transparent 17%,
      transparent 100%
    ),
    radial-gradient(
      circle at 73% 2%,
      rgba(78, 78, 78, 0.04) 0%,
      rgba(78, 78, 78, 0.04) 94%,
      transparent 94%,
      transparent 100%
    ),
    radial-gradient(
      circle at 45% 2%,
      rgba(18, 18, 18, 0.04) 0%,
      rgba(18, 18, 18, 0.04) 55%,
      transparent 55%,
      transparent 100%
    ),
    radial-gradient(
      circle at 76% 60%,
      rgba(110, 110, 110, 0.04) 0%,
      rgba(110, 110, 110, 0.04) 34%,
      transparent 34%,
      transparent 100%
    ),
    radial-gradient(
      circle at 68% 56%,
      rgba(246, 246, 246, 0.04) 0%,
      rgba(246, 246, 246, 0.04) 16%,
      transparent 16%,
      transparent 100%
    ),
    radial-gradient(
      circle at 71% 42%,
      rgba(156, 156, 156, 0.04) 0%,
      rgba(156, 156, 156, 0.04) 47%,
      transparent 47%,
      transparent 100%
    ),
    radial-gradient(
      circle.........完整代码请登录后点击上方下载按钮下载查看