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%
   .........完整代码请登录后点击上方下载按钮下载查看