Bu HTML dosyası,network effecti login ekranı oluşturmak için hazırlanmış canvas tabanlı animasyon sistemine sahiptir.
<canvas> kullanarak tam ekran kozmik network arka planı üretir.
Parçacıklar yumuşak dalga hareketiyle nefes alıyormuş gibi akar.
Arka planda ekstra olarak sabit yıldız katmanı bulunur (evren hissi verir.)
Mouse hareketi parçacıklara hafif yön verir,asla bozulma oluşturmaz.
Tıklamada mistik bir enerji dalgası yayılır.
Ortada cam efektli bir login paneli konumlanır.
<canvas> kullanarak tam ekran kozmik network arka planı üretir.
Parçacıklar yumuşak dalga hareketiyle nefes alıyormuş gibi akar.
Arka planda ekstra olarak sabit yıldız katmanı bulunur (evren hissi verir.)
Mouse hareketi parçacıklara hafif yön verir,asla bozulma oluşturmaz.
Tıklamada mistik bir enerji dalgası yayılır.
Ortada cam efektli bir login paneli konumlanır.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>Tht Login Ekranı</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,sans-serif;background:#04000a;color:#fff;overflow:hidden}
canvas{position:fixed;inset:0;z-index:0}
.login-wrapper{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.login-box{
background:rgba(25,10,50,0.9);
backdrop-filter:blur(22px);
padding:44px;
border-radius:28px;
border:1px solid rgba(180,140,255,.35);
box-shadow:0 60px 160px rgba(0,0,0,.85), 0 0 60px rgba(140,80,255,0.15);
width:390px;
text-align:center;
}
.login-box h2{
margin-bottom:26px;
letter-spacing:2px;
font-weight:600;
color:#d9c6ff;
}
.login-box input{
width:100%;
padding:15px;
border-radius:14px;
border:none;
margin-bottom:18px;
background:#160f2a;
color:#fff;
font-size:15px
}
.login-box button{
width:100%;
padding:16px;
border-radius:18px;
border:none;
background:linear-gradient(135deg,#5a2dd8,#8c6bff);
font-weight:600;
color:#fff;
cursor:pointer;
letter-spacing:1px
}
.login-box button:hover{
box-shadow:0 0 60px rgba(160,120,255,.9)
}
</style>
</head>
<body>
<canvas id="bg"></canvas>
<div class="login-wrapper">
<form class="login-box" onsubmit="handleLogin(event)">
<h2>Üye Girişi</h2>
<input type="text" placeholder="Kullanıcı Adı" required>
<input type="password" placeholder="Şifre" required>
<button type="submit">Giriş Yap</button>
</form>
</div>
<script>
const canvas = document.getElementById('bg');
const ctx = canvas.getContext('2d');
let w,h;
let particles=[];
let stars=[];
const COUNT=220;
const STAR_COUNT=200;
let time=0;
let mouse={x:0,y:0};
function resize(){
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
window.addEventListener('resize',resize);
resize();
// ===== UZAK EVREN YILDIZLARI (SABİT + YAVAŞ) =====
class Star{
constructor(){
this.x=Math.random()*w;
this.y=Math.random()*h;
this.z=Math.random();
}
update(){
// yıldızlar neredeyse sabit, sadece titreşim verir
this.x += Math.sin(time*0.0005 + this.y) * 0.05;
}
draw(){
let size=0.4+this.z*1.1;
ctx.beginPath();
ctx.fillStyle=`rgba(120,90,255,${0.15+this.z*0.25})`;
ctx.arc(this.x,this.y,size,0,Math.PI*2);
ctx.fill();
}
}
// ===== ANA MİSTİK NETWORK PARÇACIKLARI =====
class Particle{
constructor(){
this.x=Math.random()*w;
this.y=Math.random()*h;
this.baseX=this.x;
this.baseY=this.y;
this.vx=0;
this.vy=0;
}
update(){
// Yavaş, dalgamsı ve kutsal nefes alma efekti
this.vx += Math.sin((this.y+time)*0.0008) * 0.1;
this.vy += Math.cos((this.x+time)*0.0008) * 0.1;
// Mouse sadece hafif akım yönü verir
const dx = mouse.x - this.x;
const dy = mouse.y - this.y;
const dist = Math.sqrt(dx*dx+dy*dy);
if(dist < 200){
this.vx += dx * 0.00008;
this.vy += dy * 0.00008;
}
// Merkezlenmiş kutsal alan hissi
this.vx += (this.baseX - this.x) * 0.001;
this.vy += (this.baseY - this.y) * 0.001;
this.vx *= 0.92;
this.vy *= 0.92;
this.x += this.vx;
this.y += this.vy;
}
}
function init(){
particles=[]; stars=[];
for(let i=0;i<COUNT;i++) particles.push(new Particle());
for(let i=0;i<STAR_COUNT;i++) stars.push(new Star());
}
init();
window.addEventListener('mousemove',e=>{
mouse.x=e.clientX;
mouse.y=e.clientY;
});
window.addEventListener('click',()=>{
// mistik enerji dalgası
particles.forEach(p=>{
p.vx += (Math.random()-0.5)*3;
p.vy += (Math.random()-0.5)*3;
});
});
function draw(){
const glow = ctx.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.max(w,h)/1.2);
glow.addColorStop(0,'rgba(80,20,120,0.35)');
glow.addColorStop(1,'rgba(4,0,10,0.6)');
ctx.fillStyle = glow;
ctx.fillRect(0,0,w,h);
time += 1;
stars.forEach(s=>{s.update();s.draw()});
particles.forEach(p=>p.update());
for(let i=0;i<particles.length;i++){
let p=particles[i];
ctx.beginPath();
ctx.fillStyle='rgba(190,160,255,0.6)';
ctx.arc(p.x,p.y,1.4,0,Math.PI*2);
ctx.fill();
for(let j=i+1;j<particles.length;j++){
let q=particles[j];
let dx=p.x-q.x;
let dy=p.y-q.y;
let d=Math.sqrt(dx*dx+dy*dy);
if(d<130){
ctx.strokeStyle='rgba(160,120,255,0.15)';
ctx.beginPath();
ctx.moveTo(p.x,p.y);
ctx.lineTo(q.x,q.y);
ctx.stroke();
}
}
}
requestAnimationFrame(draw);
}
draw();
function handleLogin(e){
e.preventDefault();
particles.forEach(p=>{
p.vx+=(Math.random()-0.5)*6;
p.vy+=(Math.random()-0.5)*6;
});
}
</script>
</body>
</html>
Son düzenleme:
