scroll-out+splitting实现滚动网页文字单词拆分滚动动画代码
代码语言：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-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0