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