粘性图片动画效果-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.........完整代码请登录后点击上方下载按钮下载查看