Tasarım Fikri
EYECAZ CORE portfolyo sitesinin intro ekranı birkaç katmandan oluşuyor: Grid arka plan, tarama ışığı, sinematik bantlar, dönen halkalar, glitch yazı ve yükleme çubuğu. Hepsi saf CSS animasyonu.
Hiçbir kütüphane kullanılmadı. JavaScript sadece yükleme adımlarını kontrol ediyor; görsel efektlerin tamamı CSS keyframe animasyonlarıyla üretiliyor.
Grid Arka Plan
Klasik terminal grid'i iki background-image katmanının üst üste gelmesiyle elde ediliyor.
.intro-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--brd) 1px, transparent 1px),
linear-gradient(90deg, var(--brd) 1px, transparent 1px);
background-size: 64px 64px;
opacity: 0;
animation: gridfade 1.4s 0.4s forwards;
}
@keyframes gridfade {
to { opacity: 1; }
}
Sinematik Bantlar
Film gibi üst ve alt siyah bantlar ::before ve ::after pseudo-elementleri ile yapıldı. Açılış animasyonu height: 0 transition'ı.
#intro::before, #intro::after {
content: "";
position: absolute;
left: 0; right: 0;
background: #000;
z-index: 3;
transition: height 1.3s cubic-bezier(.77, 0, .18, 1);
}
#intro::before { top: 0; height: 100px; }
#intro::after { bottom: 0; height: 100px; }
/* JS ile class eklince bantlar kapanır */
#intro.bars-gone::before,
#intro.bars-gone::after { height: 0; }
Glitch Efekti
Yazının üstüne iki pseudo-element katılıyor. Bunlar clip-path ile yazının üst ve alt yarısını kesiyor, farklı yönlere kayıyor.
.intro-name::before, .intro-name::after {
content: attr(data-t); /* data-t ile aynı metni kullan */
position: absolute;
top: 0; left: 0;
width: 100%;
overflow: hidden;
}
.intro-name::before {
color: rgba(255, 34, 85, .85);
clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
animation: glr 7s 2.4s infinite;
}
.intro-name::after {
color: rgba(0, 204, 255, .85);
clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
animation: glb 7s 2.7s infinite;
}
@keyframes glr {
0%, 88%, 100% { transform: translate(0); }
89% { transform: translate(-7px, 2px); }
90% { transform: translate(5px, -1px); }
91% { transform: translate(0); }
}
content: attr(data-t) kullanarak HTML elementinin data attribute'unu pseudo-element içeriği olarak kullanabilirsiniz. Bu sayede metni iki yerde yazmak zorunda kalmıyorsunuz.
Dönen Halkalar
Logo etrafındaki üç halka farklı hızlarda dönüyor. Her biri ::before, ::after ve ek bir div ile oluşturuldu.
.intro-logo::before {
content: "";
position: absolute;
inset: -15px;
border: 1px solid rgba(0, 255, 136, .4);
border-radius: 50%;
border-top-color: var(--g);
border-bottom-color: var(--g);
animation: spin 3s linear infinite;
}
.intro-logo::after {
content: "";
position: absolute;
inset: -28px;
border: 1px solid rgba(0, 255, 136, .15);
border-radius: 50%;
animation: spin 7s linear infinite reverse; /* Ters yön */
}
@keyframes spin {
to { transform: rotate(360deg); }
}
HUD Şeritleri
Üst ve alt HUD şeritleri absolute konumlandırmayla yerleştirildi. İçerdikleri metinler siteden çekiliyor: sistem adı, gerçek zamanlı saat ve durum metni.
Yükleme Çubuğu
Yükleme çubuğunun ucundaki parlayan nokta ::after ile yapıldı. JavaScript her adımda sadece width'i değiştiriyor, animasyonu CSS halledıyor.
.intro-line-fill {
height: 100%;
background: var(--g);
box-shadow: 0 0 18px var(--g), 0 0 36px rgba(0, 255, 136, .3);
width: 0;
transition: width .65s cubic-bezier(.4, 0, .2, 1);
position: relative;
}
.intro-line-fill::after {
content: "";
position: absolute;
right: -1px; top: -5px;
width: 9px; height: 12px;
background: var(--g);
box-shadow: 0 0 12px var(--g), 0 0 24px rgba(0, 255, 136, .6);
}