Kuidas muuta oma veebisait CSS-i ja JavaScripti abil tundlikuks ja interaktiivseks

Responsiivse ja interaktiivse veebisaidi omamine on iga veebisaidi omaniku kirjutamata nõue. Mis tahes ekraanisuurusega ideaalselt kohanduva interaktiivse veebisaidi eeliseid ei saa ülehinnata.

Peaksite looma isikupärastatud kogemuse igale teie veebisaiti külastavale kasutajale ning mitme CSS-i atribuudi ja mõne JavaScripti funktsiooniga saate seda teha.

Sellest õpetusartiklist saate teada, kuidas muuta oma HTML- ja CSS-i veebisait tundlikuks ja interaktiivseks.

Veebisaidi interaktiivseks muutmine

Veebisaidi loomisel alustate ülalt alla. Seetõttu on veebisaidi interaktiivseks muutmine protsess, mis peaks samuti algama tipust. Võtke sellel portfelli veebisaidil ehitasime eeskujuks. Sellel on puhas disain, kuid see pole täielikult interaktiivne.

Iga menüüelement muudab värvi, kui hõljutate kursorit selle kohal, kuid kuidas teate, millisel veebisaidi jaotisel olete? Noh, selleks on kaks võimalust – aktiveerige menüüelemendid edasikerimine ja onclick sündmused.

Menüüelemendi aktiveerimine iga kord, kui kerite veebisaidil üles või alla, nõuab JavaScripti funktsiooni kasutamist, mida saate nimetada aktiivseks menüüks. See funktsioon vajab juurdepääsu navigeerimisriba menüüüksustele ja igale veebisaidi jaotisele. Õnneks saate seda teha kasutades

querySelectorAll DOM-i valija.

Oma projektikataloogis peate looma uue JavaScripti faili ja linkima selle oma HTML-failiga, kasutades järgmist koodirida:

Sees stsenaarium silt, src väärtus on JavaScripti faili nimi, mis ülaltoodud näites on main.js.

Main.js fail

// JavaScripti kasutamine menüüelemendi aktiveerimiseks kerimisel
const li = document.querySelectorAll(.links");
const sec = document.querySelectorAll("jaotis");
function activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktiivne"));
li[len].classList.add("aktiivne");
}
aktiivneMenüü();
window.addEventListener("kerimine", aktiivneMenu);

The querySelectorAll ülaltoodud koodi valija haarab kõik menüüelemendid, kasutades nuppu lingid klass. See haarab ka kõik veebisaidi jaotised, kasutades osa silt. The Aktiveeri Menüü funktsioon võtab seejärel iga jaotise pikkuse ja eemaldab või lisab "aktiivse" muutuja sõltuvalt kasutaja kerimisasendist.

Ülaltoodud koodi toimimiseks peate värskendama portfelli veebisaidi stiililehte, et lisada navigeerimisriba jaotisesse järgmine kood:

#navbar .menu li.active a{
värv: #fff;
}

Menüüüksuste aktiveerimine klõpsuga

 //menüüüksuse onclick aktiveerimiseks jquery abil
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Ülaltoodud koodi lisamine JavaScripti faili aktiveerib iga jaotise, kui kasutaja klõpsab vastaval menüüelemendil. Siiski kasutab see jQueryt (JavaScripti teek), mis täidab selle ülesande minimaalse koguse koodiga.

Iga menüü üksuse klõpsamisel aktiveerimisel võib tekkida probleem, et navigeerimisriba katab iga jaotise ülemise osa. Selle vältimiseks saate stiililehe utiliidi jaotisesse lihtsalt sisestada järgmise koodi:

jaotis{
kerimismarginaali ülaosa: 4,5rem;
}

Ülaltoodud kood tagab, et kui navigeerite iga jaotise juurde, klõpsates, jääb navigeerimisriba iga jaotise kohale 4,5 rem (või 72 piksli) kõrgusele. Veel üks lahe funktsioon, mida oma veebisaidile lisada, on sujuv kerimine, mida saate teha järgmise CSS-koodiga:

html {
kerimiskäitumine: sujuv;
}

Kodulehe interaktiivseks muutmine

Enamikul veebisaitidel näeb kasutaja oma esimest nuppu navigeerimisribal või avalehel. Peale selle, et nupp näeb välja nagu üleskutse tegevusele, peaks see olema ka interaktiivne. Suurepärane viis selle saavutamiseks on CSS :hõljuma valija, mis määrab elemendile uue oleku iga kord, kui kasutaja hiir sellest üle jookseb.

Portfelli veebisaidil on avalehel ainsal lingil btn klass (mis annab sellele nupu välimuse). Selle nupu interaktiivseks muutmiseks saate lihtsalt määrata :hõljuma valija juurde btn klass.

Kasutades :hover valijat

 .btn: hover{
taust: #fff;
värv: sinine;
ääris: sinine tahke ;
piiri raadius: 5 pikslit;
}

Ülaltoodud koodi lisamine portfelli veebisaidi utiliitide jaotisesse muudab nupu ülemineku ühest olekust teise, kui hõljutate selle kohal.

Veel üks lahe funktsioon avalehe jaoks on trükkimisanimatsioon, mis kasutab typed.js (jQuery tippimise animatsiooni skript).

Typed.js kasutamine

// jquery tekstianimatsiooni skripti tippimine
var typed = new Typed(".tiping", {
stringid: ["Tarkvara arendaja"],
tüüpKiirus: 100,
tagasikiirus: 60,
silmus: tõsi
});

Pärast ülaltoodud koodi lisamist JavaScripti faili peate HTML-is tegema järgmise muudatuse.

Ja ma olen a 

Ülaltoodud koodis asendate algkoodis teksti "Tarkvaraarendaja" klassiga "Tüpimine", luues tippimisanimatsiooni.

