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