three+vfx实现文字和图片像素扫描入场显示动画效果代码-html代码-BFW代码库

three+vfx实现文字和图片像素扫描入场显示动画效果代码

代码语言：html

所属分类：动画

代码描述：three+vfx实现文字和图片像素扫描入场显示动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
html, body { height: 100%; margin: 0; }
body {
  background: black;
  text-align: center;
}

section {
  padding: calc(50svh - 15svh) 0;
}
img {
  height: 30svh;
}
img:first-child { margin-bottom: 30svh; }
img:last-child { margin-top: 30svh; }
h2 {
  display:block;
  color: white;
  font-family: sans-serif;
  font-size: 24svh;
  margin: 8svw 0;
}
</style>


  
  
</head>

<body translate="no">
  <section>
  <img src="//repo.bfw.wiki/bfwrepo/image/5fc2f22ed8eda.png" 
       data-delay="0.3"/>
  
  <h2>Hello.</h2>
  <h2>New.</h2>
  <h2>World.</h2>

  <img src="//repo.bfw.wiki/bfwrepo/image/60cc697953133.png"
       data-mode="2"
       data-delay="0.3" />
</section>
  
      <script  type="module">
// Recreating Smertimba Graphics's Pixel Scan effect using VFX-JS
// https://www.youtube.com/watch?v=JFn2kK8GhUQ
import { VFX } from "//repo.bfw.wiki/bfwrepo/js/module/vfx-core.mjs";

const shader = `
precision highp float;
uniform sampler2D src;
uniform vec2 resolution;
uniform vec2 offset;
uniform float time;
uniform float enterTime;
uniform float leaveTime;

uniform int mode;
uniform float layers;
uniform float speed;
uniform float delay;
uniform float width;

#define W width
#define LAYERS layers

vec4 readTex(vec2 uv) {
  if (uv.x < 0. || uv.x > 1. || uv.y < 0. || uv.y > 1.) {
    return vec4(0);
  }
  return texture(src, uv);
}

float hash(vec2 p) {
  return fract(sin(dot(p, vec2(4859., 3985.))) * 3984.);
}

vec3 hsv2rgb(vec3 c) {
  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

/** Get distance from a box */
float sdBox(vec2 p, float r) {
  vec2 q = abs(p) - r;
  return min(length(q), max(q.y, q.x));
}


float dir = 1.;

/** Remap to animation range [0, 1] */
float toRangeT(vec2 p, float scale) {
  float d;
  
  if (mode == 0) {
    d = p.x / (scale * 2.) + .5; // Left-to-right
  }
  else if (mode == 1) {
    d = 1. - (p.y / (scale * 2.) + .5); // Top-to-bottom
  }
  else if (mode == 2) {
    d = length(p) / scale; // Radial
  }
  
  d = dir > 0. ? d : (1. - d);
    
  return d;
}

vec4 cell(vec2 p, vec2 pi, float scale, float t, float edge) {
  vec2 pc = pi + .5;

  // Get cell alpha
  vec2 uvc = pc / scale;
  uvc.y /= resolution.y / resolution.x;
  uvc = uvc * 0.5 + 0.5;
  if (uvc.x < 0. || uvc.x > 1. || uvc.y < 0. || uvc.y > 1.) {
    return vec4(0);
  }
  float alpha = smoothstep(.0, .1, texture.........完整代码请登录后点击上方下载按钮下载查看