ogl webgl实现全屏图片旋转轮换轮播效果代码
代码语言:html
所属分类:幻灯片
代码描述:ogl webgl实现全屏图片旋转轮换轮播效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } .font-display { font-family: "Playfair Display", serif; } .font-body { font-family: "Chivo", sans-serif; } .tp-dfwv { z-index: 2; } #app { height: 100vh; position: relative; width: 100%; } #app canvas { height: 100%; position: absolute; width: 100%; } #controls { align-items: center; display: flex; justify-content: space-between; left: 0; mix-blend-mode: difference; padding: 0 4px; pointer-events: none; position: fixed; top: 50%; touch-action: none; transform: translateY(-50%); width: 100%; z-index: 2; } @media (min-width: 1024px) { #controls { padding: 0 30px; } } #controls button { background-color: transparent; border: none; color: white; cursor: pointer; font-size: 16px; outline: none; padding: 0; pointer-events: auto; position: relative; touch-action: auto; } #controls button[data-dir="-1"] { transform: rotate(-90deg); } #controls button[data-dir="1"] { transform: rotate(90deg); } #controls button::after { bottom: -0.5em; background-color: currentColor; content: ""; display: block; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left center; transition: 0.35s transform; width: 100%; } #controls button:hover::after { transform: scaleX(1); } @media (min-width: 1024px) { #controls button { font-size: 16px; } } #slides { align-self: center; display: flex; height: 100%; justify-content: center; left: 0; mix-blend-mode: difference; padding: 0 60px; position: fixed; top: 0; width: 100%; z-index: 1; } @media (min-width: 1024px) { #slides { padding: 0 100px; } } .slide { align-items: center; color: white; display: flex; flex-direction: column; justify-content: center; text-align: center; } .slide__title { font-size: 34px; line-height: 0.7; margin-bottom: 0.85em; } @media (min-width: 1024px) { .slide__title { font-size: 80px; line-height: 1; margin-bottom: 0.25em; } } .slide__subtitle { letter-spacing: 0.1em; } @media (min-width: 1024px) { .slide__subtitle { font-size: 22px; } } .slide:not([data-current]) { display: none; } </style> </head> <body > <div id="app"></div> <div id="slides" data-slides> <div class="slide" data-slide data-current> <span class="slide__title font-display" data-slide-title> From the depths of the sea </span> <span class="slide__subtitle font-body" data-slide-subtitle> you can't hear any sound, only your heartbeat </span> </div> <div class="slide" data-slide> <span class="slide__title font-display" data-slide-title> The real colors of nature </span> <span class="slide__subtitle font-body" data-slide-subtitle> come out in Autumn, when the leaves start falling </span> </div> <div class="slide" data-slide> <span class="slide__title font-display" data-slide-title> Kids are the future of our world </span> <span class="slide__subtitle font-body" data-slide-subtitle> It's our duty to preserve it </span> </div> <div class="slide" data-slide> <span class="slide__title font-display" data-slide-title> "I like trains" </span> <span class="slide__subtitle font-body" data-slide-subtitle> [dott. Sheldon Cooper] </span> </div> </div> <div id="controls"> <button class="font-display" data-dir="-1">Previous</button> <button class="font-display" data-dir="1">Next</button> </div> <script type="x-shader/x-fragment" data-fragment-shader> precision mediump float; uniform vec2 uScreenSize; uniform float uProgress; uniform sampler2D uTexture0; uniform vec2 uTexture0Size; uniform sampler2D uTexture1; uniform vec2 uTexture1Size; uniform float uRotationDirection; varying vec2 vUv; #define PI 3.14159265359 float Circle(in vec2 st, in float radius, in float blur){ return 1. - smoothstep(radius - (radius*blur), radius+(radius*blur), dot(st,st) * 4.0); } mat2 Rotate(float angle) { return mat2( cos(angle), -sin(angle), sin(angle), cos(angle) ); } vec2 calculateTextureUV(vec2 st, vec2 textureSize) { // An implementation of CSS `background-size: cover` // using http://stackoverflow.com/a/6565988 and my own crappy math vec2 s = uScreenSize; // Screen vec2 i = textureSize; // Image float rs = s.x / s.y; float ri = i.x / i.y; vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x); vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new; vec2 uv = st * s / new + offset; return uv; } void main() { vec2 st = vUv; // UVs used to align the circular masks at the center of the screen vec2 centeredST = vUv - 0.5; centeredST.x *= uScreenSize.x / uScreenSize.y; vec3 color = vec3(0.0); vec2 tex0UV = calculateTextureUV(st, uTexture0Size); vec2 tex1UV = calculateTextureUV(st, uTexture1Size); /* * Background */ float scale = (1.0 - smoothstep(0.45, 0.9, uProgress)*0.1); vec2 uv0_A = (tex0UV - 0.5) * scale + 0.5; scale = (0.9 + smoothstep(0.3, 1.0, uProgress)*0.1); vec2 uv0_B = (tex1UV - 0.5) * scale + 0.5; float progress = smoothstep(1.0, 0.65, uProgress); vec3 t0_A = texture2D(uTexture0, uv0_A).rgb; vec3 t0_B = texture2D(uTexture1, uv0_B).rgb; vec3 t0 = mix(t0_B, t0_A, progress); color = t0; /* * Big circle */ // Scaled UVs scale = (1.0 - smoothstep(0.3, 1.0, uProgress)*0.5); vec2 uv1_A = (tex0UV - 0.5) * scale + 0.5; scale = (0.2 + smoothstep(0.4, 0.8, uProgress)*0.8); vec2 uv1_B = (tex1UV - 0.5) * scale + 0.5; // Rotated UVs float rotation = PI*smoothstep(0.25, 0.95, uProgress)*uRotationDirection; uv1_A = (uv1_A - 0.5)*Rotate(rotation) + 0.5; uv1_B = (uv1_B - 0.5)*Rotate(PI+rotation) + 0.5; // Mask float c1 = Circle(centeredST, 2.4, 0.01); // Change the opacity of the texture progress = smoothstep(0.9, 0.5, uProgress); // Masked texture vec3 t1_A = texture2D(uTexture0, uv1_A).rgb; vec3 t1_B = texture2D(uTexture1, uv1_B).rgb; vec3 t1 = mix(t1_B, t1_A, progress); t1 *= c1; // Remove this mask from the previous layer t0 *= 1.0 - c1; /* * Medium circle */ // Scaled UVs scale = (1.0 - smoothstep(0.2, 0.95, uProgress)*0.6); vec2 uv2_A = (tex0UV - 0.5) * scale + 0.5; scale = (0.2 + smoothstep(0.2, 0.95, uProgress)*0.8); vec2 uv2_B = (tex1UV - 0.5) * scale + 0.5; // Rotated UVs rotation = PI*smoothstep(0.2, 0.9, uProgress)*uRotationDirection; uv2_A = (uv2_A - 0.5)*Rotate(rotation) + 0.5; uv2_B = (uv2_B - 0.5)*Rotate(PI+ro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0