js+css实现文字在3d弧线上跟随页面滚动效果代码
代码语言:html
所属分类:加载滚动
代码描述:js+css实现文字在3d弧线上跟随页面滚动效果代码,通过自定义一个HTMLElement ArcText来实现。
代码标签: js css 文字 3d 弧线 跟随 页面 滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnepct" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" /> <style> :root { font-family: "Anton", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; background-color: #111; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; overflow: hidden; color: white; } #app { width: 100%; height: 100vh; display: flex; justify-content: center; overflow: hidden; } arc-text { --text-color: white; --bg-color: #111; --font-size: 120px; --radius: 6; /* approx ems */ --fade-opacity: 1; --perspective: calc(var(--font-size) * 7); --overlay-opacity: 100%; --overlay-spread: 20%; --backface-opacity: 10%; --animation-name: none; --animation-duration: 120s; --perspective-origin-y: 150%; --perspective-origin-x: 50%; --rotation: 0deg; font-weight: 800; position: absolute; width: 100%; height: 100%; color: var(--text-color); font-size: var(--font-size); } arc-text .char { display: inline-block; position: absolute; margin: auto; top: 0; backface-visibility: hidden; transform-style: preserve-3d; } arc-text .outer-rotate { height: 100%; transform-style: preserve-3d; width: 0; position: relative; overflow: visible; margin: auto; } arc-text .outer-rotate.ready { /* animation-name: var(--animation-name); */ transform: translateZ(calc(var(--font-size) * var(--radius) * -1)); } arc-text .char:empty::before { content: " "; min-width: 0.3em; display: inline-block; } arc-text .stage { perspective-origin: var(--perspective-origin-x) var(--perspective-origin-y); perspective: var(--perspective); height: calc(var(--font-size) * 1.5); width: 100vw; position: relative; top: 50%; transform: translateY(-50%); } @keyframes rotate { from { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(0); } to { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(-360deg); } } arc-text .text-row { position: absolute; left: 0; right: 0; margin: auto; width: 0; overflow: visible; display: flex; justify-content: center; margin: auto; transform-style: preserve-3d; } .scroller { position: relative; width: 100%; height: 100%; scroll-snap-type: y mandatory; overflow: auto; scroll-timeline: --scroll block; } .scroller .item { scroll-snap-align: start; height: 100vh; } .text { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; pointer-events: none; animation-name: offsetAnimation; animation-duration: 1ms; /* Firefox requires this to apply the animation */ animation-direction: alternate; animation-timeline: --scroll; animation-timing-function: linear; } .scroller { animation-name: colorAnimation; animation-duration: 1ms; /* Firefox requires this to apply the animation */ animation-direction: alternate; animation-timeline: --scroll; animation-timing-function: linear; } arc-text .outer-rotate.ready { animation-name: rotateAnimation1; animation-duration: 1ms; /* Firefox requires this to apply the animation */ animation-direction: alternate; animation-timeline: --scroll; animation-timing-function: linear; } arc-text:nth-child(2) .outer-rotate.ready { animation-name: rotateAnimation2; } arc-text:nth-child(3) .outer-rotate.ready { animation-name: rotateAnimation3; } arc-text .stage { animation-name: fadeAnimation1; animation-duration: 1ms; /* Firefox requires this to apply the animation */ animation-direction: alternate; animation-timeline: --scroll; animation-timing-function: linear; } arc-text:nth-child(2) .stage { animation-name: fadeAnimation2; } arc-text:nth-child(3) .stage { animation-name: fadeAnimation3; } @keyframes colorAnimation { 0% { color: #6ae0d0; background-color: #18382c; } 50% { color: #fe586b; background-color: #602340; } 100% { color: #d9a8ff; background-color: #2a2563; } } @keyframes offsetAnimation { 0% { transform: translateY(0); } 50% { transform: translateY(100%); } 100% { transform: translateY(200%); } } @keyframes fadeAnimation1 { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } @keyframes fadeAnimation2 { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeAnimation3 { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes rotateAnimation1 { 0% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(0); } 50% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(-120deg); } 100% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(-120deg); } } @keyframes rotateAnimation2 { 0% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(120deg); } 50% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(0); } 100% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(-120deg); } } @keyframes rotateAnimation3 { 0% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(120deg); } 50% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(120deg); } 100% { transform: translateZ(calc(var(--font-size) * var(--radius) * -1)) rotateY(0); } } </style> </head> <body translate="no"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0