three+gsap实现玫瑰加载过渡动画效果代码
代码语言:html
所属分类:动画
代码描述:three+gsap实现玫瑰加载过渡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Cormorant:wght@500&display=swap"); body { overflow: hidden; } #webgl-canvas { position: fixed; z-index: -1; } .title { opacity: 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-family: "Cormorant", serif; font-size: 8rem; } </style> </head> <body> <canvas id="webgl-canvas"></canvas> <h1 class="title">ROSE</h1> <!-- vertexShader --> <script id="js-vertex-shader" type="x-shader/x-vertex"> attribute vec3 position; attribute vec2 uv; varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); } </script> <!-- fragmentShader --> <script id="js-fragment-shader" type="x-shader/x-fragment"> precision mediump float; uniform sampler2D uTexture1; uniform sampler2D uTexture2; uniform sampler2D uDisp; uniform vec2 uMeshsize; uniform vec2 uTexturesize; uniform float uAnimation; varying vec2 vUv; mat2 scale(vec2 _scale) { return mat2(_scale.x, 0.0, 0.0, _scale.y); } void main() { vec2 ratio = vec2( min((uMeshsize.x / uMeshsize.y) / (uTexturesize.x / uTexturesize.y), 1.0), min((uMeshsize.y / uMeshsize.x) / (uTexturesize.y / uTexturesize.x), 1.0) ); vec2 newUV = vec2( vUv.x * ratio.x + (1.0 - ratio.x) * 0.5, vUv.y * ratio.y + (1.0 - ratio.y) * 0.5 ); vec2 st = newUV; st -= vec2(0.5); st = scale(vec2(0.8 + (uAnimation * 0.2))) * st; st += vec2(0.5); vec2 ed = newUV; ed -= vec2(0.5); ed = scale(vec2(1.0 - (uAnimation * 0.06))) * ed; ed += vec2(0.5); vec4 img1 = texture2D(uTexture1, st); vec4 img2 = texture2D(uTexture2, ed); vec4 displace = texture2D(uDisp, newUV); float disp = smoothstep(0.0, displace.r, uAnimation); vec4 color = mix(img1, img2, disp); gl_FragColor = color; } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gs.........完整代码请登录后点击上方下载按钮下载查看
网友评论0