利用HTML5实现紫色光圈粒子动画特效



12 46 16



特效描述:利用HTML5实现 紫色光圈粒子 动画特效,利用HTML5实现紫色光圈粒子动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/apxlmx.js'></script>
<script  src="js/index.js"></script>

3. HTML代码

<canvas id="webgl" width="500" height="1758"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 a_position;
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  void main() {
    gl_Position = a_position;
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision highp float;
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  float hash(vec2 p) {
    float o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).x;
    return o;
  }
  vec2 hash2(vec2 p) {
    vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
    return o;
  }
  const int octaves = 2;
  float noise(vec2 uv) {
    vec2 id = floor(uv);
    vec2 subuv = fract(uv);
    vec2 u = subuv * subuv * (3. - 2. * subuv);
    float a = hash(id);
    float b = hash(id + vec2(1., 0.));
    float c = hash(id + vec2(0., 1.));
    float d = hash(id + vec2(1., 1.));
    return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
  }
  float fbm(in vec2 uv) {
    float s = .0;
    float m = .0;
    float a = .5;
    for(int i = 0; i < octaves; i++) {
      s += a * noise(uv);
      m += a;
      a *= .5;
      uv *= 2.;
    }
    return s / m;
  }
  mat2 rotate2d(float _angle) {
      return mat2(cos(_angle),sin(_angle),
                  -sin(_angle),cos(_angle));
  }
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    return uv;
  }
  const vec3 fizz_bg1 = vec3(.1, .2, .4);
  const vec3 fizz_bg2 = vec3(.3, .2, .8);
  const float multiplier = 15.5;
  const float zoomSpeed = .5;
  const int layers = 5;
  // The render function is where we render the pattern to be added to the layer
  vec3 render(vec2 uv, float scale, vec3 colour) {
    vec2 id = floor(uv);
    vec2 subuv = fract(uv);
    vec2 rand = hash2(id);
    float bokeh = abs(scale) * 1.;
    float particle = 0.;
    if(length(rand) > 1.3) {
      vec2 pos = subuv-.5;
      float field = length(pos);
      particle = smoothstep(.3, 0., field);
      particle += smoothstep(.4 * bokeh, 0.34 * bokeh, field);
    }
    return vec3(particle*2.);
  }
  vec3 renderLayer(int layer, int layers, vec2 uv, inout float opacity, vec3 colour) {
    vec2 _uv = uv;
    float l = float(layer);
    // Scale
    // Generating a scale value between zero and 1 based on a mod of u_time
    // A frequency of 10 dixided by the layer index (10 / layers * layer)
    float scale = mod((u_time + zoomSpeed / float(layers) * float(layer)) / zoomSpeed, -1.);
    uv *= 5.; // The initial scale. Increasing this makes the cells smaller and the "speed" apepar faster
    uv *= scale*scale; // then modifying the overall scale by the generated amount
    uv *= rotate2d(u_time*2.);
    uv += vec2(25. * l); // ofsetting the UV by an arbitrary amount to make the layer appear different
    // render
    vec3 pass = render(uv * multiplier, scale, colour) * .2; // render the pass
     // this is the opacity of the layer fading in from the "bottom"
    opacity = 1. + scale;
    float _opacity = opacity;
    // This is the opacity of the layer fading out at the top (we want this minimal, hence the smoothstep)
    float endOpacity = smoothstep(0., 0.4, scale * -1.) * 2.;
    return pass * _opacity * endOpacity;
  }
  vec3 fizz(vec2 uv) {
    float n = fbm(uv*4.+u_time*2.);
    vec3 colour = fizz_bg1;
    float wave = clamp(sin(length(uv*10. + (n))-u_time*20.) * .5 + .5, 0., 1.);
    colour = mix(colour, fizz_bg2, wave);
    wave = pow(wave*wave, 5.);
    colour += (1. - length(uv*5.)) * .1 + wave * .3;
    colour *= 1. + wave * .5;
    colour = mix(colour, fizz_bg1, clamp(length(uv), 0., 1.));
    float opacity = 1.;
    float opacity_sum = 1.;
    vec3 bubbles = vec3(0.);
    for(int i = 1; i <= layers; i++) {
      bubbles += renderLayer(i, layers, uv, opacity, colour);
      opacity_sum += opacity;
    }
    return colour * (bubbles+1.) + bubbles * (.5 + wave);
  }
  void main() {
    vec2 uv = getScreenSpace();
    vec3 colour = fizz(uv);
    gl_FragColor = vec4(colour,1.0);
  }
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到