Hem duyarlı hem de etkileşimli bir internet sayfasına haiz olmak, her internet sayfası sahibi için yazılı olmayan bir gerekliliktir. Herhangi bir ekran boyutuna muhteşem bir halde uyum elde eden etkileşimli bir internet sayfasına haiz olmanın avantajları abartılamaz.
Web sitenizi ziyaret eden her kullanıcı için kişiselleştirilmiş bir tecrübe oluşturmalısınız ve birkaç CSS özelliği ve birkaç JavaScript işleviyle bunu yapabilirsiniz.
Bu öğretici makalede, HTML ve CSS web sitenizi iyi mi duyarlı ve etkileşimli hale getireceğinizi öğreneceksiniz.
Web Sitenizi Etkileşimli Hale Getirme
Bir internet sayfası oluştururken, yukarıdan aşağıya doğru başlarsınız. Bu yüzden, web sitenizi etkileşimli hale getirmek de en üstte başlaması ihtiyaç duyulan bir süreçtir. Örnek olarak oluşturduğumuz bu portföy internet sayfasını ele alalım. Temiz bir tasarıma haizdir, sadece tamamen etkileşimli değildir.
Üstüne geldiğinizde her menü öğesi renk değiştirir, sadece web sitesinin hangi bölümünde olduğunuzu iyi mi anlarsınız? Bunu yapmanın iki yolu vardır: menü öğelerini onscroll ve onclick Vaka.
Bir internet sayfasını her yukarı yada aşağı kaydırdığınızda bir menü öğesini etkinleştirmek, “activeMenu” olarak adlandırabileceğiniz bir JavaScript işlevinin kullanılmasını gerektirir. Bu işlevin, navbardaki menü öğelerine ve web sitesinin her kısmına erişmesi gerekir. Her neyse ki, bunu querySelectorTüm DOM seçici.
Proje dizininizde, aşağıdaki kod satırını kullanarak yeni bir JavaScript dosyası oluşturmanız ve HTML dosyanıza bağlamanız gerekir:
Bir betik etiketini Src kıymet, yukarıdaki örnekte ana.js.
Ana .js Dosyası
// using javascript to activate menu item onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("section");function activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec(len).offsetTop){}
li.forEach(ltx => ltx.classList.remove("active"));
li(len).classList.add("active");
}
activeMenu();
window.addEventListener("scroll", activeMenu);
Bu, bir sonraki querySelectorTüm yukarıdaki koddaki seçici, Bağlantı derslik. Ek olarak web sitesinin tüm bölümlerini bölüm etiket. Bu, bir sonraki EtkinleştirmeMenu fonksiyonu sonrasında her bölümün uzunluğunu alır ve kullanıcının kaydırma konumuna bağlı olarak bir “etkin” değişkeni kaldırır yada ekler.
Yukarıdaki kodun emek harcaması için portföy internet sayfası yoldam sayfasını gezinti çubuğu kısmına aşağıdaki kodu içerecek şekilde güncelleştirmeniz gerekir:
#navbar .menu li.active a{
color: #fff;
}
//using jquery to activate menu item onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
Yukarıdaki kodu JavaScript dosyanıza eklemek, bir kullanıcı uygun menü öğesini tıklattığında her kısmı etkinleştirir. Sadece, bu görevi minimum oranda koda başaran jQuery (JavaScript kitaplığı) kullanır.
Tıklatıldığında her menü öğesini etkinleştirdiğinizde karşılaşabileceğiniz bir problem, gezinti çubuğunun her bölümün üst bölümünü kapsamasıdır. Bunu önlemek için, yoldam sayfasının destek programı kısmına aşağıdaki kodu ekleyebilirsiniz:
section{
scroll-margin-top: 4.5rem;
}
Yukarıdaki kod, tıklayarak her bölüme gittiğinizde, navbarın her bölümün (yada 72px) 4,5rem üstünde kalmasını elde edecektir. Web sitenize eklemek için başka bir serin özellik muntazam kaydırma, aşağıdaki CSS koduyla gerçekleştirebileceğiniz:
html {
scroll-behavior: smooth;
}
Giriş Sayfanızı Etkileşimli Hale Getirme
Bir çok internet sayfasında, bir kullanıcı ilk düğmesini navbar yada ana sayfada görür. Fiil çağrısı şeklinde görünmenin yanı sıra, bir düğme de etkileşimli olmalıdır. Bunu başarmanın mükemmel bir yolu CSS :vurgula seçici, bir kullanıcının faresi üstünden her geçmiş olduğu süre öğeye yeni bir durum atar.
Portföy internet sayfasında, ana sayfadaki tek bağlantıda btn sınıfı (bir düğme görünümü verir). Bu yüzden, bu düğmeyi etkileşimli hale getirmek için, :vurgula seçici btn derslik.
:hover Seçici’yi kullanma
.btn:hover{
background: #fff;
color:blue;
border: blue solid ;
border-radius: 5px;
}Yukarıdaki kodu portföy web sitesinin destek program kısmına eklemek, üstüne geldiğinizde düğmenin bir durumdan diğerine geçişini sağlar.
Giriş sayfası için bir başka mükemmel özellik, daktiloyla yaz.js (jQuery yazma animasyon komut dosyası).
Daktilo kullanılarak.js
// jquery typing text animation script
var typed = new Typed(".typing", {
strings: ("Software Developer"),
typeSpeed: 100,
backSpeed: 60,
loop: true
});
Yukarıdaki kodu JavaScript dosyanıza ilave ettikten sonra, HTML’de aşağıdaki değişikliği yapmanız gerekir:
And I'm a
Yukarıdaki kodda, orijinal koddaki “Yazılım Geliştirici” metnini “yazma” sınıfıyla değiştirerek yazma animasyonu oluşturursunuz.
Web Sitenizin Öteki Bölümlerini Etkileşimli Hale Getirme
Düğme destek programı sınıfı oluşturma ve Hover seçici, web sayfanızın düğmeli her bölümünün etkileşimli olmasını sağlar. CSS geçiş ve dönüştürme özellikleri, web sitenize ekleyebileceğiniz bazı mükemmel animasyon özelliklerine de haizdir.
Web sitenizde bir galeri yada herhangi bir fotoğraf bölümünüz var ise, resimleriniz üstünde vurgulu bir efekt oluşturmak için yukarıda belirtilen iki özelliği kullanabilirsiniz. Portföy web sitesinin proje bölümündeki görüntülere aşağıdaki CSS kodunun eklenmesi, bölümdeki görüntüler üstünde bir dönüşüm tesiri yaratacaktır:
.img-container img{
max-width: 450px;
transition: all 0.3s ease-out;
cursor: pointer;
}.img-container img:hover{
transform: scale(1.2);
}
Web Sitenizi duyarlı hale getirme
Duyarlı bir internet sayfası oluştururken göz önünde bulundurmanız ihtiyaç duyulan dört değişik aygıt türü vardır: masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler ve akıllı telefonlar. Ek olarak, bu aygıt türlerinin her biri değişik ekran boyutlarına haizdir, sadece bu dört kategoriye haiz olmak adım atmak için iyi bir yerdir.
Mevcut durumunda, portföy internet sayfası masaüstlerinde ve dizüstü bilgisayarlarda iyi görüntülenir. Bu yüzden, duyarlı hale getirmek, tabletler ve akıllı telefonlar için özelleştirilmiş bir seviye oluşturmak anlamına gelecektir.
CSS ve HTML ile duyarlı bir tasarım elde etmenin en iyi yolu medya sorgularıdır. Medya sorgusunu CSS dosyasına yada HTML’ye yerleştirebilirsiniz bağlantı etiket. İkinci yaklaşım ölçeklenebilirliği kolaylaştırır ve bununla birlikte göstereceğim yöntemdir.
İki ek CSS dosyası oluşturmanız gerekir. İlk CSS dosyası yatay modda ufak dizüstü bilgisayarlar ve tabletler için seviye yapısını oluşturacaktır. Maksimum genişliğe haiz olacak. 1100px, aşağıdaki bağlantı etiketinde gördüğünüz şeklinde:
Yukarıdaki kod satırını baş HTML dosyanızın etiketi (yada bu durumda portföy internet sayfası dosyası), ekran genişliğine haiz her cihazın 1100px ve altında yoldam kullanacaktır geniş ekran.css dosya.
Geniş ekran.css Dosyası
/* Home */
#navbar .container h1 a span{
display: none;
}#home .home-content .text-3 span{
color: #000000;
}
/* Portfolio */
.projects{
justify-content: center;
}
.project{
flex: 0;
}
/* About */
.about-content{
flex-direction: column;
}
/* Contact */
.contact-content{
flex-direction: column;
}
Yukarıdaki kod, aşağıdaki çıktıda görebileceğiniz şeklinde, ekran boyutları 1100 px ve altında olan cihazlarda duyarlı bir seviye üretecektir:
İkinci CSS dosyası portre modunda akıllı telefonlar ve tabletler için seviye yapısını oluşturacaktır. Maksimum genişliğe haiz olacak. 760px, aşağıdaki bağlantı etiketinde görebileceğiniz şeklinde:
Mobil.css Dosyası
/* Navbar */#navbar .container h1 a span{
display: none;
}
#navbar .container .menu{
margin-left: 0rem;
}
#ham-menu{
width: 35px;
height: 30px;
margin: 30px 0 20px 20px;
cursor: pointer;
}
#navbar .container .menu-wrap .menu{
display: none;
}
.bar{
height: 5px;
width: 100%;
background-color: #ffffff;
display: block;
border-radius: 5px;
transition: 0.3s ease;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Home */
#home{
display: flex;
background: url("/images/home.jpg") no-repeat center;
height: 100vh;
}
#home .container{
margin: 6rem 1rem 2rem 1rem;
padding: 2rem;
}
#home .home-content .text-1{
font-size: 20px;
margin: 1.2rem;
}
#home .home-content .text-2{
font-size: 45px;
font-weight: 500;
margin: 1rem;
}
#home .home-content .text-3{
font-size: 22px;
margin: 1.2rem;
}
#home .home-content .text-3 span{
color: #0000ff;
font-weight: 600;
}
#home .container{
margin-left: 4.5rem;
}
/* About */
#about .container{
padding: 0;
}
/* Contact */
#contact .container{
padding: 0;
}
Yukarıdaki dosya aşağıdaki duyarlı akıllı telefon düzenini üretecektir:
Duyarlı Etkileşimli Web Siteleri Oluşturmanın Öteki Yolları
CSS ve HTML kullanarak web sitenizi iyi mi duyarlı ve etkileşimli hale getirip getirebilirsiniz. Sadece web sitenizi duyarlı ve etkileşimli hale getirmek için tek yöntemler bunlar değildir.
Joomla şeklinde hizmetlerde birçok ön uç çerçevesi ve hatta şablon, duyarlı etkileşimli tasarımları kolaylaştırır.