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="out"] .char {
	transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%));
}

/* Swapsies */
.swapsies .char {
	transform: translateX(var(--translate));
}

.swapsies .char:nth-of-type(even) {
	--translate: -100%;
}
.swapsies .char:nth-of-type(odd) {
	--translate: 100%;
}

.swapsies [data-scroll="in"] .char {
	-webkit-animation: swapsies 0.5s calc(var(--char-index) * var(--transition-step)) both;
	        animation: swapsies 0.5s calc(var(--char-index) * var(--transition-step)) both;
}

@-webkit-keyframes swapsies {
  25% {
    transform: translate(var(--translate), var(--translate));
  }
  75% {
    transform: translate(0, var(--translate));
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes swapsies {
  25% {
    transform: translate(var(--translate), var(--translate));
  }
  75% {
    transform: translate(0, var(--translate));
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Fading */
.fading [data-scroll="out"] .char {
	opacity: 0;
}

/* Flipping */
.flipping [data-scroll='out'] .char {
  transform: rotateX(360deg);
}

/* Slide */
.slide .char {
	transition: opacity var(--transition-step), transform var(--transition-speed);
  transition-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
}
.slide [data-scroll='out'] .char {
  opacity: 0;
  transform: translate(-300%, 0) skewX(20deg);
}

/* Karaoke */
.karaoke .char {
  color: hsl(var(--gray-0-hsl) / 0.25); 
}

.karaoke .char:after {
	color: var(--gray-0);
	visibility: visible;
	-webkit-clip-path: inset(0 calc((100 - (var(--reveal, 1) * 100)) * 1%) 0 0);
	        clip-path: inset(0 calc((100 - (var(--reveal, 1) * 100)) * 1%) 0 0);
}

.karaoke [data-scroll="out"] .char:after {
	--reveal: 0;
}

/* Karaoke */
.filling .char {
  color: hsl(var(--gray-0-hsl) / 0.25); 
}

.filling .char:after {
	color: var(--gray-0);
	visibility: visible;
	-webkit-clip-path: inset(calc((100 - (var(--reveal, 1) * 100)) * 1%) 0 0 0);
	        clip-path: inset(calc((100 - (var(--reveal, 1) * 100)) * 1%) 0 0 0);
}

.filling [data-scroll="out"] .char:after {
	--reveal: 0;
}

/* Blocks */
.blocks [data-scroll='out'] .char {
  --show: 0;
}

.blocks [data-scroll] {
  overflow: hidden;
  position: relative;
}

.blocks .char {
	opacity: var(--show);
	transition: opacity 0s calc(var(--transition-speed) * 2);
}

.blocks [data-scroll="in"] .char {
	--show: 1;
}

.blocks [data-scroll="in"]:after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gray-0);
  -webkit-animation: blocks calc(var(--transition-speed) * 2) calc((var(--transition-speed) * 2) * 0.5) both;
          animation: blocks calc(var(--transition-speed) * 2) calc((var(--transition-speed) * 2) * 0.5) both;
  visibility: visible;
}

@-webkit-keyframes blocks {
  0% {
    transform: translate(-110%, 0);
  }
  45%, 55% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(110%, 0);
  }
}

@keyframes blocks {
  0% {
    transform: translate(-110%, 0);
  }
  45%, 55% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(110%, 0);
  }
}

/* Scaling */
.scaling [data-scroll="out"] .char {
	transform: scale(0);
}

/* Turning */
.turning [data-scroll="out"] .char {
	transform: rotateY(90deg);
}

/* Folding */
.folding .word {
	transform-style: preserve-3d;
	perspective: var(--font-size);
}

.folding .char {
	transform-style: preserve-3d;
	transform: rotateX(calc((90 - (var(--show, 1) * 90)) * 1deg));
	transform-origin: 50% 100%;
}

.folding [data-scroll="out"] .char {
	--show: 0;
}

/* Bulge */
.bulge [data-scroll="in"] .char {
  -webkit-animation-name: bulge;
          animation-name: bulge;
  -webkit-animation-duration: var(--transition-speed);
          animation-duration: var(--transition-speed);
  -webkit-animation-delay: calc(var(--transition-speed) + (var(--char-index) * var(--transition-step)));
          animation-delay: calc(var(--transition-speed) + (var(--char-index) * var(--transition-step)));
}

