Web Sitenizi CSS ve JavaScript ile Duyarlı ve Etkileşimli Hale Getirme

Hem duyarlı hem de etkileşimli bir web sitesine sahip olmak, her web sitesi sahibi için yazılı olmayan bir gerekliliktir. Herhangi bir ekran boyutuna mükemmel şekilde uyum sağlayan etkileşimli bir web sitesine sahip olmanın faydaları göz ardı edilemez.

Web sitenizi ziyaret eden her kullanıcı için kişiselleştirilmiş bir deneyim oluşturmalısınız ve birkaç CSS özelliği ve birkaç JavaScript işleviyle tam da bunu yapabilirsiniz.

Bu eğitici makalede, HTML ve CSS web sitenizi nasıl duyarlı ve etkileşimli hale getireceğinizi öğreneceksiniz.

Web Sitenizi Etkileşimli Hale Getirmek

Bir web sitesi kurarken, yukarıdan aşağıya doğru başlarsınız. Bu nedenle web sitenizi interaktif hale getirmek de en baştan başlaması gereken bir süreçtir. Almak bu portföy web sitesi örnek olarak oluşturduk. Temiz bir tasarıma sahiptir ancak tamamen etkileşimli değildir.

Her menü öğesinin üzerine geldiğinizde renk değiştirir, ancak web sitesinin hangi bölümünde olduğunuzu nasıl bilebilirsiniz? Bunu yapmanın iki yolu var - menü öğelerini şu şekilde etkinleştirin: onscroll ve tıklamada Etkinlikler.

Bir web sitesini her yukarı veya 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 gezinme çubuğundaki menü öğelerine ve ayrıca web sitesinin her bölümüne erişmesi gerekir. Neyse ki, bunu kullanarak başarabilirsiniz. sorguSelectorTümü DOM seçici.

Proje dizininizde, yeni bir JavaScript dosyası oluşturmanız ve aşağıdaki kod satırını kullanarak onu HTML dosyanıza bağlamanız gerekir:

İçinde senaryo etiket, kaynak value, yukarıdaki örnekte JavaScript dosyasının adıdır. ana.js.

main.js Dosyası

// onscroll menü öğesini etkinleştirmek için javascript kullanma
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("bölüm");
function activeMenu(){
let len=sn.uzunluk;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("etkin"));
li[len].classList.add("etkin");
}
aktifMenu();
window.addEventListener("kaydırma", activeMenu);

bu sorguSelectorTümü yukarıdaki koddaki seçici, tüm menü öğelerini bağlantılar sınıf. Ayrıca, kullanarak web sitesinin tüm bölümlerini alır. Bölüm etiket. bu etkinleştirmekMenü işlev daha sonra 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 veya ekler.

Yukarıdaki kodun çalışması için portföy web sitesi stil sayfasını, gezinme çubuğu bölümüne aşağıdaki kodu içerecek şekilde güncellemeniz gerekir:

#navbar .menu li.active a{
renk: #fff;
}

Menü Öğelerini onclick etkinleştirme

 // tıklandığında menü öğesini etkinleştirmek için jquery kullanma
$(belge).on('tık', 'li', işlev(){
$(this).addClass('active').siblings().removeClass('active')
})

Yukarıdaki kodu JavaScript dosyanıza eklemek, bir kullanıcı uygun menü öğesini tıkladığında her bölümü etkinleştirecektir. Ancak, bu görevi gerçekleştiren jQuery (bir JavaScript kitaplığı) kullanır, bu da minimum miktarda kod olacaktır.

Tıkladığınızda her menü öğesini etkinleştirdiğinizde karşılaşabileceğiniz bir sorun, gezinme çubuğunun her bölümün üst kısmını kaplamasıdır. Bunu önlemek için, stil sayfasının yardımcı program bölümüne aşağıdaki kodu eklemeniz yeterlidir:

Bölüm{
kaydırma kenar boşluğu üst: 4.5rem;
}

Yukarıdaki kod, tıklayarak her bölüme gittiğinizde gezinme çubuğunun her bölümün 4,5 rem (veya 72 piksel) üzerinde kalmasını sağlayacaktır. Web sitenize eklemek için başka bir harika özellik pürüzsüz kaydırma, aşağıdaki CSS koduyla gerçekleştirebilirsiniz:

