粘性图片动画效果
代码语言: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