滚动 timeline 相关

简单介绍一下如何使用？

使用scroll-timeline具备俩个属性，name 和滚动的方向(x/y)
给滚动元素绑定scroll-timeline，name 是时间轴的名称，可以理解为时间轴的 id。
给需要动画的元素绑定animation-timeline, value 是时间轴的名称/id。

滚动进度条

春去，春回，花开花又落，此四时之轮回，何须叹。

四时之景，万物轮回，感之，叹之，以心见之，乃万物之变；以眼观之，乃四时之景，将万物皆系于一物之上，为生命。由心而感，以观四时。

在如此快节奏的社会里，哪怕仅仅是一个短暂的驻足也会打乱整天的计划，而走在车水马龙中的我们便任凭那美妙的四季一次又一次的从身边路过，慢慢地，人们就只知道到了某个季节，应该如何的增添衣物，却无人用心记录下这些美好的瞬间。

万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。

滚动进度条的实现方式

利用滚动时间轴实现，需要定义时间轴名称，给滚动元素绑定时间轴动画(动画名称与时间轴名称一致)需要注意的是兼容性不是很好，关于如何使用？看文档

<script lang="ts" setup></script>

<template>
	<div class="scroll_1">
		<ins></ins>
		<h1>春去，春回，花开花又落，此四时之轮回，何须叹。</h1>
		<p>
			四时之景，万物轮回，感之，叹之，以心见之，乃万物之变；以眼观之，乃四时之景，将万物皆系于一物之上，为生命。由心而感，以观四时。
		</p>
		<p>
			在如此快节奏的社会里，哪怕仅仅是一个短暂的驻足也会打乱整天的计划，而走在车水马龙中的我们便任凭那美妙的四季一次又一次的从身边路过，慢慢地，人们就只知道到了某个季节，应该如何的增添衣物，却无人用心记录下这些美好的瞬间。
		</p>
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
	</div>
</template>

<style lang="scss" scoped>
.scroll_1 {
	width: 100%;
	height: 300px;
	overflow: auto;
	/* 有兼容性问题，目前在谷歌浏览器上测试通过  */
	scroll-timeline: --scroll block;
	scroll-snap-type: mandatory;
	ins {
		display: block;
		border-top: 2px solid green;
		animation-name: widthExpand;
		animation-duration: 1ms; /* Firefox需要设置这个*/
		animation-timeline: --scroll;
		position: sticky;
		top: 0;
	}
}
@keyframes widthExpand {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}
</style>

滚动视区内的动画

春去，春回，花开花又落，此四时之轮回，何须叹。

四时之景，万物轮回，感之，叹之，以心见之，乃万物之变；以眼观之，乃四时之景，将万物皆系于一物之上，为生命。由心而感，以观四时。

滚动视区内的动画

页面发生滚动时，给元素添加滚动效果。需要注意的是兼容性不是很好关于如何使用？看文档

<script lang="ts" setup></script>

<template>
	<div class="scroll_2">
		<h1>春去，春回，花开花又落，此四时之轮回，何须叹。</h1>
		<p>
			四时之景，万物轮回，感之，叹之，以心见之，乃万物之变；以眼观之，乃四时之景，将万物皆系于一物之上，为生命。由心而感，以观四时。
		</p>
		<p>
			在如此快节奏的社会里，哪怕仅仅是一个短暂的驻足也会打乱整天的计划，而走在车水马龙中的我们便任凭那美妙的四季一次又一次的从身边路过，慢慢地，人们就只知道到了某个季节，应该如何的增添衣物，却无人用心记录下这些美好的瞬间。
		</p>
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
		<img
			class="image1"
			src="https://file.wangzevw.com/images/default_top_img_3.webp"
			alt="image"
			srcset=""
		/>
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
		<img
			class="image2"
			src="https://file.wangzevw.com/images/default_top_img_1.webp"
			alt="image"
			srcset=""
		/>
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
	</div>
</template>

<style lang="scss" scoped>
.scroll_2 {
	width: 100%;
	height: 300px;
	overflow: auto;

	.image1 {
		/* 先写动画，后写动画时间线。如果顺序颠倒，没有效果 */
		animation: 1ms scaleUp both, 1ms fadeIn both;
		view-timeline: --image_1;
		animation-timeline: --image_1;
	}

	.image2 {
		animation: 1ms scaleUp both, 1ms fadeIn both;
		view-timeline: --image_2;
		animation-timeline: --image_2;
	}
}

