Web tasarımında ziyaretçiyi ilk saniyede gözünü boyayan unsurlar artık yalnızca renkler veya yazı tipleri değil; hareket ve effectler.
Particle Network Sphere Efekti, dönen bir parçacık küresi,patlama animasyonu ve bağlantı ağı (network) çizgisi effecti ekler.Küreye tıklayınca patlayarak network effectine dönüşür.Aradan belirli saniye sonra geri düzelir.
İnstagram Üzerinde dolaşırken bu effecte denk geldim.Bunun bazı kodlarına oynama yaptık.Daha tatlı bir hale getirdik.
Kodları paylaşıyorum.İndexlerinizde kendiniz göre editleyebilirsiniz.
Particle Network Sphere Efekti, dönen bir parçacık küresi,patlama animasyonu ve bağlantı ağı (network) çizgisi effecti ekler.Küreye tıklayınca patlayarak network effectine dönüşür.Aradan belirli saniye sonra geri düzelir.
İnstagram Üzerinde dolaşırken bu effecte denk geldim.Bunun bazı kodlarına oynama yaptık.Daha tatlı bir hale getirdik.
Kodları paylaşıyorum.İndexlerinizde kendiniz göre editleyebilirsiniz.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Stable Network Sphere</title>
<style>
html,body{
margin:0;
background:#000;
overflow:hidden;
}
canvas{display:block;cursor:pointer;}
</style>
</head>
<body>
<canvas id="scene"></canvas>
<script>
const canvas = document.getElementById("scene");
const ctx = canvas.getContext("2d");
let w,h,cx,cy;
const COUNT = 1800;
const RADIUS = 180;
let rotation = 0;
let state = "sphere"; // sphere | exploding | reforming
let particles = [];
let mouse = {x:0,y:0};
function resize(){
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
cx = w/2; cy = h/2;
}
resize();
window.onresize = resize;
// ================= PARTICLE =================
class Particle{
constructor(x,y,z){
this.base = {x,y,z};
this.x=x; this.y=y; this.z=z;
this.vx=0; this.vy=0; this.vz=0;
}
update(){
if(state === "reforming"){
this.vx += (this.base.x - this.x) * 0.03;
this.vy += (this.base.y - this.y) * 0.03;
this.vz += (this.base.z - this.z) * 0.03;
}
this.vx *= 0.95;
this.vy *= 0.95;
this.vz *= 0.95;
this.x += this.vx;
this.y += this.vy;
this.z += this.vz;
}
}
// ================= KÜRE =================
function createSphere(){
for(let i=0;i<COUNT;i++){
let a=Math.random()*Math.PI*2;
let b=Math.acos(Math.random()*2-1);
let x=RADIUS*Math.sin(b)*Math.cos(a);
let y=RADIUS*Math.sin(b)*Math.sin(a);
let z=RADIUS*Math.cos(b);
particles.push(new Particle(x,y,z));
}
}
// ================= NETWORK ÇİZGİLER =================
function drawNetwork(points){
for(let i=0;i<points.length;i+=6){
for(let j=i+1;j<i+8;j++){
let p1 = points[i];
let p2 = points[j % points.length];
if(!p1||!p2) continue;
let dx = p1.x-p2.x;
let dy = p1.y-p2.y;
let d = Math.sqrt(dx*dx+dy*dy);
if(d < 120){
ctx.strokeStyle = "rgba(180, 120, 255, 0.6)";
ctx.beginPath();
ctx.moveTo(p1.x,p1.y);
ctx.lineTo(p2.x,p2.y);
ctx.stroke();
}
}
}
}
// ================= PATLAMA =================
function explode(){
if(state !== "sphere") return;
state = "exploding";
particles.forEach(p=>{
p.vx = (Math.random()-0.5)*20;
p.vy = (Math.random()-0.5)*20;
p.vz = (Math.random()-0.5)*20;
});
setTimeout(()=>{
state="reforming";
},5000);
setTimeout(()=>{
state="sphere";
},9000);
}
canvas.onclick = explode;
// ================= ANİMASYON =================
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0,0,w,h);
rotation += 0.002;
let c = Math.cos(rotation);
let s = Math.sin(rotation);
let projected=[];
particles.forEach(p=>{
p.update();
let rx = p.x * c - p.z * s;
let rz = p.x * s + p.z * c;
let scale = 500/(500+rz);
let sx = cx + rx*scale;
let sy = cy + p.y*scale;
ctx.fillStyle="rgba(200,140,255,.95)";
ctx.beginPath();
ctx.arc(sx,sy,1.6,0,Math.PI*2);
ctx.fill();
projected.push({x:sx,y:sy});
});
if(state!=="sphere"){
drawNetwork(projected);
}
}
createSphere();
animate();
</script>
</body>
</html>