html {
kaydırma davranışı: pürüzsüz;
}

Ana Sayfanızı Etkileşimli Hale Getirme

Çoğu web sitesinde, bir kullanıcı ilk düğmesini gezinme çubuğunda veya ana sayfada görür. Bir eylem çağrısı gibi görünmenin yanı sıra, bir düğme aynı zamanda etkileşimli olmalıdır. Bunu başarmanın harika bir yolu CSS ile :vurgu kullanıcının faresi üzerine her geçtiğinde öğeye yeni bir durum atayan seçici.

Portföy web sitesinde, ana sayfadaki tek bağlantı, btn sınıf (bu, ona bir düğmenin görünümünü verir). Bu düğmeyi etkileşimli hale getirmek için, basitçe :vurgu seçici btn sınıf.

:hover Seçici'yi kullanma

 .btn: üzerine gelin{
arka plan: #fff;
renk: mavi;
kenarlık: mavi düz ;
sınır yarıçapı: 5 piksel;
}

Portföy web sitesinin yardımcı program bölümüne yukarıdaki kodu eklemek, üzerine geldiğinizde düğmenin bir durumdan diğerine geçişini sağlayacaktır.

Ana sayfanın bir başka harika özelliği de yazma animasyonudur. typed.js (bir jQuery yazarak animasyon komut dosyası).

typed.js'yi kullanma

// jquery yazarak metin animasyonu komut dosyası
var typed = new Typed(".typing", {
dizeler: ["Yazılım Geliştirici"],
tipHız: 100,
geri Hız: 60,
döngü: doğru
});

Yukarıdaki kodu JavaScript dosyanıza ekledikten sonra, HTML'de aşağıdaki değişikliği yapmanız gerekir:

ve ben bir 

Yukarıdaki kodda, orijinal koddaki “Yazılım Geliştirici” metnini “typing” sınıfı ile değiştirerek yazma animasyonunu oluşturuyorsunuz.

Web Sitenizin Diğer Bölümlerini Etkileşimli Hale Getirme

Bir düğme yardımcı programı sınıfı oluşturma ve üzerine gelmek seçici, web sayfanızın bir düğmesi olan her bölümünün etkileşimli olmasını sağlayacaktır. CSS geçiş ve dönüştürme özellikleri, web sitenize ekleyebileceğiniz bazı harika animasyon özelliklerine de sahiptir.

Web sitenizde bir galeri veya herhangi bir resim bölümü varsa, resimleriniz üzerinde fareyle üzerine gelme efekti oluşturmak için yukarıda belirtilen iki özelliği kullanabilirsiniz. Portföy web sitesinin proje bölümündeki görsellere aşağıdaki CSS kodunun eklenmesi, bölümdeki görseller üzerinde bir dönüşüm etkisi yaratacaktır:

.img-container img{
maksimum genişlik: 450 piksel;
geçiş: tüm 0.3 saniyelik hareket kolaylığı;
imleç: işaretçi;
}
.img-container img: üzerine gelin{
dönüştürme: ölçek (1.2);
}

Web Sitenizi Duyarlı Hale Getirme

Duyarlı bir web sitesi oluştururken göz önünde bulundurmanız gereken dört farklı cihaz türü vardır: masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler ve akıllı telefonlar. Ek olarak, bu cihaz türlerinin her birinin farklı ekran boyutları da vardır, ancak bu dört kategoriye sahip olmak başlamak için iyi bir yerdir.

İlişkili: Duyarlı Web Siteleri Oluşturmak için HTML ve CSS'de Medya Sorguları Nasıl Kullanılır?

Mevcut durumunda, portföy web sitesi masaüstü ve dizüstü bilgisayarlarda iyi görüntüleniyor. Bu nedenle, onu duyarlı hale getirmek, tabletler ve akıllı telefonlar için özelleştirilmiş bir düzen oluşturmak anlamına gelecektir.

CSS ve HTML ile duyarlı bir tasarım elde etmenin en iyi yolu medya sorgularıdır. Bir CSS dosyasına veya HTML'ye bir medya sorgusu yerleştirebilirsiniz. bağlantı etiket. İkinci yaklaşım ölçeklenebilirliği kolaylaştırır ve aynı zamanda göstereceğim yöntemdir.

