Scroll Driven Animations Scroll Detection

Open In Editor Publish Your Code

</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;
	}
}

Scroll Driven Animations Scroll Detection

Recommended

HTML Portfolio Website with Side Menu

Neumorphism Dark Submit Button

web sitesi

HTML

CSS

JS

Recommended

HTML Portfolio Website with Side Menu

Neumorphism Dark Submit Button

web sitesi

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS