Kako svoju web stranicu učiniti responzivnom i interaktivnom uz CSS i JavaScript

Posjedovanje web-stranice koja je i responzivna i interaktivna je nepisani zahtjev za svakog vlasnika web stranice. Prednosti interaktivne web stranice koja se savršeno prilagođava bilo kojoj veličini zaslona ne mogu se precijeniti.

Trebali biste stvoriti personalizirano iskustvo za svakog korisnika koji posjeti vašu web stranicu, a uz nekoliko CSS svojstava i nekoliko JavaScript funkcija, možete učiniti upravo to.

U ovom članku s vodičem naučit ćete kako svoju HTML i CSS web stranicu učiniti responzivnom i interaktivnom.

Učinite svoju web stranicu interaktivnom

Kada gradite web stranicu, počinjete od vrha prema dolje. Stoga je interaktivnost vaše web stranice proces koji bi također trebao započeti na vrhu. Uzeti ovu web stranicu portfelja izgradili smo kao primjer. Ima čist dizajn, ali nije potpuno interaktivan.

Svaka stavka izbornika mijenja boju kada zadržite pokazivač miša iznad nje, ali kako ćete znati na kojem se dijelu web stranice nalazite? Pa, postoje dva načina da to učinite — aktivirajte stavke izbornika pomoću onscroll i na klik događaji.

Aktiviranje stavke izbornika svaki put kada se pomičete gore ili dolje po web stranici zahtijevat će korištenje JavaScript funkcije koju možete nazvati "activeMenu". Ova funkcija trebat će pristup stavkama izbornika na navigacijskoj traci, kao i svakom dijelu web stranice. Srećom, to možete postići korištenjem querySelectorAll DOM selektor.

U direktoriju vašeg projekta morat ćete stvoriti novu JavaScript datoteku i povezati je sa svojom HTML datotekom pomoću sljedećeg retka koda:

U skripta oznaka, src vrijednost je naziv JavaScript datoteke, što je u gornjem primjeru main.js.

Datoteka main.js

// korištenjem javascripta za aktivaciju stavke izbornika onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("odjeljak");
funkcija activeMenu(){
neka len=sek.dužina;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("active"));
li[len].classList.add("aktivan");
}
aktivniIzbornik();
window.addEventListener("scroll", activeMenu);

The querySelectorAll selektor u kodu iznad hvata sve stavke izbornika pomoću poveznice razreda. Također hvata sve odjeljke web stranice pomoću odjeljak označiti. The aktivirati Izbornik funkcija zatim uzima duljinu svakog odjeljka i uklanja ili dodaje "aktivnu" varijablu ovisno o korisnikovom položaju pomicanja.

Da bi gornji kod funkcionirao, morat ćete ažurirati stilsku tablicu web-mjesta portfelja kako biste uključili sljedeći kod u odjeljku navigacijske trake:

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

Aktiviranje stavki izbornika na klik

 //koristeći jquery za aktiviranje stavke izbornika onclick
$(dokument).on('klik', 'li', funkcija(){
$(this).addClass('active').siblings().removeClass('active')
})

Dodavanje gornjeg koda vašoj JavaScript datoteci aktivirat će svaki odjeljak kada korisnik klikne odgovarajuću stavku izbornika. Međutim, koristi jQuery (JavaScript biblioteku) koja izvršava ovaj zadatak uz minimalnu količinu koda.

Problem na koji možete naići kada aktivirate svaku stavku izbornika na klik je taj što će navigacijska traka pokriti gornji dio svakog odjeljka. Da biste to spriječili, možete jednostavno umetnuti sljedeći kod u uslužni odjeljak stilske tablice:

odjeljak{
scroll-margin-top: 4,5rem;
}

Gornji kod će osigurati da kada do svakog odjeljka dođete klikom, navigacijska traka ostane 4,5 rem iznad svakog odjeljka (ili 72px). Još jedna zgodna značajka koju možete dodati na svoju web stranicu je glatko pomicanje, što možete postići sa sljedećim CSS kodom:

html {
pomicanje-ponašanje: glatko;
}

Učinite svoju početnu stranicu interaktivnom

Na većini web-mjesta korisnik će vidjeti svoj prvi gumb na navigacijskoj traci ili na početnoj stranici. Osim što izgleda kao poziv na akciju, gumb bi također trebao biti interaktivan. Sjajan način da se to postigne je pomoću CSS-a :lebdjeti selektor, koji elementu dodjeljuje novo stanje svaki put kada korisnik miš prijeđe preko njega.

Na web stranici portfelja jedina poveznica na početnoj stranici ima btn klase (što joj daje izgled gumba). Dakle, da bi ovaj gumb bio interaktivni, možete jednostavno dodijeliti :lebdjeti selektor na btn razreda.

Korištenje selektora :hover

 .btn: lebdjeti{
pozadina: #fff;
boja: plava;
obrub: plava puna ;
radijus granice: 5px;
}

Dodavanje gornjeg koda u uslužni dio web-mjesta portfelja učinit će prijelaz gumba iz jednog stanja u drugo kada zadržite pokazivač iznad njega.

Još jedna cool značajka za početnu stranicu je animacija tipkanja, koja koristi upisali.js (skripta animacije za kucanje jQuery).

Korištenje typed.js

// jquery skripta za animaciju teksta
var typed = new Typed(".typing", {
nizovi: ["Programer softvera"],
vrstaBrzina: 100,
backSpeed: 60,
petlja: istina
});

Nakon što dodate gornji kod u svoju JavaScript datoteku, morat ćete napraviti sljedeću izmjenu u HTML-u:

A ja sam a 

