2016-03-24 86 views
0

所以我試圖創建一個空間效果使用插件parallax.js和兩個獨立的畫布元素創建星星。我已經按照Plugin的github的指示設置了HTML和JS,但它們都不是垂直移動的。垂直視差不工作使用Parallax.js

我作了JS Fiddle的演示。代碼的第一部分是插件,底部是我的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(); 
    } 
} 

回答

0

這是一個非常小衆的問題,但事實證明,我的<UL>高度爲0,並且影響了垂直視差。