2016-03-24 16 views
0

parallax.js eklentisini ve yıldızları oluşturan iki ayrı tuval öğesini kullanarak bir alan efekti oluşturmaya çalışıyorum. Plugin'in github'u tarafından belirtildiği gibi HTML ve JS'yi kurdum, ancak tuval öğelerinin hiçbiri dikey olarak hareket etmiyor.Vertical Parallax Parallax.js Kullanılmıyor

Bunu gösteren bir JS Fiddle yaptım. Kodun ilk kısmı eklentidir ve alttaki tuval kodumdur.

Tuval öğeleri için kullandığım kod İşte.

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(); 
    } 
} 

cevap

0

Bu oldukça niş bir sorundur ama bu benim <UL> yüksekliği 0 oldu ve bu dikey paralaks etkilenen çıkıyor.

İlgili konular