Muude veebisaidi osade interaktiivseks muutmine

Nuppude utiliidi klassi loomine ja selle kasutamine hõljuma valija tagab, et iga teie veebilehe jaotis, millel on nupp, on interaktiivne. CSS-i ülemineku- ja teisendusomadustel on ka mõned suurepärased animatsioonifunktsioonid, mida saate oma veebisaidile lisada.

Kui teie veebisaidil on galerii või mõni pildijaotis, saate oma piltidele hõljutusefekti loomiseks kasutada kahte ülalnimetatud atribuuti. Järgmise CSS-koodi lisamine piltidele portfelli veebisaidi projektijaotises loob jaotises olevatele piltidele teisendusefekti:

.img-container img{
maksimaalne laius: 450 pikslit;
üleminek: kõik 0,3s kergendus;
kursor: kursor;
}
.img-container img: hover{
teisendus: skaala (1,2);
}

Veebisaidi muutmine tundlikuks

Reageeriva veebisaidi loomisel peate arvestama nelja erineva seadmetüübiga – lauaarvutid, sülearvutid, tahvelarvutid ja nutitelefonid. Lisaks on kõigil nendel seadmetüüpidel ka erinevad ekraanisuurused, kuid nende nelja kategooria omamine on hea koht alustamiseks.

Seotud: Kuidas kasutada meediumipäringuid HTML-is ja CSS-is reageerivate veebisaitide loomiseks

Oma praeguses olekus kuvatakse portfelli veebisait hästi laua- ja sülearvutites. Seega tähendab selle tundlikuks muutmine tahvelarvutite ja nutitelefonide jaoks kohandatud paigutuse loomist.

Parim viis CSS-i ja HTML-iga tundliku disaini saavutamiseks on meediapäringute kaudu. Meediumipäringu saate paigutada CSS-faili või HTML-i link silt. Viimane lähenemisviis hõlbustab skaleeritavust ja see on ka meetod, mida ma demonstreerin.

Peate looma kaks täiendavat CSS-faili. Esimene CSS-fail loob horisontaalrežiimis väikeste sülearvutite ja tahvelarvutite paigutusstruktuuri. Selle maksimaalne laius on 1100 pikslit, nagu näete järgmisel lingisildil:

Ülaloleva koodirea sisestamine sisestusse pea HTML-faili (või antud juhul portfelli veebisaidi faili) märgend tagab, et iga seade, mille ekraanilaius on 1100 pikslit ja all kasutavad stiilis laiekraan.css faili.

Fail widescreen.css

/* Kodu */
#navbar .container h1 a span{
kuva: puudub;
}
#home .home-content .text-3 span{
värv: #000000;
}
/* Portfell */
.projektid{
õigustama-sisu: keskpunkt;
}
.project{
painduvus: 0;
}
/* Teave */
.about-content{
paindesuund: veerg;
}
/* Võtke ühendust */
.contact-content{
paindesuund: veerg;
}

Ülaltoodud kood loob 1100 piksli ja väiksema ekraanisuurusega seadmetes tundliku paigutuse, nagu näete allolevas väljundis:

Teine CSS-fail loob portreerežiimis nutitelefonide ja tahvelarvutite paigutuse struktuuri. Selle maksimaalne laius on 760 pikslit, nagu näete järgmisest lingisildist:

Fail mobile.css

/* Navibar */
#navbar .container h1 a span{
kuva: puudub;
}
#navbar .container .menu{
veeris-vasak: 0rem;
}
#singi-menüü{
laius: 35 pikslit;
kõrgus: 30 pikslit;
veeris: 30px 0 20px 20px;
kursor: kursor;
}
#navbar .container .menu-wrap .menu{
kuva: puudub;
}
.bar{
kõrgus: 5px;
laius: 100%;
taustavärv: #ffffff;
kuva: plokk;
piiri raadius: 5 pikslit;
üleminek: 0,3s lihtsus;
}
#bar1{
teisendus: translateY(-4px);
}
#bar3{
teisendus: translateY(4px);
}
/* Kodu */
#Kodu{
ekraan: flex;
taust: url("/images/home.jpg") no-repeat center;
kõrgus: 100vh;
}
#home .container{
veeris: 6rem 1rem 2rem 1rem;
polster: 2rem;
}
#home .home-content .text-1{
fondi suurus: 20 pikslit;
veeris: 1,2rem;
}
#home .home-content .text-2{
fondi suurus: 45 pikslit;
fondi kaal: 500;
veeris: 1rem;
}
#home .home-content .text-3{
fondi suurus: 22 pikslit;
veeris: 1,2rem;
}
#home .home-content .text-3 span{
värv: #0000ff;
fondi kaal: 600;
}
#home .container{
veeris-vasak: 4,5rem;
}
/* Teave */
#about .container{
polsterdus: 0;
}
/* Võtke ühendust */
#contact .container{
polsterdus: 0;
}

Ülaltoodud fail loob järgmise tundliku nutitelefoni paigutuse:

Muud võimalused reageerivate interaktiivsete veebisaitide loomiseks

Teadmine, kuidas muuta oma veebisait CSS-i ja HTML-i abil reageerivaks ja interaktiivseks, on suurepärane oskus. Kuid need pole ainsad meetodid, mis muudavad teie veebisaidi tundlikuks ja interaktiivseks.

Paljud kasutajaliidese raamistikud ja isegi mallid sellistes teenustes nagu Joomla hõlbustavad reageerivat interaktiivset kujundust.

15 stiilset Joomla malli tundlike veebisaitide jaoks

Kas soovite luua oma ettevõtte või ajaveebi jaoks veebisaiti? Proovige neid Joomla malle.

Loe edasi

Autori kohta