@-webkit-keyframes bulge {
  50% {
    transform: scale(1.5);
  }
}

@keyframes bulge {
  50% {
    transform: scale(1.5);
  }
}

/* Perspective */
.perspective,
.perspective .word {
	transform-style: preserve-3d;
	perspective: 100vmax;
	perspective-origin: 50% 200%;
}

.perspective .char {
	transition: transform var(--transition-speed) calc(var(--transition-speed) + var(--char-index) * var(--transition-step)),
							opacity var(--transition-step) calc(var(--transition-speed) + var(--char-index) * var(--transition-step));
}

.perspective [data-scroll="out"] .char {
	opacity: 0;
	transform: translate3d(-10%, -10%, -90vmax);
}

/* Zipping */
.zipping .char {
	transition: transform var(--transition-speed) calc(var(--transition-speed) + var(--char-index) * var(--transition-step)),
							opacity calc(var(--transition-step) * 0.5) calc(var(--transition-speed) + var(--char-index) * var(--transition-step));
}

.zipping [data-scroll="out"] .char {
	opacity: 0;
	transform: translateY(var(--y, -100%)) scale(0);
}

.zipping .char:nth-of-type(even) {
	--y: 100%;
}

/* Spinning */
.spinning [data-scroll="out"] .char {
	transform: rotateY(-360deg);
}

/* Tumbling */
.tumbling .char {
  transition-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
}

.tumbling [data-scroll='out'] .char {
  opacity: 0;
  transform: translate(-500%, 0%) rotate(-1080deg) scale(1);
}


/* Bubbling */
.bubbling .char {
	transform-origin: 50% 85%;
	transition-timing-function: var(--ease-elastic-5);
	transition-delay: calc(var(--transition-speed) + var(--delay) * var(--transition-step));
}

.bubbling .char:nth-of-type(1) { --delay: 3; }
.bubbling .char:nth-of-type(2) { --delay: 2; }
.bubbling .char:nth-of-type(3) { --delay: 5; }
.bubbling .char:nth-of-type(4) { --delay: 8; }
.bubbling .char:nth-of-type(5) { --delay: 7; }
.bubbling .char:nth-of-type(6) { --delay: 6; }
.bubbling .char:nth-of-type(7) { --delay: 1; }
.bubbling .char:nth-of-type(8) { --delay: 4; }

.bubbling [data-scroll="out"] .char {
	transform: scale(0.35);
}

/* Swinging */
.swinging .char {
	transform-origin: calc((var(--char-total) - var(--char-index)) * 100%) calc(100% * -4);
	transition-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
}

.swinging [data-scroll="out"] .char {
	opacity: 0;
	transform: rotate(90deg);
}

/* Rolling */
.rolling .char {
	transition: transform calc(var(--transition-speed) * 2), opacity calc(var(--transition-step) * 2);
	transition-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	transition-timing-function: var(--ease-elastic-1);
}

.rolling [data-scroll="out"] .char {
	opacity: 0;
	transform: translate(-500%, 0) rotate(-1080deg);
}

/* Blowing */
.blowing .char {
	-webkit-animation-duration: calc(var(--transition-speed) * 4);
	        animation-duration: calc(var(--transition-speed) * 4);
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	transform-origin: 0 100%;
	-webkit-animation-delay: calc(var(--char-index) * (var(--transition-step) * 0.25));
	        animation-delay: calc(var(--char-index) * (var(--transition-step) * 0.25));
}

.blowing [data-scroll="in"] .char {
	-webkit-animation-name: blowing;
	        animation-name: blowing;
}

@-webkit-keyframes blowing {
	50%, 60%, 70% {
    transform: skewX(-35deg);
  }
  55%, 65%, 75% {
   	transform: skewX(-40deg);
  }
}

@keyframes blowing {
	50%, 60%, 70% {
    transform: skewX(-35deg);
  }
  55%, 65%, 75% {
   	transform: skewX(-40deg);
  }
}

/* Meeting */
.meeting .char {
	/*transition-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));*/
	transform-origin: var(--origin, 100% 0);
}

.meeting .char:nth-of-type(odd) {
	--origin: 0 100%;
}

.meeting [data-scroll="out"] .char {
	transform: rotate(-180deg);
}

