gsap+webgl实现鼠标交互早餐煎鸡蛋液态融合动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+webgl实现鼠标交互早餐煎鸡蛋液态融合动画效果代码
代码标签: gsap webgl 鼠标 交互 早餐 煎 鸡蛋 液态 融合 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; background-color: #bfd1e5; font-family: "Georgia", serif; } canvas#eggs { position: fixed; top: 0; left: 0; display: block; width: 100%; pointer-events: none; } .page-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); user-select: none; pointer-events: none; width: 95%; max-width: 700px; opacity: .7; } .page-title > * { font-size: 6vh; padding: 0; margin: 0; } .page-title h1 { font-size: 14vh; } .page-title .sub-title { font-size: 4vh; font-style: italic; } </style> </head> <body translate="no"> <div class="page-title"> <h1>Breakfast</h1> <p>/ˈbrɛkfəst/</p> <p class="sub-title">noun</p> <p>a meal eaten in the morning, the first of the day.</p> </div> <canvas id="eggs"></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 float u_resolution_scale; uniform sampler2D u_click_data_texture; #define TWO_PI 6.28318530718 float rand(float n){ return fract(sin(n) * 43758.5453123); } vec3 mod289(vec3 x) { return x - floor(x * (1. / 289.)) * 289.; } vec2 mod289(vec2 x) { return x - floor(x * (1. / 289.)) * 289.; } vec3 permute(vec3 x) { return mod289(((x*34.)+1.)*x); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1., 0.) : vec2(0., 1.); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod289(i); vec3 p = permute(permute(i.y + vec3(0., i1.y, 1.)) + i.x + vec3(0., i1.x, 1.)); vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.); m = m*m; m = m*m; vec3 x = 2. * fract(p * C.www) - 1.; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0