स्क्रॉल संचालित एनिमेशन स्क्रॉल डिटेक्शन

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

14 September 2024

नमस्ते

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<ul class="titles transparent">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	<li>Six</li>
	<li>Seven</li>
	<li>Eight</li>
</ul>
<ul class="titles fill">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	<li>Six</li>
	<li>Seven</li>
	<li>Eight</li>
</ul>
<div class="panels">
	<div class="panel"><img src="https://picsum.photos/seed/1/1600/900" alt="photo" height="900" width="1600"></div>
	<div class="panel"><img src="https://picsum.photos/seed/2/1600/900" alt="photo" height="900" width="1600"></div>
	<div class="panel"><img src="https://picsum.photos/seed/3/1600/900" alt="photo" height="900" width="1600"></div>
	<div class="panel"><img src="https://picsum.photos/seed/4/1600/900" alt="photo" height="900" width="1600"></div>
	<div class="panel"><img src="https://picsum.photos/seed/5/1600/900" alt="photo" height="900" width="1600"></div>
	<div class="panel"><img src="https://picsum.photos/seed/6/1600/900" alt="photo" height="900" width="1600"></div>
	<div class="panel"><img src="https://picsum.photos/seed/7/1600/900" alt="photo" height="900" width="1600"></div>
	<div class="panel"><img src="https://picsum.photos/seed/8/1600/900" alt="photo" height="900" width="1600"></div>
</div>

<div class="warning">
	<p>⚠️ Your browser does not support CSS Scroll-Linked Animations with <code>view-timeline</code>. Please use Chrome Canary 115+ to check out this demo.</p>
</div>
  
</body>
</html>

CSS

@property --scroll-position {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}
@property --scroll-position-delayed {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@keyframes adjust-pos {
	to {
		--scroll-position: 1;
		--scroll-position-delayed: 1;
	}
}

:root {
	animation: adjust-pos 0.01s linear both;
	animation-timeline: scroll(root);
}

body {
	transition: --scroll-position-delayed 0.15s linear;
	--scroll-velocity: calc(
		var(--scroll-position) - var(--scroll-position-delayed)
	);
}

html {
	background: #666;
}

html {
	scroll-snap-type: y mandatory;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
	pointer-events: none;
	line-height: 1;
	display: block;
}
ul li {
	display: block;
	line-height: 1;
}
.panel {
	scroll-snap-align: center;
	height: 100dvh;
	border: 2px solid #333;
	background: rgb(0 0 0 / 0.15);
	z-index: -1;
}

.panel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(30%);
}

@keyframes slide-up {
	to {
		translate: 0 var(--end-pos);
	}
}

.titles {
	position: fixed;
	z-index: 2;
	top: 50dvh;
	font-size: 25dvh;
	left: 0;
	right: 0;
	text-align: center;

animation: slide-up 0.01s linear;
	animation-timeline: scroll(root block);

font-family: impact;
	text-transform: uppercase;
	letter-spacing: 1px;

--num-children: 8;
	--num-children-1: calc(var(--num-children) - 1);
	--size-per-child: calc(100% / var(--num-children));

--half-size-per-child: calc(var(--size-per-child) / 2);
	--start-pos: calc(var(--half-size-per-child) * -1);
	--end-pos: calc(-100% + var(--half-size-per-child));
	translate: 0 var(--start-pos);
}

.titles.transparent {
	color: transparent;
	-webkit-text-stroke: 1px rgb(255 255 255 / 0.7);
	text-stroke: 1px rgb(255 255 255 / 0.7);
}

.titles.fill {
	color: hotpink;

--y-per-child: calc(1 / var(--num-children));
	--cur-child: calc((var(--scroll-position) / var(--y-per-child)) + 1);
	--cur-child-1: calc(var(--cur-child) - 1);

--clip-min: 0;
	--clip-max: calc(100% - var(--size-per-child));
	--clip-per-child: calc(var(--clip-max) / var(--num-children));
	--fix: calc(
		var(--clip-per-child) / 8
	);
	--extra: 1%;
	clip-path: inset(
		calc((var(--cur-child-1) * var(--clip-per-child)) - var(--extra)) 0%
			calc(
				(100% - (var(--cur-child) * var(--clip-per-child)) - var(--fix)) -
					var(--extra)
			)
			0%
	);
}

.titles li {
	will-change: transform;
	transform-origin: 50% 50%;
	transform: skewY(calc(var(--scroll-velocity) * -75deg));
}

.warning {
	border: 1px solid black;
	z-index: 9999;
	color: black;
	background: rgba(255 255 225 / 0.9);
	z-index: 1;

position: fixed;
	top: 1em;
	left: 1em;
	right: 1em;
	text-align: center;
}

.warning p {
	margin: 1em 0;
}
@supports (view-timeline: --works) {
	.warning {
		display: none;
	}
}

स्क्रॉल संचालित एनिमेशन स्क्रॉल डिटेक्शन

अनुशंसित

मूवी पोस्टर इंटरेक्शन

वास्तविकता को कोड करना

नमस्ते

HTML

CSS

JS

अनुशंसित

मूवी पोस्टर इंटरेक्शन

वास्तविकता को कोड करना

नमस्ते

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS