js+css实现图片相册滚动式展示放大效果代码-html代码-BFW代码库

代码语言：html
代码描述：js+css实现图片相册滚动式展示放大效果代码
下面为部分代码预览，完整代码请点击下载或在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 "normalize.css";

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

body {
        display: flex;
        justify-content: flex-end;
        min-height: 100vh;
        font-family:  "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
}

body::after {
        content: "";
        position: fixed;
        right: 0;
        width: calc(var(--snap-size) + 2rem);
        background: canvas;
        -webkit-mask: linear-gradient(white, transparent calc(var(--snap-size) * 1.5) calc(100% - (var(--snap-size) * 1.5)), white);
                mask: linear-gradient(white, transparent calc(var(--snap-size) * 1.5) calc(100% - (var(--snap-size) * 1.5)), white);
        top: 0;
        height: 100vh;
        pointer-events: none;
        z-index: 10;
}

body::before {
        --size: 40px;
        --line: color-mix(in lch, canvasText 15%, hsl(0 0% 100% / 0.25));
        content: '';
        height: 100vh;
        width: 100vw;
        position: fixed;
        background: linear-gradient(
                                90deg,
                                var(--line) 1px,
                                transparent 1px var(--size)
                        )
                        50% 50% / var(--size) var(--size),
                linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
                        var(--size) var(--size);
        -webkit-mask: linear-gradient(-25deg, transparent 65%, white);
                mask: linear-gradient(-25deg, transparent 65%, white);
        top: 0;
        transform-style: flat;
        pointer-events: none;
        z-index: -1;
}

html {
        color-scheme: dark only;
        scroll-behavior: smooth;
        -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory;
}

:root {
  --count: 50;
        --snap-size: 48px;
        --offset: 1;
}

@media(min-width: 768px) {
        :root {
                --offset: 2;
        }
}

main {
        padding-left: 1rem;
        padding-right: calc(var(--snap-size) * 5);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: grid;
        height: calc(100vh * var(--count));
        grid-template-rows: repeat(var(--count), 1fr);
        place-items: center;
        -webkit-animation: img-reel both steps(calc(var(--count) - 1));
                animation: img-reel both steps(calc(var(--count) - 1));
        animation-timeline: scroll(root);
        pointer-events: none;
}

@media(max-width: 768px) {
        main {
                display: none;
        }
}

@-webkit-keyframes img-reel {
        to {
                translate: 0 calc(-100% + 100vh);
        }
}

@keyframes img-reel {
        to {
                translate: 0 calc(-100% + 100vh);
        }
}

aside {
        width: var(--snap-size);
        margin-top: calc(50vh - (var(--snap-size) * 0.25));
        margin-bottom: calc(50vh - (var(--snap-size) * 0.5));
        z-index: 2;
}

aside ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        list-style-type: none;
        position: relative;
        right: 1rem;
        align-items: flex-end;
        transform-style: preserve-3d;
}

@property --active {
        initial-value: 0;
        inherits: true;
        syntax: '<number>';
}

li {
        scroll-snap-align: center;
        scroll-margin-block: calc(50vh - var(--snap-size));
        container-type: size;
        flex: 1 1 var(--snap-size);
        aspect-ratio: 1;
        -webkit-animation: scale both linear;
                animation: scale both linear;
        animation-timeline: view();
        animation-range: cover calc(50% - (var(--snap-size) * var(--offset))) cover calc(50% + (var(--snap-size) * var(--offset)));
        transform-origin: 100% 50%;
}

@media(min-width: 768px) {
        li {
                filter: saturate(0.2);
                -webkit-animation: scale-l both linear;
                        animation: scale-l both linear;
                animation-timeline: view();
                animation-range: cover calc(50% - (var(--snap-size) * var(--offset))) cover calc(50% + (var(--snap-size) * var(--offset)));
        }
}

@-webkit-keyframes scale {
        50% {
                --active: 1;
                z-index: 1000;
        }
}

@keyframes scale {
        50% {
                --active: 1;
                z-index: 1000;
        }
}

@-webkit-keyframes scale-l {
        50% {
                translate: -120% 0;
                scale: 2;
                transform: translate3d(0, 0, 1000px);
                filter: saturate(1);
                z-index: 1000;
        }
}

@keyframes scale-l {
        50% {
                translate: -120% 0;
                scale: 2;
                transform: translate3d(0, 0, 1000px);
                filter: saturate(1);
                z-index: 1000;
        }
}

li img {
        height: 100%;
        width: 100%;
        border-radius: 6px;
}



li a {
        min-width: 100cqw;
        min-height: 100cqh;
        max-width: 600px;
        max-height: 600px;
        width: 100%;
        height: 100%;
        display: block;
        border: 4px solid transparent;
        border-radius: 12px;
        position: relative;
        position: absolute;
        right: 0;
        top: 50%;
        transform-origin: 100% 50%;
        translate: calc((var(--active) * (var(--snap-size) + 1rem)) * -1) -50%;
        width: calc((var(--active) * (100vw - (var(--snap-size) + 3rem))));
        height: calc((var(--active) * (100vw - (var(--snap-size) + 3rem))));
        aspect-ratio: 1;
        z-index: calc(1 + (var(--active) * 999));
}

aside span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
}

main img {
        width: 100%;
        max-width: 600px;
        max-height: 90vh;
        -o-object-fit: cover;
           object-fit: cover;
}

.bear-link {
        color: canvasText;
        position: fixed;
        top: 1rem;
        left: 1rem;
        width: 48px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        opacity: 0.8;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
        opacity: 1;
}
.bear-link svg {
        width: 75%;
}
</style>


  
  
</head>

<body translate="no">
  <aside>
      <nav>
        <ul>
          <li id="img-1">
            <a href="#img-1"
              ><img src="https://picsum.photos/600/600?random=1" alt="" /><span
                >See image 1</span
              ></a
            >
          </li>
          <li id="img-2">
            <a href="#img-2"
              ><img src="https://picsum.photos/600/600?random=2" alt="" /><span
                >See image 2</span
              ></a
            >
          </li>
          <li id="img-3">
            <a href="#img-3"
              ><img src="https://picsum.photos/600/600?random=3" alt="" /><span
                >See image 3</span
              ></a
            >
          </li>
          <li id="img-4">
            <a href="#img-4"
              ><img src="https://picsum.photos/600/600?random=4" alt="" /><span
                >See image 4</span
              ></a
            >
          </li>
          <li id="img-5">
            <a href="#img-5"
              ><img src="https://picsum.photos/600/600?random=5" alt="" /><span
                >See image 5</span
              ></a
            >
          </li>
          <li id="img-6">
            <a href="#img-6"
              ><img src="https://picsum.photos/600/600?random=6" alt="" /><span
                >See image 6</span
              ></a
            >
          </li>
          <li id="img-7">
            <a href="#img-7"
              ><img src="https://picsum.photos/600/600?random=7" alt="" /><span
                >See image 7</span
              ></a
            >
          </li>
          <li id="img-8">
            <a href="#img-8"
              ><img src="https://picsum.photos/600/600?random=8" alt="" /><span
                >See image 8</span
              ></a
            >
          </li>
          <li id="img-9">
            <a href="#img-9"
              ><img src="https://picsum.photos/600/600?random=9" alt="" /><span
                >See image 9</span
              ></a
            >
          </li>
          <li id="img-10">
            <a href="#img-10"
              ><img src="https://picsum.photos/600/600?random=10" alt="" /><span
                >See image 10</span
              ></a
            >
          </li>
          <li id="img-11">
            <a href=".........完整代码请登录后点击上方下载按钮下载查看