文字伸缩滑动动画特效
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Variable Fonts | Compressa</title> <style> @font-face { src: url('https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2'); font-family:'Compressa VF'; font-style: normal; } html { height:100%; } body { padding: 0; margin: 0; overflow: hidden; background-color: #211D26; display: flex; justify-content: center; height: 100%; align-items: center; } h1 { font-family:'Compressa VF'; text-rendering: optimizeSpeed; color: #D11B3D; width: 100%; user-select: none; line-height: 0.8em; margin: 0 auto; text-transform: uppercase; font-weight: 100; text-align: center; width: 100vw; } h1 span { transform: translateY(-10px); user-select: none; } h1.flex { display: flex; justify-content: space-between; } h1.stroke span { position: relative; color: #211D26; line-height: inherit; } h1.stroke span:after { content: attr(data-char); -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #FE6730; position: absolute; left: 0; line-height: inherit; color: transparent; z-index: -1; } </style> </head> <body translate="no"> <div id="main"> <h1 id="title">Compressa</h1> </div> <script src='http://repo.bfw.wiki/bfwrepo/js//dat.gui.min.js'></script> <script > var maxDist; var mouse = { x: 0, y: 0 }; var cursor = { x: window.innerWidth, y: window.innerHeight }; Math.dist = function (a, b) { var dx = b.x - a.x; var dy = b.y - a.y; return Math.sqrt(Math.pow(dx, 2), Math.pow(dy, 2)); }; window.addEventListener("mousemove", function (e) { cursor.x = e.clientX; cursor.y = e.clientY; }); window.addEventListener("touchmove", function (e) { var t = e.touches[0]; cursor.x = t.clientX; cursor.y = t.clientY; }, { passive: false }); var Char = function (container, char) { var span = document.createElement("span"); span.setAttribute('data-char', char); span.innerText = char; container.appendChild(span); this.getDist = function () { this.pos = span.getBoundingClientRect(); return Math.dist(mouse, { x: this.pos.x + this.pos.width / 1.75, y: this.pos.y }); }; this.getAttr = function (dist, min, max) { var wght = max - Math.abs(max * dist / maxDist); return Math.max(min, wght + min); }; this.update = function (args) { var dist = this.getDist(); this.wdth = args.wdth ? ~~this.getAttr(dist, 5, 200) : 100; this.wght = args.wght ? ~~this.getAttr(dist, 100, 800) : 400; this.alpha = args.alpha ? this.getAttr(dist, 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0