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