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="#img-11"
              ><img src="https://picsum.photos/600/600?random=11" alt="" /><span
                >See image 11</span
              ></a
            >
          </li>
          <li id="img-12">
            <a href="#img-12"
              ><img src="https://picsum.photos/600/600?random=12" alt="" /><span
                >See image 12</span
              ></a
            >
          </li>
          <li id="img-13">
            <a href="#img-13"
              ><img src="https://picsum.photos/600/600?random=13" alt="" /><span
                >See image 13</span
              ></a
            >
          </li>
          <li id="img-14">
            <a href="#img-14"
              ><img src="https://picsum.photos/600/600?random=14" alt="" /><span
                >See image 14</span
              ></a
            >
          </li>
          <li id="img-15">
            <a href="#img-15"
              ><img src="https://picsum.photos/600/600?random=15" alt="" /><span
                >See image 15</span
              ></a
            >
          </li>
          <li id="img-16">
            <a href="#img-16"
              ><img src="https://picsum.photos/600/600?random=16" alt="" /><span
                >See image 16</span
              ></a
            >
          </li>
          <li id="img-17">
            <a href="#img-17"
              ><img src="https://picsum.photos/600/600?random=17" alt="" /><span
                >See image 17</span
              ></a
            >
          </li>
          <li id="img-18">
            <a href="#img-18"
              ><img src="https://picsum.photos/600/600?random=18" alt="" /><span
                >See image 18</span
              ></a
            >
          </li>
          <li id="img-19">
            <a href="#img-19"
              ><img src="https://picsum.photos/600/600?random=19" alt="" /><span
                >See image 19</span
              ></a
            >
          </li>
          <li id="img-20">
            <a href="#img-20"
              ><img src="https://picsum.photos/600/600?random=20" alt="" /><span
                >See image 20</span
              ></a
            >
          </li>
          <li id="img-21">
            <a href="#img-21"
              ><img src="https://picsum.photos/600/600?random=21" alt="" /><span
                >See image 21</span
              ></a
            >
          </li>
          <li id="img-22">
            <a href="#img-22"
              ><img src="https://picsum.photos/600/600?random=22" alt="" /><span
                >See image 22</span
              ></a
            >
          </li>
          <li id="img-23">
            <a href="#img-23"
              ><img src="https://picsum.photos/600/600?random=23" alt="" /><span
                >See image 23</span
              ></a
            >
          </li>
          <li id="img-24">
            <a href="#img-24"
              ><img src="https://picsum.photos/600/600?random=24" alt="" /><span
                >See image 24</span
              ></a
            >
          </li>
          <li id="img-25">
            <a href="#img-25"
              ><img src="https://picsum.photos/.........完整代码请登录后点击上方下载按钮下载查看