gpt4 book ai didi

javascript - 垂直视差无法使用 Parallax.js

转载 作者:行者123 更新时间:2023-11-28 06:10:30 26 4
gpt4 key购买 nike

所以我尝试使用插件 parallax.js 创建空间效果和创建星星的两个独立的 Canvas 元素。我已经按照插件的 github 的指示设置了 HTML 和 JS,但是这两个 Canvas 元素都没有垂直移动。

我做了一个JS Fiddle这证明了这一点。代码的第一部分是插件,底部是我的 Canvas 代码。

这是我用于 Canvas 元素的代码。

var cvsSmall = document.getElementById("cvsSmall"),
ctxSmall = cvsSmall.getContext("2d"),
cvsBig = document.getElementById("cvsBig"),
ctxBig = cvsBig.getContext("2d"),
particlesSmall = [],
particlesBig = [];

//main
fitCanvas();
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
makeParticles(20);
drawParticles();
ctxSmall.fillRect(0, window.innerWidth, 0, window.innerHeight);

//functions
function fitCanvas() {
cvsSmall.width = window.innerWidth;
cvsBig.width = window.innerWidth;
cvsSmall.height = window.innerHeight;
cvsBig.height = window.innerHeight;
}

function makeParticles(amount) {
for (i = 0; i < amount; i++) {
particle = {
x: Math.random() * cvsSmall.width,
y: Math.random() * cvsSmall.height,
size: 1,
}
particlesSmall.push(particle);
}
for (i = 0; i < amount; i++) {
particle = {
x: Math.random() * cvsBig.width,
y: Math.random() * cvsBig.height,
size: 5,
}
particlesBig.push(particle);
}
}

function drawParticles() {
for (i = 0; i < particlesSmall.length; i++) {
p = particlesSmall[i];
ctxSmall.beginPath();
ctxSmall.fillStyle = "#FFFFFF";
ctxSmall.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
ctxSmall.closePath();
ctxSmall.fill();
}
for (i = 0; i < particlesBig.length; i++) {
p = particlesBig[i];
ctxBig.beginPath();
ctxBig.fillStyle = "#FFFFFF";
ctxBig.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
ctxBig.closePath();
ctxBig.fill();
}
}

最佳答案

这是一个相当小众的问题,但事实证明我的 <UL> 的高度为 0,这会影响垂直视差。

关于javascript - 垂直视差无法使用 Parallax.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36196481/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com