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>&#47;&#712;br&#x025B;kf&#x0259;st&#47;</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