粘性图片动画效果-html代码-BFW代码库

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<title> - Sticky Image Effect </title>
<style>
    body { margin: 0;  overflow: hidden}
canvas {width: 100%; display: block;}

.cursor, .dot{
  position: absolute; 
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
}

.cursor{
  width: 2rem;
  height: 2rem;
  border: .1rem solid #C9D7D8;
}

.dot{
  background-color: #C9D7D8;
  height: .5rem;
  width: .5rem;
}

  </style>

</head>
<body translate="no">
<div class="content">
</div>
<div class="cursor"></div>
<div class="dot"></div>
<script id="vs" type="f">
  // https://tympanus.net/codrops/2019/04/10/how-to-create-a-sticky-image-effect-with-three-js/comment-page-1/#comment-476238
  uniform float u_progress;
  uniform float u_direction;
  uniform float u_waveIntensity;
  uniform float u_offset;
  uniform float u_time;
  
  varying vec2 vUv;
  void main(){
    
    vec3 pos = position.xyz;
    float dist = length(uv - .5);
    float maxDist = length(vec2(.5));
    float normDist = dist / maxDist;
    
    float stickOut = normDist;
    float stickIn = -normDist;
    float stickEff = mix(stickOut, stickIn, u_direction);
    
    float stick = .5;
    
    float waveIn = u_progress * (1./stick);
    float waveOut = -(u_progress - 1.) * (1./(1. - stick));
    float stickProg = min(waveIn, waveOut);
    
    float offIn = clamp(waveIn, 0., 1.);
    float offOut = clamp(1. - waveOut, 0., 1.);
    float offProg = mix(offIn, offOut, u_direction);

    pos.z += stickEff * u_offset * stickProg - u_offset * offProg;
    
    pos.z += sin(dist * 8. -  u_time * 10.) * u_waveIntensity;
    
    vUv = uv;
    
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
  }
</script>
<script id="fs" type="f">
  
  #define S(a,b,n) smoothstep(a,b,n)
  #define pi2 6.28318530718
  #define pi 3.14159265359
  
  uniform float u_time;
  uniform float u_volatility;
  
  uniform vec2 u_res;
  uniform vec2 u_mouse;
  uniform vec2 u_directionMouse;
  uniform vec2 u_textureFactor;
  uniform vec2 u_texture2Factor;

  uniform sampler2D u_text0;

  varying vec2 vUv;
  
  vec2 centeredAspectRatio(vec2 uvs, vec2 factor){
    return uvs * factor - factor / 2. + 0.5;
  }
  
  void main() {
    vec2 uv = vUv;
    vec2 st = (gl_FragCoord.xy - .5 * u_res) / min(u_res.x, u_res.y) * vec2(.4, 1.);
    vec2 mouse_normalized = (u_mouse - .5 * u_res) / min(u_res.x, u_res.y) * vec2(.4, 1.);
    
    float vel = u_volatility; 

    float dist = length(mouse_normalized - st);
    float m_color = S(.2, .01, dist);
       
    vec4 tex1 = vec4(1.);
    
    vel += vel * 2.;
    
    uv.x -= (sin(uv.y) * m_color * vel / 100.) * u_directionMouse.x;
    uv.y -= (sin(uv.x) * m_color * vel / 100.) * u_directionMouse.y;
    tex1.g = texture2D(u_text0, centeredAspectRatio(uv, u_textureFactor)).g;
    
    uv.x -= (sin(uv.y) * m_color * vel / 150.) * u_directionMouse.x;
    uv.y -= (sin(uv.x) * m_color * vel / 150.) * u_directionMouse.y;
    tex1.r = texture2D(u_text0, centeredAspectRatio(uv, u_textureFactor)).r;
    
    uv.x -= (sin(uv.y) * m_color * vel / 300.) * u_directionMouse.x;
    uv.y -= (sin(uv.x) * m_color * vel / 300.) * u_directionMouse.y;
    tex1.b = texture2D(u_text0, centeredAspectRatio(uv, u_textureFactor)).b;
           
    gl_FragColor = tex1;
  }
