gsap+tweakpane实现可配置参数修改滚动条滚动效果代码-html代码-BFW代码库

gsap+tweakpane实现可配置参数修改滚动条滚动效果代码

代码语言：html

代码描述：gsap+tweakpane实现可配置参数修改滚动条滚动效果代码

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

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

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');


@layer normalize, base, demo, snapping;

@layer snapping {
  @supports (animation-timeline: scroll()) {
    .scroller header,
    .scroller footer {
      scroll-snap-align: unset;
    }
    .scroller header {
      --align: start;
      animation: snap both linear reverse;
      animation-timeline: scroll(nearest);
      animation-range: calc(var(--padding, 0) * 1px) 0;
    }
    .scroller footer {
      --align: end;
      -webkit-animation: snap both linear;
              animation: snap both linear;
      animation-timeline: scroll(nearest);
      animation-range: calc(100% - (var(--padding, 0) * 1px)) 100%;
    }
    @-webkit-keyframes snap {
      to {
        scroll-snap-align: var(--align, start);
      }
    }
    @keyframes snap {
      to {
        scroll-snap-align: var(--align, start);
      }
    }
  }
}

@layer demo {
  :root {
    --size: 300px;
    --radius: 32;
    --padding: 64px;
    --bg: hsl(180 0% 33%);
    --bar: hsl(0 0% 100% / 0.5);
    --panel: hsl(20 60% 50%);
    timeline-scope: --scroller;
  }
  /**
   * Think the idea here would be to translate a fake scrollbar up/down
   * Clip the edges and rotate a clipped bordered element on the ends
   * If we need the fatness, we need to go with something like a morphing SVG
   * Or we might get away with transform-origin 100% 0 and scale 1.1 to get the thicc
   * Might be easier to drop two SVG at each end though for that.
   * */
  .scroller {
    position: relative;
    width: clamp(300px, 50vmin, 600px);
    aspect-ratio: 3 / 4;
    resize: both;
    overflow: hidden;
    /* padding: 0 0.5rem 0 0; */
    padding: 1rem;
  }

  .scroller img {
    width: 100%;
   .........完整代码请登录后点击上方下载按钮下载查看