我怎样才能使这个 Codepen 项目成为我网站的背景?
How would I be able to make this Codepen project my website's background?
抱歉问了这个愚蠢的问题,但我想知道如何才能使这个 javascript 我的网站背景。 JavaScript 相对较新,我不太确定如何将其作为背景来实现。
LINK 密码本:
'''https://codepen.io/strangerintheq/pen/JjdZKEa'''
免责声明
首先 - 甚至不要考虑试图理解那里发生的一切。作为初学者,您应该真正努力向上,并在某个时候发明您自己的奇特项目。
实施
HTML
<head>
<!-- Other stuff -->
<script defer src="https://raw.githack.com/strangerintheq/ShaderToy/master/ShaderToy.js"></script>
<script defer src="shader.js"></script>
<!-- Other scripts of yours -->
</head>
您基本上是在添加两个脚本。第一个来自网站,第二个你必须自己复制(也就是你可以在 Codepen JS 部分看到的那个)。
JS
// filename: "shader.js"
// https://thelig.ht/chladni/
let uf = {xy: '2f'};
addEventListener('mousemove', e => uf.xy([e.x/innerWidth,e.y/innerHeight]))
new ShaderToy(`void main(void) {
const float PI = 3.14159265;
vec2 p = (2.0 * gl_FragCoord.xy - resolution.xy) / resolution.y;
vec4 s1 = vec4(1.0, 1.0, 1.0, 2.0);
vec4 s2 = vec4(-4.0, 4.0, 4.0, 4.6);
float tx = sin(time)*0.1;
float ty = cos(time)*0.1;
float a = mix(s1.x, s2.x, xy.x+tx);
float b = mix(s1.y, s2.y, xy.x+tx);
float n = mix(s1.z, s2.z, xy.y+ty);
float m = mix(s1.w, s2.w, xy.y+ty);
float max_amp = abs(a) + abs(b);
float amp = a * sin(PI*n*p.x) * sin(PI*m*p.y) + b * sin(PI*m*p.x) * sin(PI*n*p.y);
float col = 1.0 - smoothstep(abs(amp), 0.0, 0.1);
gl_FragColor = vec4(vec3(col), 1.0);
}`, {uniforms:uf}).fullscreen().loop();
我懒得去检查那里发生了什么。如果您有兴趣,也许您喜欢查找有关着色器的一些教程。
CSS
canvas {
z-index: -1;
position: fixed;
top: 0;
}
将其添加到外部样式表或您的头部部分。
该脚本通过在您的页面上创建一个 canvas 来工作。 CSS 将它移到页面上每个元素的后面 (z-index: -1
),使其不可移动 (position: fixed
) 并从 window 的最上边缘开始 (top: 0
).
抱歉问了这个愚蠢的问题,但我想知道如何才能使这个 javascript 我的网站背景。 JavaScript 相对较新,我不太确定如何将其作为背景来实现。
LINK 密码本:
'''https://codepen.io/strangerintheq/pen/JjdZKEa'''
免责声明
首先 - 甚至不要考虑试图理解那里发生的一切。作为初学者,您应该真正努力向上,并在某个时候发明您自己的奇特项目。
实施
HTML
<head>
<!-- Other stuff -->
<script defer src="https://raw.githack.com/strangerintheq/ShaderToy/master/ShaderToy.js"></script>
<script defer src="shader.js"></script>
<!-- Other scripts of yours -->
</head>
您基本上是在添加两个脚本。第一个来自网站,第二个你必须自己复制(也就是你可以在 Codepen JS 部分看到的那个)。
JS
// filename: "shader.js"
// https://thelig.ht/chladni/
let uf = {xy: '2f'};
addEventListener('mousemove', e => uf.xy([e.x/innerWidth,e.y/innerHeight]))
new ShaderToy(`void main(void) {
const float PI = 3.14159265;
vec2 p = (2.0 * gl_FragCoord.xy - resolution.xy) / resolution.y;
vec4 s1 = vec4(1.0, 1.0, 1.0, 2.0);
vec4 s2 = vec4(-4.0, 4.0, 4.0, 4.6);
float tx = sin(time)*0.1;
float ty = cos(time)*0.1;
float a = mix(s1.x, s2.x, xy.x+tx);
float b = mix(s1.y, s2.y, xy.x+tx);
float n = mix(s1.z, s2.z, xy.y+ty);
float m = mix(s1.w, s2.w, xy.y+ty);
float max_amp = abs(a) + abs(b);
float amp = a * sin(PI*n*p.x) * sin(PI*m*p.y) + b * sin(PI*m*p.x) * sin(PI*n*p.y);
float col = 1.0 - smoothstep(abs(amp), 0.0, 0.1);
gl_FragColor = vec4(vec3(col), 1.0);
}`, {uniforms:uf}).fullscreen().loop();
我懒得去检查那里发生了什么。如果您有兴趣,也许您喜欢查找有关着色器的一些教程。
CSS
canvas {
z-index: -1;
position: fixed;
top: 0;
}
将其添加到外部样式表或您的头部部分。
该脚本通过在您的页面上创建一个 canvas 来工作。 CSS 将它移到页面上每个元素的后面 (z-index: -1
),使其不可移动 (position: fixed
) 并从 window 的最上边缘开始 (top: 0
).