webgl实现动态可交互的神经噪点背景动画效果代码
代码语言:html
所属分类:背景
代码描述:webgl实现动态可交互的神经噪点背景动画效果代码,页面往下滚动有惊喜。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; background-color: #151912; } .content { width: 100vw; font-family: 'Times New Roman', serif; } .section { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; color: #FFF6F7; text-align: center; } .section > div { width: 90%; } .section:nth-child(1) { font-size: 20vh; } @media (max-width: 600px) { .section:nth-child(1) { font-size: 25vw; } } @media (max-width: 350px) { .section:nth-child(1) { font-size: 30px; } } .section:nth-child(2) { font-size: 10vh; } .section:nth-child(3) { font-size: 8vh; } .section:nth-child(2) > div { max-width: 800px } .section:nth-child(3) > div { max-width: 900px } @media (max-width: 750px) { .section:nth-child(2), .section:nth-child(3) { font-size: 9vw; } } .section:nth-child(3) a { padding: 0 .3em; } canvas#neuro { position: fixed; top: 0; left: 0; width: 100%; pointer-events: none; opacity: .95; } a { display: inline-block; text-decoration: none; color: inherit; font-weight: inherit; font-style: inherit; } a:hover { font-weight: inherit; text-decoration: none; color: rgb(160, 160, 255); } a:active { color: rgb(160, 255, 255); } body, html { margin: 0; padding: 0; background-color: #151912; } .content { width: 100vw; font-family: 'Times New Roman', serif; } .section { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; color: #FFF6F7; text-align: center; } .section > div { width: 90%; } .section:nth-child(1) { font-size: 20vh; } @media (max-width: 600px) { .section:nth-child(1) { font-size: 25vw; } } @media (max-width: 350px) { .section:nth-child(1) { font-size: 30px; } } .section:nth-child(2) { font-size: 10vh; } .section:nth-child(3) { font-size: 8vh; } .section:nth-child(2) > div { max-width: 800px } .section:nth-child(3) > div { max-width: 900px } @media (max-width: 750px) { .section:nth-child(2), .section:nth-child(3) { font-size: 9vw; } } .section:nth-child(3) a { padding: 0 .3em; } canvas#neuro { position: fixed; top: 0; left: 0; width: 100%; pointer-events: none; opacity: .95; } a { display: inline-block; text-decoration: none; color: inherit; font-weight: inherit; font-style: inherit; } a:hover { font-weight: inherit; text-decoration: none; color: rgb(160, 160, 255); } a:active { color: rgb(160, 255, 255); } </style> </head> <body translate="no"> <div class="content"> <div class="section"> <div> Neural Noise </div> </div> <div class="section"> <div> GLSL shader </div> </div> <div class="section"> <div> 惊喜 </div> </div> </div> <canvas id="neuro"></canvas> <script type="x-shader/x-fragment" id="vertShader"> precision mediump float; varying vec2 vUv; attribute vec2 a_position; void main() { vUv = .5 * (a_position + 1.); gl_Position = vec4(a_position, 0.0, 1.0); } </script> <script type="x-shader/x-fragment" id="fragShader"> precision mediump float; varying vec2 vUv; uniform float u_time; uniform float u_ratio; uniform vec2 u_pointer_position; uniform float u_scroll_progress; vec2 rotate(vec2 uv, float th) { return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv; } float neuro_shape(vec2 uv, float t, float p) { vec2 sine_acc = vec2(0.); vec2 res = vec2(0.); float scale = 8.; for (int j = 0; j < 15; j++) { uv = rotate(uv, 1.); sine_acc = rotate(sine_acc, 1.); vec2 layer = uv * scale + float(j) + sine_acc - t; sine_acc += sin(layer); res += (.5 + .5 * cos(layer)) / scale; scale *= (1.2 - .07 * p); } return res.x + res.y; } void main() { vec2 uv = .5 * vUv; uv.x *= u_ratio; vec2 pointer =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0