@keyframes scaleUp {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style>

滚动视区外的动画

在这里进行滚动，查看下方图片

滚动视区外的动画

页面发生滚动时，给滚动区域外元素添加滚动效果。需要注意的是兼容性不是很好关于如何使用？看文档

<script lang="ts" setup></script>

<template>
	<div class="scroll_3">
		<div class="inner-box">
			<div style="height: 400px; padding: 20px">
				<b>在这里进行滚动，查看下方图片</b>
			</div>
		</div>
		<img
			class="image1"
			src="https://file.wangzevw.com/images/default_top_img_3.webp"
			alt="image"
			srcset=""
		/>
	</div>
</template>

<style lang="scss" scoped>
.scroll_3 {
	/** 时间线范围， 目前仅在这个区域内 */
	timeline-scope: --image_1;

	.inner-box {
		height: 200px;
		margin-bottom: 10px;
		overflow: auto;
		border: 1px solid #eee;
		scroll-timeline: --image_1;
	}

	.image1 {
		animation: 1ms scaleUp both, 1ms fadeIn both;
		animation-timeline: --image_1;
	}
}
@keyframes scaleUp {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style>

时间线溢出隐藏

展开

时间线溢出隐藏

<script lang="ts" setup>
import { ref } from "vue";
const isOver = ref(false);
</script>

<template>
	<div class="scroll_4" :class="{ over: isOver }">
		<p>
			万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
		</p>
		<div class="more" @click="isOver = !isOver">
			{{ !isOver ? "展开" : "收起" }}
		</div>
	</div>
</template>

<style lang="scss" scoped>
@mixin base {
	max-height: 120px;
	overflow: hidden;
	position: relative;
	border: 1px solid #eee;
	padding: 12px;
	animation: setOver 1ms;
}
.scroll_4 {
	@include base;
	--isOver: false;
	scroll-timeline: --over;
	animation-timeline: --over;

	&.over {
		max-height: none;
		.more {
			visibility: visible !important;
		}
	}

	p {
		margin-top: 0;
	}

	.more {
		position: absolute;
		bottom: 0;
		visibility: hidden;
		width: 100%;
		text-align: center;
		background: linear-gradient(90deg, #ddd, #eee);
	}
}

@keyframes setOver {
	from,
	to {
		--isOver: true;
	}
}

@container style(--isOver: true) {
	.scroll_4 .more {
		visibility: visible;
	}
}
</style>

滚动文字颜色

在这里滚动，查看下方

万物之景始于春。

滚动文字颜色

<script lang="ts" setup></script>

<template>
	<div class="scroll_5">
		<div class="scroll">
			<div style="height: 500px">在这里滚动，查看下方</div>
		</div>
		<p>万物之景始于春。</p>
	</div>
</template>

<style lang="scss" scoped>
@use "sass:string";

@function randomNum($max, $min: 0, $u: 1) {
	@return ($min + random($max)) * $u;
}

@function randomColor() {
	@return rgb(randomNum(205, 50), randomNum(255), randomNum(255));
}

@function randomLinear($count, $width) {
	$value: "";

	@for $i from 0 through ($count - 1) {
		$j: $i - 1;
		$value: $value +
			randomColor() +
			string.unquote(" #{$j * $width}px #{$i * $width}px,");
	}

	@return linear-gradient(
		90deg,
		string.unquote(#{$value}) randomColor() 0 100%
	);
}

.scroll_5 {
	padding: 14px;
	background: #000;
	color: #fff;

	timeline-scope: --my-scroller;

	.scroll {
		height: 200px;
		overflow: scroll;
		scroll-timeline-name: --my-scroller;
		box-shadow: inset 0 0 0 1px #fff;
	}
	p {
		margin: auto;
		font-size: 14px;
		line-height: 2;
		width: 600px;
		background: randomLinear(72, 25);
		background-clip: text;
		color: transparent;
		animation: colorChange steps(8);
		animation-timeline: --my-scroller;
		font-weight: bold;
	}
}

@keyframes colorChange {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -112px 0;
	}
}
</style>

滚动文字蒙层

在这里滚动，查看下方

滚动文字蒙层

<script lang="ts" setup></script>

<template>
	<div class="scroll_5">
		<div class="scroll">
			<div style="height: 500px">在这里滚动，查看下方</div>
		</div>
		<p>
			<span>
				万物之景始于春，多少人待得春风来抹去冬日里的那最后一簇寒冷，带来春日的温暖，多少人待得春雨来滋润秋日里所凋零的花朵，绽放出春的美丽。归南的大雁欣然飞回，为湛蓝的天空添上了一抹纯真的颜色。泥泞的小路旁映衬着点点花朵正为路上的行人撒下些许殷红，来消除旅途中的疲乏。花瓣上剔透的露珠悄然落在旅人的身上，不时散发着淡淡的清香，耳边偶尔传来几声悦耳的鸟鸣，这才让人发觉这正是秋日里最美的写照。
			</span>
		</p>
	</div>
</template>

<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css2?family=Carter+One&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Sofia+Sans&display=swap");
.scroll_5 {
	padding: 14px;
	background: #000;
	color: #fff;
	timeline-scope: --my-scroller;
	font-family: "Roboto Mono", monospace;

	.scroll {
		height: 200px;
		overflow: scroll;
		scroll-timeline-name: --my-scroller;
		box-shadow: inset 0 0 0 1px #fff;
	}
	p {
		display: inline;
		margin: 0 auto;
		width: 600px;
		color: #fff;
		span {
			font-family: "Roboto Mono", monospace;
			color: #fff;
			font-size: 14px;
			line-height: 2;
			/* 数字需要计算， 这段文字的长度 * 20字体大小  */
			background: linear-gradient(90deg, #fc0 0 2674px, #fff 0 5348px);
			background-position: 0 0;
			background-size: 5348px 100%;
			background-repeat: no-repeat;
			background-clip: text;
			color: transparent;
			animation: colorChange steps(191);
			animation-timeline: --my-scroller;
			font-weight: bold;
		}
	}
}

@keyframes colorChange {
	0% {
		background-position: -2674px 0;
	}
	100% {
		background-position: 0 0;
	}
}
</style>

滚动 timeline 相关 ​

滚动进度条 ​

春去，春回，花开花又落，此四时之轮回，何须叹。

滚动视区内的动画 ​

春去，春回，花开花又落，此四时之轮回，何须叹。

滚动视区外的动画 ​

时间线溢出隐藏 ​

滚动文字颜色 ​

滚动文字蒙层 ​

滚动 timeline 相关

滚动进度条

滚动视区内的动画

滚动视区外的动画

时间线溢出隐藏

滚动文字颜色

滚动文字蒙层