İki ek CSS dosyası oluşturmanız gerekecek. İlk CSS dosyası, yatay modda küçük dizüstü bilgisayarlar ve tabletler için düzen yapısını oluşturacaktır. Maksimum genişliğe sahip olacak 1100 piksel, aşağıdaki bağlantı etiketinde gördüğünüz gibi:

Yukarıdaki kod satırını kafa HTML dosyanızın (veya bu durumda portföy web sitesi dosyasının) etiketi, ekran genişliğine sahip her cihazın 1100 piksel ve altında stili kullanacak geniş ekran.css dosya.

geniş ekran.css Dosyası

/* Ev */
#navbar .container h1 bir aralık{
görüntü yok;
}
#home .home-content .text-3 aralığı{
renk: #000000;
}
/* Portföy */
.projeler{
haklı içerik: merkez;
}
.proje{
esnek: 0;
}
/* Hakkında */
.hakkında-içerik{
esnek yön: sütun;
}
/* Temas */
.contact-içeriği{
esnek yön: sütun;
}

Yukarıdaki kod, aşağıdaki çıktıda görebileceğiniz gibi, ekran boyutları 1100 piksel ve altı olan cihazlarda duyarlı bir düzen üretecektir:

İkinci CSS dosyası, portre modunda akıllı telefonlar ve tabletler için düzen yapısını oluşturacaktır. Maksimum genişliğe sahip olacak 760 piksel, aşağıdaki bağlantı etiketinde görebileceğiniz gibi:

mobile.css Dosyası

/* Gezinme çubuğu */
#navbar .container h1 bir aralık{
görüntü yok;
}
#navbar .container .menu{
sol kenar boşluğu: 0rem;
}
#ham-menü{
genişlik: 35 piksel;
yükseklik: 30 piksel;
kenar boşluğu: 30px 0 20px 20px;
imleç: işaretçi;
}
#navbar .container .menu-wrap .menu{
görüntü yok;
}
.Çubuk{
yükseklik: 5 piksel;
genişlik: %100;
arka plan rengi: #ffffff;
Ekran bloğu;
sınır yarıçapı: 5 piksel;
geçiş: 0,3 sn kolaylık;
}
#bar1{
dönüştürmek: çevirY(-4px);
}
#bar3{
dönüştürmek: çevirY(4px);
}
/* Ev */
#ev{
ekran: esnek;
arka plan: url("/images/home.jpg") tekrarsız merkez;
yükseklik: 100vh;
}
#home .container{
marj: 6rem 1rem 2rem 1rem;
dolgu: 2rem;
}
#home .home-content .text-1{
yazı tipi boyutu: 20 piksel;
marj: 1.2rem;
}
#home .home-content .text-2{
yazı tipi boyutu: 45 piksel;
yazı tipi ağırlığı: 500;
marj: 1rem;
}
#home .home-content .text-3{
yazı tipi boyutu: 22 piksel;
marj: 1.2rem;
}
#home .home-content .text-3 aralığı{
renk: #0000ff;
yazı tipi ağırlığı: 600;
}
#home .container{
sol kenar boşluğu: 4.5rem;
}
/* Hakkında */
#about .container{
dolgu: 0;
}
/* Temas */
#contact .container{
dolgu: 0;
}

Yukarıdaki dosya, aşağıdaki duyarlı akıllı telefon düzenini üretecektir:

Duyarlı Etkileşimli Web Siteleri Oluşturmanın Diğer Yolları

CSS ve HTML kullanarak web sitenizi nasıl duyarlı ve etkileşimli hale getireceğinizi bilmek, sahip olunması gereken harika bir beceridir. Ancak bunlar, web sitenizi duyarlı ve etkileşimli hale getirmenin tek yöntemi değildir.

Joomla gibi hizmetlerdeki birçok ön uç çerçevesi ve hatta şablonlar, duyarlı etkileşimli tasarımları kolaylaştırır.

Duyarlı Web Siteleri için 15 Şık Joomla Şablonu

İşletmeniz veya blogunuz için bir web sitesi mi oluşturmak istiyorsunuz? Bu Joomla şablonlarını deneyin.

Sonrakini Oku

Yazar hakkında