gsap+pixi实现图片滤镜filter动画效果代码-html代码-BFW代码库

gsap+pixi实现图片滤镜filter动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+pixi实现图片滤镜filter动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
    body {
  position: relative;
  overflow: hidden;
  background: #fff;
}
</style>
</head>
<body>

<script id="fs" type="x-shader/x-fragment">
  precision mediump float;
  
  varying vec2 vTextureCoord;
  uniform sampler2D uSampler;
  uniform float uTime;
  
  float rand (vec2 p) {
    return fract(sin(dot(p ,vec2(12.9898,78.233))) * 43758.5453);
  }
  
  void main (void) {
    vec4 coord = gl_FragCoord;
    vec2 time = vec2(uTime * 10.0);
    float random = rand(vec2(coord.x)) * 10.0;
    float shakeLength = 0.2;
    float shakeWidth = 0.06;
    float split = 20.0;
    float speed = 0.03;
    float offset = sin(floor(coord.x * shakeLength / split) + uTime * speed) * shakeWidth / random;
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + offset));
  }
</script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.7.2.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script >
    // filter
PIX.........完整代码请登录后点击上方下载按钮下载查看