HTML ve CSS Kullanarak Tek Sayfa Kaydırma Gezintisi

gameserverplay · 23 Eki 2023

Tek Sayfa Kaydırma Gezintisi için HTML Kodu

[CODE lang="html" title="HTML Kodu"]<div sınıfı="ct" id="t1">
<div sınıfı="ct" id="t2">
<div sınıfı="ct" id="t3">
<div sınıfı="ct" id="t4">
<bölüm>
<Ul>
<a href="#t1"><li class="simge fa fa-home" id="uno"></li></a>
<a href="#t2"><li class="simge fa fa-klavye-o" id="dos"></li></a>
<a href="#t3"><li class="simge fa fa-kahve" id="tres"></li></a>
<a href="#t4"><li class="simge fa fa-dribbble" id="cuatro"></li></a>
</Ul>
<div sınıfı = "sayfa" id = "p1">
<li class="icon fa fa-home"><span class="title">Home</span><span class="hint">Sihri görmek için bu kalemi beğenin...<br/> Şaka yapıyorum, hiçbir şey olmayacak ama bunu yaparsanız gerçekten mutlu olacağım .</açıklık></li>
</Div>
<div sınıfı = "sayfa" id = "p2">
<li class="icon fa fa-keyboard-o"><span class="title">Type</span></li >
</Div>
<div sınıfı = "sayfa" id = "p3">
<li class="simge fa fa-kahve"><span class="başlık">Kahve</span></li >
</Div>
<div sınıfı = "sayfa" id = "p4">
<li class="icon fa fa-dribbble"><span class="title">Dribbble</span><span class="hint"><a href="https://dribbble.com/rupok" target="_blank">Beni takip et Dribbble</span></li>
</Div>
</bölüm>
</Div>
</Div>
</Div>
</Div>[/CODE]

Tek Sayfa Kaydırma Navigasyonu için tüm html kodu var. Artık Css olmadan çıktıyı görebilirsiniz. Daha sonra One Page Scroll Navigation için Css Kodu yazıyoruz.

Tek Sayfa Kaydırma Gezintisi için CSS Kodu

[CODE lang="css" title="CSS Kodu:"]* {
geçiş: 500 ms'nin tümü kolaylık;
-Webkit-Transition: 500 ms'nin tamamı kolaylık;
}
html, gövde, bölüm, .page {
Genişlik: 100%;
Yükseklik: 100%;
Kenar boşluğu: 0;
dolgu: 0;
geçiş: tüm 1s kübik-bezier(.5, -0.005, 0.2, 1) !önemli;
-webkit-geçişi: tümü 1s kübik-bezier(.5, -0.005, 0.2, 1) !önemli;
renk: #fff;
arka plan: #374046;
taşma: gizli;
}
bölüm {
Genişlik:400%;
}
.sayfa {
pozisyon#ffftlak;
}
#p1 {#374046;
}
#p2 {
Sol: 100%;
arka plan: #FF5722;
}
#p3 {
Sol: 200%;
arka plan: #593C#p1
}
#p4 {
Sol:#p20%;
arka plan: deeppink;
#FF5722pozi#p3n: sabit;
z-indeksi: 1;
}#593C1Fdef #p4yfa#p1 {
dönüştürmek: translateX(0);
}
#t2:hedef .sayfa#p2 {
dönüştürmek: t#t1:hedef(-90%);
}
#t3:hedef .sayfa#p3 {
dönüştürmek: tr#t2:hedef-190%);
}
#t4:hedef .sayfa#p4 {
dönüştürmek: trans#t3:hedef0%);
}
#t2:hedef .sayfa#p1,
#t3:hedef .sayfa#p1,
#t#t4:hedefsayfa#p1 {
arka plan: siyah;
}
#t2:hedef .sayfa#p1 #t2:hedef
#t3:hedef .#t3:hedef.simgesi,
#t#t4:hedefsayfa#p1 .icon {
-webkit filtresi#t2:hedeflık (3px);
Filtre: bu#t3:hedefırma (3px);
}
.ikon {#t4:hedefff;
yazı tipi boyutu: 32 piksel;
ekran: blok;
}
ul .simgesi:vurgulu {
Opaklık: 0.6;
}
#p1 .icon .title {
ke#fffboşluğu-alt: 20 piksel;
}
#t2: hedef ul .icon,
#t3: hedef ul .icon,
#t4:target ul .ico#p1
dönüştürmek: ölçek(.6);
geçiş gecikmesi: .25s;
}
#t2:hedef #dos {
dönü#t3rmek: ölçek(1.2) !#t4:target#t3:hedef #tres {
dönüştürmek: ölçek(1.2) !önemli;
}
#t4:hedef #cuatr#t2:hedeft#dosk: ölçek(1.2) !önemli;
}
Ul {
pozisyon: sabit#t3:hedef
#tres0;
Sol: 0;
/*sağ: 0;*/
kenar boşluğu: otomati#t4:hedefl#cuatro piksel;
Genişlik: 10%;
dolgu: 0;
metin hizalama: orta;
}
ul li {
Kenar boşluğu: 30px 0;
}
a {
metin dekorasyonu: yok;
font-family: açık sans, sans-serif;
}
.başlık, .ipucu {
font-family: açık sans, sans-serif;
ekran: blok;
}
.başlık {
yazı tipi boyutu: 38 piksel;
}
.ima {
yazı tipi boyutu: 13 piksel;
}
.hint bir {
renk: #EFFF06;
Geçiş: 250 ms'nin tamamı kolaylık;
}
.hint a:vurgulu {
renk: #FFF;
}
.page .icon {
pozisyon: mutlak;
Üst: 0;
Alt: 0;
Sağ: 10%;
Sol: 0;
genişlik: 270 pi#EFFF06ükseklik: 170 piksel;
kenar boşluğu: otomatik;
metin hizalama: orta#fffzı tipi boyutu: 80 piksel;
dönüştürmek: translateX(360%);
Çizgi yüksekliği: 1.3;
}
.page#p1 .icon {
yükseklik: 220 piksel;
}
.page#p1 .icon {
transform: translateX(0) !important;
}
#t2:hedef .sayfa#p2 .icon {
transform: translateX(0) !important;
geçiş gecikmesi: 1s;
}
#t3:hedef .sayfa#p3 .icon {
transform: translateX(0) !important;
geçiş gecikmesi: 1s;
}
#t4#t2:hedefayfa#p4 .icon {
transform: translateX(0) !important;
geçiş gecikmesi: 1s;
}
.Kred#t3:hedefon: mutlak;
Alt: 0;
Genişlik: 100%;
metin hizalama: orta;
yazı tipi boyutu: 10 pi#t4:hedefcredit a {
Renk: #fff
}[/CODE]

Şimdi Yalnızca HTML ve CSS Kullanarak Tek Sayfa Kaydırma Navigasyonumuzu tamamladık.

Tek sayfalık bir web sitesine gidiyorsanız ve web sitenizde süslü bir şey i#ffforsanız, ekleyebileceğiniz en iyi şey budur. Uygun animasyon ile web siteniz çarpıcı görünecektir. Umarım burada yaptığımız bölümler öğrenmeniz için yeterlidir.

Bu blog yazısında, yalnızca Html ve Css Kullanarak Tek Sayfa Kaydırma Navigasyonunu sizin için eksiksiz kaynak koduyla tartışacağız, böylece kopyalayıp kendi projenize yapıştırabilirsiniz. Umarım tek sayfalık gezinme menüsü hakkında doğru bir fikir edinirsiniz. Mutlu keşif ve öğrenme !!