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