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%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 6px;
    filter: contrast(1.5) grayscale(1);
  }

  .bar__thumb,
  .bar__track {
    opacity: 0;
    transition: opacity 0.2s;
  }

  [data-rounded-scroll='true'] .scroller :is(.bar__thumb, .bar__track) {
    opacity: 1;
  }

  .scroller > svg {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    right: 1rem;
    pointer-events: none;
    /* height: 100%; */
    width: calc(var(--radius) * 2px);
    overflow: visible !important;
    z-index: 2;
  }

  [data-rounded-scroll='true'] .scroller div::-webkit-scrollbar {
    display: none;
  }

  [data-rounded-scroll='true'] div::-webkit-scrollbar {
    display: none;
    opacity: 0 !important;
  }

  [data-rounded-scroll='true'] .scroller div {
    scrollbar-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scroller path {
    stroke-width: calc(var(--stroke-width) * 1px);
  }

  .bar__thumb {
    stroke: color-mix(
      in hsl,
      var(--color, #fff),
      #0000 calc((1 - var(--bar-alpha, 0.5)) * 100%)
    );
    stroke-dasharray: var(--thumb-size) var(--track-length);
  }

  @supports (animation-timeline: scroll()) {
    .bar__thumb {
      -webkit-animation: scroll both linear;
              animation: scroll both linear;
      an.........完整代码请登录后点击上方下载按钮下载查看