gsap实现知识点哲理滚动全屏幻灯片滚动条代码-html代码-BFW代码库

gsap实现知识点哲理滚动全屏幻灯片滚动条代码

代码语言：html

所属分类：幻灯片

代码描述：gsap实现知识点哲理滚动全屏幻灯片滚动条代码

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<style>
    :root {
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "Geist Mono", monospace;
  --font-syne: "Syne", sans-serif;
  --font-grotesk: "Space Grotesk", sans-serif;
  --font-handwriting: "Dancing Script", cursive;

  --gradient-bg: linear-gradient(
    110deg,
    oklch(58% 0.28 255) 0%,
    oklch(42% 0.34 295) 100%
  );

  --color-text-nearwhite: oklch(100% 0 0);
  --color-text-muted: oklch(100% 0 0 / 0.82);
  --color-text-subtle: oklch(100% 0 0 / 0.45);

  --color-accent-cyan: oklch(88% 0.15 201);
}



*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-accent-cyan) 90%, transparent) transparent;

  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-accent-cyan) 90%, transparent);

    &:hover {
      background: var(--color-accent-cyan);
    }
  }
}

::selection {
  background: var(--color-accent-cyan);
  color: #001014;
}

html {
  background: #0f0a1e;
  color: var(--color-text-nearwhite);
  font-family: var(--font-serif);
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  cursor: default;
}

.app-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--gradient-bg);
}

.grain-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' %3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='.........完整代码请登录后点击上方下载按钮下载查看