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