简体   繁体   中英

Vertical Parallax Isn't Working Using Parallax.js

So I am attempting to create a space effect using the plugin parallax.js and two separate canvas elements which create the stars. I have set up the HTML and JS as instructed by the Plugin's github but it neither of the canvas elements move vertically.

I made a JS Fiddle that demonstrates it. The first part of the code is the plugin and at the bottom is my Canvas code.

Here is the code I used for the canvas elements.

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,并影响了垂直视差。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM