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, user-scalable=0, maximum-scale=1.0"
    />
  
  
  
<style>
/* @import 'normalize.css' layer(normalize); */
@import url('//repo.bfw.wiki/bfwrepo/css/normalize.min.css') layer(normalize);

@layer normalize, base, demo, grid, setup, scroll, novelty;

@layer novelty {
  @property --flip {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  @-webkit-keyframes flip {
    to {
      --flip: 1;
    }
  }
  @keyframes flip {
    to {
      --flip: 1;
    }
  }
  [data-enhanced='true'] {
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: scroll()) and (animation-range: 0 100%) {
        footer > span {
          -webkit-animation: flip both steps(1, end);
                  animation: flip both steps(1, end);
          animation-timeline: scroll(root);
        }

        footer .arm {
          opacity: var(--flip);
        }

        footer .table {
          display: inline-block;
          transform-origin: 0 50%;
          rotate: calc((-180 + (var(--flip) * 180)) * 1deg);
          translate: calc(16% + (var(--flip) * -16%)) calc(var(--flip) * -45%);
          transform: translateY(calc(var(--flip) * 90%));
          transition-property: translate, rotate, transform;
          transition-duration: calc(var(--flip) * 0.2s);
          transition-duration: 0.2s, 0.24s, 0.5s;
        }

        .spring {
          outline: 1px dashed red;
          -webkit-clip-path: inset(0 0 0 0);
                  clip-path: inset(0 0 0 0);
        }

        .spring span {
          rotate: calc(-180deg + (var(--flip) * 180deg));
          display: inline-block;
          transform-origin: 50% 150%;
          transition: rotate 0.24s;
        }
      }
    }
  }
}

@layer scroll {
  :root {
    --power-1-out: linear(
      0 0%,
      0.0027 3.64%,
      0.0106 7.29%,
      0.0425 14.58%,
      0.0957 21.87%,
      0.1701 29.16%,
      0.2477 35.19%,
      0.3401 41.23%,
      0.5982 55.18%,
      0.7044 61.56%,
      0.7987 68.28%,
      0.875 75%,
      0.9297 81.25%,
      0.9687 87.5%,
      0.9922 93.75%,
      1 100%
    );
    --power-2-out: linear(
      0 0%,
      0.0036 9.62%,
      0.0185 16.66%,
      0.0489 23.03%,
      0.0962 28.86%,
      0.1705 34.93%,
      0.269 40.66%,
      0.3867 45.89%,
      0.5833 52.95%,
      0.683 57.05%,
      0.7829 62.14%,
      0.8621 67.46%,
      0.8991 70.68%,
      0.9299 74.03%,
      0.9545 77.52%,
      0.9735 81.21%,
      0.9865 85%,
      0.9949 89.15%,
      1 100%
    );
    --power-3-out: linear(
      0 0%,
      0.0029 13.8%,
      0.0184 21.9%,
      0.0339 25.51%,
      0.0551 28.81%,
      0.0827 31.88%,
      0.1168 34.76%,
      0.1962 39.57%,
      0.3005 44.02%,
      0.4084 47.53%,
      0.6242 53.45%,
      0.7493 57.93%,
      0.8495 62.97%,
      0.8888 65.67%,
      0.9213 68.51%,
      0.9629 73.9%,
      0.9876 80.16%,
      0.998 87.5%,
      1 100%
    );
    --power-4-out: linear(
      0 0%,
      0.0012 14.95%,
      0.0089 22.36%,
      0.0297 28.43%,
      0.0668 33.43%,
      0.0979 36.08%,
      0.1363 38.55%,
      0.2373 43.07%,
      0.3675 47.01%,
      0.5984 52.15%,
      0.7121 55.23%,
      0.8192 59.21%,
      0.898 63.62%,
      0.9297 66.23%,
      0.9546 69.06%,
      0.9733 72.17%,
      0.9864 75.67%,
      0.9982 83.73%,
      1 100%
    );
    --sine: linear(
      0 0%,
      0.2861 18.47%,
      0.4829 32.08%,
      0.6437 44.52%,
      0.7712 56.07%,
      0.8722 67.47%,
      0.9115 73.02%,
      0.9434 78.49%,
      0.9682 83.91%,
      0.9859 89.3%,
      0.9965 94.66%,
      1 100%
    );
  }
  @-webkit-keyframes fade {
    0%,
    55% {
      opacity: 0;
.........完整代码请登录后点击上方下载按钮下载查看