[英]Vertical Parallax Isn't Working Using Parallax.js
因此,我尝试使用插件parallax.js和两个单独的画布元素(创建星星)来创建空间效果。 我已经按照插件的github的指示设置了HTML和JS,但是画布元素都不垂直移动。
我制作了一个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,并影响了垂直视差。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.