头像

html5 canvas迷幻水波浪流动背景动画特效

来源:http://www.sucaihuo.com/js/4141.html 素材火管理员 2019-01-07 10:56浏览(111) 收藏

html5 canvas迷幻水波浪流动背景动画特效,反正我看久了头会晕,不知道大家什么感觉。
html5 canvas迷幻水波浪流动背景动画特效
分类:html5 > canvas 难易:初级

程序员,你不是一个人;网站开发QQ群:173359339,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 2

手机扫码访问:

下载资源 下载积分: 20 积分

js代码

<script id="fragmentShader" type="x-shader/fragment">
precision mediump float;

uniform float time;
uniform float width;
uniform float height;
uniform float red;
uniform float green;
uniform float blue;
uniform float zoom;
uniform float rotation;
  
const float PI = 3.141592654;

vec2 rotate(vec2 p, float a) {
  return vec2(p.x * cos(a) - p.y * sin(a),
                p.x * sin(a) + p.y * cos(a));
}
  
  
void main () {
  
  vec2 p0 = vec2(gl_FragCoord) * zoom;
  float a = rotation * PI / 180.0;
  vec2 p = rotate(p0, a) +
           vec2(sin(time * .2) * 200.0, cos(time * .2) * 200.0);
  vec3 c = vec3(red, green, blue);
  
  vec3 color = (c * (.5 + 0.5 * sin(time + sin(sin(time * 4.0 + (p.x - p.y) * .02) + p.x * p.y * 1e-4))));
  gl_FragColor = vec4(vec3(color), 1.0);
}
</script>
<script id="vertexShader" type="x-shader/vertex">
precision mediump float;
attribute vec2 position;

void main () {
  gl_Position = vec4(position, 0, 1);
} 
</script>

<script src='js/regl.js'></script>
<script src='js/react.production.min.js'></script>
<script src='js/react-dom.production.min.js'></script>
<script src="js/index.js"></script>
最新交易
评论1
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3401083589

  • 头像 沙发
    01-08 11:23
    AJ***on
    很不错的特效,就是看起来有点晕眩!
1 2