/* Conveyor */
.conveyor .char {
	transform-origin: 0 100%;
	-webkit-animation-duration: calc(var(--transition-step) * 4);
	        animation-duration: calc(var(--transition-step) * 4);
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	-webkit-animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	        animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	transition: none;
}

.conveyor [data-scroll="in"] .char {
	-webkit-animation-name: conveyor;
	        animation-name: conveyor;
}

@-webkit-keyframes conveyor {
	0% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(-180deg) translate(calc((var(--char-total) - var(--char-index)) * -100%), 0);
	}
  40% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(-180deg) translate(0, 0);
  }
  50% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(0deg) translate(0, 0);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
}

@keyframes conveyor {
	0% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(-180deg) translate(calc((var(--char-total) - var(--char-index)) * -100%), 0);
	}
  40% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(-180deg) translate(0, 0);
  }
  50% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(0deg) translate(0, 0);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
}

/* Cascade */

.cascade .char {
	-webkit-animation-duration: calc(var(--transition-speed) * 4);
	        animation-duration: calc(var(--transition-speed) * 4);
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	        animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
}

.cascade [data-scroll="in"] .char {
	-webkit-animation-name: cascade;
	        animation-name: cascade;
}

@-webkit-keyframes cascade {
	0% {
		opacity: 0;
		transform: translate(-300%, -300%);
	}
	10% {
		transform: translate(-200%, -300%);
	}
	30% {
		transform: translate(-200%, -200%);
	}
	50% {
		opacity: 1;
		transform: translate(-100%, -200%);
	}
	70% {
		transform: translate(-100%, -100%);
	}
	90% {
		transform: translate(0%, -100%);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes cascade {
	0% {
		opacity: 0;
		transform: translate(-300%, -300%);
	}
	10% {
		transform: translate(-200%, -300%);
	}
	30% {
		transform: translate(-200%, -200%);
	}
	50% {
		opacity: 1;
		transform: translate(-100%, -200%);
	}
	70% {
		transform: translate(-100%, -100%);
	}
	90% {
		transform: translate(0%, -100%);
	}
	100% {
		transform: translate(0, 0);
	}
}

/* Tossing */
.tossing .char {
	-webkit-animation-duration: calc(var(--transition-speed) * 2);
	        animation-duration: calc(var(--transition-speed) * 2);
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	        animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	-webkit-animation-delay: calc(var(--char-index) * var(--transition-step));
	        animation-delay: calc(var(--char-index) * var(--transition-step));
}

.tossing [data-scroll="in"] .char {
	-webkit-animation-name: tossing;
	        animation-name: tossing;
}

@-webkit-keyframes tossing {
	0% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
	75% {
		transform: translateY(-50%) rotate(360deg) scale(1.1);
	}
	100% {
		transform: translateY(0) rotateY(360deg) scale(1);
	}
}

@keyframes tossing {
	0% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
	75% {
		transform: translateY(-50%) rotate(360deg) scale(1.1);
	}
	100% {
		transform: translateY(0) rotateY(360deg) scale(1);
	}
}

/* Wave */
.wave .char {
	-webkit-animation-duration: calc(var(--transition-speed) * 8);
	        animation-duration: calc(var(--transition-speed) * 8);
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	        animation-delay: calc((var(--char-total) - var(--char-index)) * var(--transition-step));
	-webkit-animation-delay: calc((var(--char-index) * var(--transition-step)) * -1);
	        animation-delay: calc((var(--char-index) * var(--transition-step)) * -1);
}

.wave [data-scroll="in"] .char {
	-webkit-animation-name: wave;
	        animation-name: wave;
}

@-webkit-keyframes wave {
	25% {
		transform: translateY(-75%);
	}
}

@keyframes wave {
	25% {
		transform: translateY(-75%);
	}
}

/* Rising */
.rising .char {
	opacity: calc(1 - var(--hide));
	transform: translate(calc(var(--hide) * -150%), calc(var(--hide) * 300%));
	transition-property: transform, opacity;
	transition-duration: calc(var(--transition-speed) * 2), calc(var(--transition-speed) * 0.5);
}

.rising [data-scroll="out"] {
	--hide:.........完整代码请登录后点击上方下载按钮下载查看