pixi+gsap+fillTextWithSpacing实现鼠标交互文字菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:pixi+gsap+fillTextWithSpacing实现鼠标交互文字菜单效果代码
代码标签: pixi gsap fillTextWithSpacing 鼠标 交互 文字 菜单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: Athene; src: url(https://rawcdn.githack.com/AlainBarrios/Fonts/3cd05b4bb57d095a394ad75b1cdab69852035651/Athene.otf?raw=true); } :root { --lovelyn: Athene; } body { margin: 0; font-family: var(--lovelyn); } *, *::before, *::after { box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-kerning: auto; font-kerning: auto; -webkit-text-size-adjust: 100%; } canvas { display: block; max-width: 100%; -webkit-font-kerning: normal; font-kerning: normal; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; } .container-canvas { display: grid; height: 100vh; grid-template-areas: "center"; align-items: center; background-color: #140a00; } #canvas { grid-area: center; } .main-nav { grid-area: center; font-size: calc((3vh + 16px) * 9 / 16); letter-spacing: 0.15rem; } .main-menu { display: flex; flex-direction: column; font-weight: bold; text-align: center; } .main-menu__item { margin-top: 0.5rem; margin-bottom: 0.5rem; } .main-menu a { color: #ff9000; } @media screen and (min-width: 576px) { .main-nav { font-size: calc(6vw * 9 / 16); } .main-menu { justify-content: space-around; flex-direction: row; } .main-menu__item { visibility: hidden; margin-left: 1rem; margin-right: 1rem; margin-top: 0rem; margin-bottom: 0rem; } } @media screen and (min-width: 1200px) { .main-nav { font-size: 2.8rem; } } </style> </head> <body> <!-- partial:index.partial.html --> <div class="container-canvas"> <nav class="main-nav"> <ul class="main-menu"> <li class="main-menu__item"><a href="/">Home</a></li> <li class="main-menu__item"><a href="/about">About</a></li> <li class="main-menu__item"><a href="/work">Works</a></li> <li class="main-menu__item"><a href="/contact-me">Contact me</a></li> </ul> </nav> </div> <script id="fs" type="f"> precision highp float; #define PI 3.14159265359 #define TAU 6.28318530718 #define S(a,b,n) smoothstep(a,b,n) varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float u_time; uniform vec2 u_resolution; uniform vec2 u_mouse; //https://github.com/Jam3/glsl-fast-gaussian-blur vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) { vec4 color = vec4(0.0); vec2 off1 = vec2(1.411764705882353) * direction; vec2 off2 = vec2(3.2941176470588234) * direction; vec2 off3 = vec2(5.176470588235294) * direction; color += texture2D(image, uv) * 0.1964825501511404; color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344; color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344; color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732; color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732; color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057; color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057; return color; } vec3 GerstnerWave(vec2 pos, vec2 direction, float waveLength, float stepness){ float k = TAU / waveLength; vec2 d = normalize(direction); float c = sqrt(9.8 / k); float f = k * (dot(d, pos) - c * (u_time * .01) ); float a = stepness / k; return vec3( d.y * (cos(f) * a) , sin(f) * a , d.x * (cos(f) * a) ); } void main(){ vec2 uv = vTextureCoord; vec2 st = gl_FragCoord.xy - 0.5 * u_resolution.xy / min(u_resolution.x, u_resolution.y); vec2 wave = GerstnerWave(uv.xy, vec2(0., 1.), .05, 0.15).xy; wave += GerstnerWave(uv.xy, vec2(1., 0.), .15, 0.25).xy; wave += GerstnerWave(uv.xy, vec2(1., 1.), .25, 0.35).xy; vec2 uv2 = abs(uv - 0.5); float s = S(0.5, 0.1, abs(uv2.x - .5) ); uv += wave * s; vec4 blurColor = blur13(uSampler, uv, u_resolution, vec2(1.0, 1.0)); vec4 color = texture2D(uSampler, uv); //gl_FragColor = vec4(vec3(s), 1.0); vec4 mixColor = mix(color, blurColor, s); gl_FragColor = mix(mixColor, vec4(0.0), s); } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fillTextWithSpacing.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.2.4.js"></script> <script > class NavigationPIXI { constructor() { this.app = new PIXI.Application({ backgroundColor: 0x140a00, width: innerWidth, height: innerHeight }); this.container = new PIXI.Container(); this.background = new PIXI.Graphics(); this.loader = this.app.loader; this.maskpadding = 5; this.mousePos = { x: 0 }; this.widthContainer = 0; this.items = []; this.containerCanvas = document.querySelector(".container-canvas"); this.fragmentShader = document.querySelector("#fs").textContent; this.navLinks .........完整代码请登录后点击上方下载按钮下载查看
网友评论0