U gornjem kodu zamjenjujete tekst "Software Developer" u izvornom kodu s klasom "typing", stvarajući animaciju tipkanja.

Učinite druge dijelove vašeg web-mjesta interaktivnim

Izrada uslužne klase gumba i korištenje lebdjeti selektor će osigurati da svaki dio vaše web stranice koji ima gumb bude interaktivan. CSS svojstva prijelaza i transformacije također imaju neke sjajne značajke animacije koje možete dodati na svoju web stranicu.

Ako na svom web-mjestu imate galeriju ili bilo koji odjeljak sa slikama, možete koristiti dva gore spomenuta svojstva kako biste stvorili efekt lebdenja na svojim slikama. Dodavanje sljedećeg CSS koda slikama u odjeljku projekta na web stranici portfelja stvorit će učinak transformacije na slikama u odjeljku:

.img-container img{
maks. širina: 450px;
prijelaz: sve 0,3s ease-out;
kursor: pokazivač;
}
.img-container img: lebdjeti{
transformirati: mjerilo (1.2);
}

Učinite svoju web stranicu responzivnom

Prilikom izrade responzivne web stranice postoje četiri različite vrste uređaja koje morate uzeti u obzir — stolna računala, prijenosna računala, tablete i pametne telefone. Osim toga, svaka od ovih vrsta uređaja također ima niz različitih veličina zaslona, ​​ali posjedovanje ove četiri kategorije je dobro mjesto za početak.

Povezano: Kako koristiti medijske upite u HTML-u i CSS-u za izradu responzivnih web stranica

U svom trenutnom stanju, web stranica portfelja dobro se prikazuje na stolnim i prijenosnim računalima. Dakle, njegovo prilagođavanje značit će stvaranje prilagođenog izgleda za tablete i pametne telefone.

Najbolji način za postizanje responzivnog dizajna s CSS-om i HTML-om su medijski upiti. Možete postaviti medijski upit unutar CSS datoteke ili HTML-a veza označiti. Potonji pristup olakšava skalabilnost, a to je i metoda koju ću demonstrirati.

Morat ćete stvoriti dvije dodatne CSS datoteke. Prva CSS datoteka stvorit će strukturu izgleda za mala prijenosna računala i tablete u pejzažnom načinu. Imat će maksimalnu širinu od 1100px, kao što vidite u sljedećoj oznaci veze:

Umetanje gornjeg retka koda unutar glava oznaka vaše HTML datoteke (ili u ovom slučaju datoteke web stranice portfelja) osigurat će da svaki uređaj sa širinom zaslona od 1100px a ispod će koristiti styling u široki zaslon.css datoteka.

Datoteka widescreen.css

/* Dom */
#navbar .spremnik h1 a span{
prikaz: nema;
}
#home .home-content .text-3 span{
boja: #000000;
}
/* Portfolio */
.projekti{
justify-content: centar;
}
.projekt{
flex: 0;
}
/* O */
.o-sadržaj{
flex-direction: stupac;
}
/* Kontakt */
.contact-content{
flex-direction: stupac;
}

Gornji kod će proizvesti responzivni izgled na uređajima s veličinama zaslona od 1100px i manje, kao što možete vidjeti u donjem rezultatu:

Druga CSS datoteka stvorit će strukturu izgleda za pametne telefone i tablete u portretnom načinu. Imat će maksimalnu širinu od 760px, kao što možete vidjeti u sljedećoj oznaci veze:

Datoteka mobile.css

/* Navbar */
#navbar .spremnik h1 a span{
prikaz: nema;
}
#navbar .spremnik .izbornik{
margin-lijevo: 0rem;
}
#ham-menu{
širina: 35px;
visina: 30px;
margina: 30px 0 20px 20px;
kursor: pokazivač;
}
#navbar .container .menu-wrap .menu{
prikaz: nema;
}
.bar{
visina: 5px;
širina: 100%;
boja pozadine: #ffffff;
zaslon: blok;
radijus granice: 5px;
prijelaz: 0,3s lakoća;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transformacija: translateY(4px);
}
/* Dom */
#Dom{
zaslon: flex;
pozadina: url("/images/home.jpg") centar bez ponavljanja;
visina: 100vh;
}
#home .container{
margina: 6rem 1rem 2rem 1rem;
padding: 2rem;
}
#home .home-content .text-1{
veličina fonta: 20px;
margina: 1,2rem;
}
#home .home-content .text-2{
veličina fonta: 45px;
font-weight: 500;
margina: 1rem;
}
#home .home-content .text-3{
veličina fonta: 22px;
margina: 1,2rem;
}
#home .home-content .text-3 span{
boja: #0000ff;
font-weight: 600;
}
#home .container{
margin-lijevo: 4,5rem;
}
/* O */
#about .container{
dopuna: 0;
}
/* Kontakt */
#contact .spremnik{
dopuna: 0;
}

Gornja datoteka će proizvesti sljedeći responzivni izgled pametnog telefona:

Drugi načini za izradu responzivnih interaktivnih web-mjesta

Znati kako svoju web stranicu učiniti responzivnom i interaktivnom pomoću CSS-a i HTML-a odlična je vještina. No, ovo nisu jedine metode da vaše web mjesto učinite responzivnim i interaktivnim.

Mnogi frontend okviri, pa čak i predlošci na uslugama kao što je Joomla, olakšavaju responzivne interaktivne dizajne.

15 elegantnih Joomla predložaka za responzivne web stranice

Želite izraditi web stranicu za svoju tvrtku ili blog? Isprobajte ove Joomla predloške.

Pročitajte dalje

O autoru