scroll-out+splitting实现滚动网页文字单词拆分滚动动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：scroll-out+splitting实现滚动网页文字单词拆分滚动动画代码

代码标签： scroll-out splitting 滚动网页文字单词拆分滚动动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css">
<link rel='stylesheet' href='https://unpkg.com/open-props/open-props.min.css'><link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css"><link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/colors-hsl.min.css">
  
<style>
:root {
	--color: var(--gray-0);
	--font-size: var(--font-size-fluid-3);
	--transition-speed: 0;
	--transition-step: 0;
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	background: var(--gradient-1);
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family: 'Google Sans', sans-serif, system-ui;
	overflow: hidden;
	color: var(--gray-0);
}

ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	height: 100vh;
	width: 100vw;
	-ms-scroll-snap-type: y mandatory;
	    scroll-snap-type: y mandatory;
	overflow: auto;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.effect {
	height: 100%;
	width: 100%;
	background: var(--blue-8);
	scroll-snap-align: center;
	display: grid;
	place-items: center;
	font-size: var(--font-size);
	font-weight: var(--font-weight-9);
	text-align: center;
	overflow: hidden;
	max-inline-size: 100%;
}

.effect > div {
	max-width: 15ch;
}

.effect:nth-of-type(n) {
	background: var(--pink-9);
}
.effect:nth-of-type(2n) {
	background: var(--green-9);
}
.effect:nth-of-type(3n) {
	background: var(--blue-9);
}
.effect:nth-of-type(4n) {
	background: var(--yellow-9);
}
.effect:nth-of-type(5n) {
	background: var(--grape-9);
}
.effect:nth-of-type(6n) {
	background: var(--red-9);
}
.effect:nth-of-type(7n) {
	background: var(--lime-9);
}
.effect:nth-of-type(8n) {
	background: var(--gray-9);
}

/* Util */
[data-scroll] .char {
	transition: all var(--transition-speed) calc((var(--char-index) + 1) * var(--transition-step));
}

/* Slots */
.slots {
	--color: var(--gray-0);
	--speed: 0.5s;
	--delay: var(--transition-speed);
	--size: var(--font-size-fluid-3);
	height: calc(var(--size) * 3);
	overflow: hidden;
}

.slots .char {
	text-transform: uppercase;
	color: var(--color);
	-webkit-animation: slots var(--speed) var(--delay) infinite linear;
	        animation: slots var(--speed) var(--delay) infinite linear;
  text-shadow: 0 calc(var(--size) * -1) 0 var(--color),
    0 calc(var(--size) * -2) 0 var(--color),
    0 calc(var(--size) * -3) 0 var(--color),
    0 calc(var(--size) * 1) 0 var(--color),
    0 calc(var(--size) * 2) 0 var(--color),
    0 calc(var(--size) * 3) 0 var(--color);
}

.slots .char:nth-of-type(odd) {
	animation: slots calc(var(--speed) * 0.75) var(--delay) infinite linear reverse;
}

@-webkit-keyframes slots {
	to {
		transform: translate(0, calc(var(--size) * -1));
	}
}

@keyframes slots {
	to {
		transform: translate(0, calc(var(--size) * -1));
	}
}

/* Carousel  */
.carousel {
  height: var(--font-size);
  width: var(--font-size);
  text-transform: uppercase;
}

.carousel .word {
	transform-style: preserve-3d;
	transform: rotateX(-24deg) rotateY(0);
	height: 100%;
	width: 100%;
}

.carousel .char {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateY(calc(((360 / var(--char-total)) * var(--char-index)) * 1deg)) translate(var(--font-size), 0);
}

.carousel [data-scroll="in"] {
	animation: carousel-spin calc(var(--transition-speed) * 8) infinite linear reverse;
}

@-webkit-keyframes carousel-spin {
	to {
		transform: rotateX(-24deg) rotateY(360deg);
	}
}

@keyframes carousel-spin {
	to {
		transform: rotateX(-24deg) rotateY(360deg);
	}
}

/* Bloat */
.bloat {
	display: grid;
	grid-auto-rows: auto;
}

.bloat .word {
	--chars: 5;
	--center: 2;
	display: grid;
	grid-template-columns: repeat(var(--chars), auto);
}

.bloat [data-scroll="in"] .char {
	-webkit-animation-delay: calc(var(--transition-speed) + (var(--word-index) * var(--transition-step)));
	        animation-delay: calc(var(--transition-speed) + (var(--word-index) * var(--transition-step)));
	-webkit-animation-name: bloat;
	        animation-name: bloat;
	-webkit-animation-timing-function: ease-out;
	        animation-timing-function: ease-out;
	-webkit-animation-duration: calc(2 * var(--transition-speed));
	        animation-duration: calc(2 * var(--transition-speed));
}

.bloat .char {
	--offset: calc((var(--char-index) - (var(--chars) * var(--word-index))) - var(--center));
	transform: translate(0, 0);
}

@-webkit-keyframes bloat {
	50% {
    transform: translate(calc(var(--offset) * 150%), 0);
	}
}

@keyframes bloat {
	50% {
    transform: translate(calc(var(--offset) * 150%), 0);
	}
}

/* Roulette */
.roulette {
	position: relative;
}

.roulette [data-scroll="in"] {
	-webkit-animation: roulette calc(var(--transition-speed) * 8) var(--transition-speed) infinite linear;
	        animation: roulette calc(var(--transition-speed) * 8) var(--transition-speed) infinite linear;
}
  
.roulette .word {
  height: var(--font-size);
  width: var(--font-size);
}

.roulette .char {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(calc((var(--char-index) * (360 / var(--char-total)) * 1deg))) translate(0, -150%);
}

@-webkit-keyframes roulette {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes roulette {
	to {
		transform: rotate(-360deg);
	}
}

/* Hinged */

.hinged .char {
	--rotation: -180deg;
	transform-origin: 0 100%;
	transform: rotate(var(--rotation));
}

.hinged [data-scroll="in"] .char {
	--rotation: 0;
}
/* Mexican Wave */
.mexiwave [data-scroll="in"] .char {
	-webkit-animation: mexiwave var(--transition-speed) calc(var(--char-index) * var(--transition-step)) ease;
	        animation: mexiwave var(--transition-speed) calc(var(--char-index) * var(--transition-step)) ease;
}

@-webkit-keyframes mexiwave {
  50% {
  	transform: translate(0, -50%);
  }
}

@keyframes mexiwave {
  50% {
  	transform: translate(0, -50%);
  }
}

/* Enter */
.enter .char {
	opacity: var(--opacity, 1);
	transform: translateY(var(--y, 0%));
}

.enter [data-scroll="out"] {
	--opacity: 0;
	--y: -150%;
}

/* Random */
.random .char {
	transition: transform var(--transition-speed) calc((var(--char-index) + 1) * var(--transition-speed));
}
.random [data-scroll=&qu.........完整代码请登录后点击上方下载按钮下载查看