个人中心
gpt4 book ai didi

javascript - 我怎样才能让这个 Codepen 项目成为我网站的背景？

转载 作者：行者123 更新时间：2023-12-02 21:24:37 27 4
gpt4 key购买 nike

很抱歉问了这个愚蠢的问题，但我想知道如何使这个 javascript 成为我网站的背景。对于 JavaScript 来说相对较新，我不太确定如何将其实现为背景。

代码笔链接:

'''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)，并从页面的最上边缘开始窗口(顶部:0)。

关于javascript - 我怎样才能让这个 Codepen 项目成为我网站的背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60766791/

27 4 0
文章推荐： javascript - 使用 Bootstrap-Vue 创建复杂的面板
文章推荐： javascript - 如何全面查询类(class)情况？
文章推荐： javascript - 使用自定义组件时如何在 React-Select 中设置所选项目的样式？
文章推荐： javascript - react ，从选择选项设置状态
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com