splittext实现文字分割上下滑动动画效果
代码语言:html
所属分类:动画
代码描述:splittext结合gsap实现文字分割上下滑动动画效果,可通过gui来设置滚动的速度
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Anton&display=swap'); html, body { margin: 0; padding: 0; background-color: #ff5100; overflow: hidden; } .debug { background-color: hotpink !important; } .debug h1 { border: 1px solid black; overflow: visible; } .debug h2 { color: red; z-index: 2; } .container { display: flex; justify-content: center; align-items: center; min-width: 100vw; min-height: 100vh; } h1, h2 { text-transform: uppercase; font-family: "Anton", sans-serif; text-align: center; margin: 0; position: relative; overflow: hidden; } h1 { font-size: 20vw; letter-spacing: 1vw; margin: 0; line-height: 3.1; height: 20vw; } h2 { font-size: 10vw; letter-spacing: 4.35vw; padding-left: 2.8vw; } .char-wrapper { position: relative; display: inline-block; } .char { display: inline-block; position: relative; height: 20vw; } .char--clone { position: absolute; top: 60vw; left: 0; } .char:before, .char:after { content: attr(data-char); position: absolute; left: 0; height: 20vw; } .char:before { top: -100%; } .char:after { bottom: -100%; } .dg.a.main { margin-right: 0; } </style> </head> <body translate="no"> <div class="container"> <hgroup> <h1 class="featured-text">BFW.WIKI</h1> <h2>Community</h2> </hgroup> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.min.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/splitting.min.js"></script> <script > /* * Very quick, very rough recreat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0