</script>

<script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>

<script>
class Vec2 {
  constructor() {
    this.pi = Math.PI;
    this.pi2 = this.pi * 2;
  }

  add(p1, p2) {
    const x = p1.x + p2.x;
    const y = p1.y + p2.y;
    return this.set(x, y);
  }

  sub(p1, p2) {
    const x = p1.x - p2.x;
    const y = p1.y - p2.y;
    return this.set(x, y);
  }

  div(p1, p2) {
    const x = p1.x / p2.x;
    const y = p1.y / p2.y;
    return this.set(x, y);
  }

  mul(p1, p2) {
    const x = p1.x * p2.x;
    const y = p1.y * p2.y;
    return this.set(x, y);
  }

  dist(p1, p2) {
    const { x, y } = this.sub(p1, p2);
    return Math.hypot(x, y);
  }

  radToDeg(rad) {
    return rad * 180 / this.pi;
  }

  degToRad(deg) {
    return deg * this.pi / 180;
  }

  angle(p1, p2) {
    const { x, y } = this.sub(p1, p2);
    return Math.atan2(y, x);
  }

  scale(p, n) {
    const x = p.x * n;
    const y = p.y * n;
    return this.set(x, y);
  }

  lerp(l, c, t) {
    const v = t * (c - l) + l;
    return v;
  }

  dot(p1, p2) {
    return p1.x * p2.x + p1.y * p2.y;
  }

  cross(p1, p2) {
    const z = p1.x * p2.x - p1.y * p2.y;
    return this.set(0, 0, z);
  }

  rot2d(p1, p2, a) {
    const { x, y } = this.sub(p1, p2);
    const sin = Math.sin(a);
    const cos = Math.cos(a);

    const rotX = x * cos - y * sin + p2.x;
    const rotY = x * sin - y * cos + p2.y;

    return this.set(rotX, rotY);
  }

  length(p) {
    return Math.sqrt(p.x * p.x + p.y * p.y);
  }

  norm(p) {
    const { x, y } = p;
    let len = x * x + y * y;

    if (len > 0) len = 1 / Math.sqrt(len);

    const out1 = x * len;
    const out2 = y * len;

    return this.set(out1, out2);
  }

  clamp(v, min, max) {
    return Math.max(min, Math.min(v, max));
  }

  map(y2, y1, x2, x1, currentVal) {
    // y = mx + b
    const m = (y2 - y1) / (x2 - x1),
      b = y1 - m * x1;

    return m * currentVal + b;
  }

  set(x = 0, y = 0, z = 0) {
    return { x, y, z };
  }
}
      const vec2 = new Vec2();

const init = () => {
  const content = document.querySelector(".content");
  const cursor = document.querySelector(".cursor");
  const dot = document.querySelector(".dot");
  const width = innerWidth;
  const height = innerHeight;

  let mouse = {
    x: 0,
    y: 0 };

  let lastmouse = { x: 0, y: 0 };

  const gl = {
    renderer: new THREE.WebGLRenderer({ a.........完整代码请登录后点击上方下载按钮下载查看

粘性图片动画效果

网友评论0

原生js+css实现自适应图片列表相册滚动点击放大效果代码

js+css实现跟随鼠标聚光灯照射图片放大效果代码

js+css实现卡片堆叠层叠图片点击放大效果代码

js+css实现报纸图片玻璃放大镜移动效果代码

div+css实现多张图片饼状分布排列拼筹圆形悬停放大显示代码

div+css实现网格灰色图片悬浮变彩色放大交互效果代码

js+css实现图片放大镜效果代码

原生js+css实现单个图片放大显示效果代码

bootstrap+handlebars+velocity实现图片列表悬浮放大显示文字交互效果代码

js+css实现相册图片组成文字形状点击放大效果代码