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

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

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