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) .........完整代码请登录后点击上方下载按钮下载查看