Kako narediti vaše spletno mesto odzivno in interaktivno s CSS in JavaScript

Imeti spletno stran, ki je hkrati odzivna in interaktivna, je nenapisana zahteva za vsakega lastnika spletnega mesta. Prednosti interaktivnega spletnega mesta, ki se popolnoma prilagaja kateri koli velikosti zaslona, ​​ni mogoče preceniti.

Ustvariti bi morali prilagojeno izkušnjo za vsakega uporabnika, ki obišče vaše spletno mesto, in z več lastnostmi CSS in nekaj funkcijami JavaScript lahko storite prav to.

V tem članku vadnice se boste naučili, kako narediti svoje spletno mesto HTML in CSS odzivno in interaktivno.

Naj vaše spletno mesto postane interaktivno

Ko gradite spletno stran, začnete od zgoraj navzdol. Zato je interaktivnost vaše spletne strani proces, ki se mora začeti tudi na vrhu. Vzemi to spletno mesto portfelja zgradili smo kot primer. Ima čist dizajn, vendar ni popolnoma interaktiven.

Vsak element menija spremeni barvo, ko miškin kazalec premaknete nanj, toda kako veste, na katerem delu spletnega mesta ste? No, obstajata dva načina za to - aktivirajte elemente menija z onscroll in onclick dogodkov.

Če aktivirate menijski element vsakič, ko se pomikate navzgor ali navzdol po spletnem mestu, bo potrebna uporaba funkcije JavaScript, ki jo lahko pokličete "activeMenu". Ta funkcija bo potrebovala dostop do elementov menija v navigacijski vrstici, pa tudi do vsakega razdelka spletnega mesta. Na srečo lahko to dosežete z uporabo querySelectorAll Izbirnik DOM.

V imeniku projekta boste morali ustvariti novo datoteko JavaScript in jo povezati z datoteko HTML z naslednjo vrstico kode:

V skripta oznaka, src vrednost je ime datoteke JavaScript, ki je v zgornjem primeru main.js.

Datoteka main.js

// z uporabo javascripta za aktiviranje menijskega elementa onscroll
const li = document.querySelectorAll(".povezave");
const sec = document.querySelectorAll("odsek");
funkcija activeMenu(){
naj len=sek.dolžina;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("active"));
li[len].classList.add("aktiven");
}
aktivniMeni();
window.addEventListener("scroll", activeMenu);

The querySelectorAll izbirnik v zgornji kodi zajame vse elemente menija z uporabo povezave razredu. Prav tako zajame vse dele spletnega mesta z uporabo oddelek oznaka. The aktivirajte meni funkcija nato vzame dolžino vsakega odseka in odstrani ali doda "aktivno" spremenljivko, odvisno od uporabnikovega položaja pomikanja.

Da bo zgornja koda delovala, boste morali posodobiti slogovno tabelo spletnega mesta portfelja, da bo v razdelek navigacijske vrstice vključila naslednjo kodo:

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

Aktiviranje elementov menija s klikom

 // z uporabo jqueryja za aktiviranje elementa menija onclick
$(document).on('klik', 'li', funkcija(){
$(this).addClass('active').siblings().removeClass('active')
})

Če v datoteko JavaScript dodate zgornjo kodo, bo vsak razdelek aktiviran, ko uporabnik klikne ustrezen element menija. Vendar pa uporablja jQuery (knjižnico JavaScript), ki to nalogo opravi z minimalno količino kode.

Težava, na katero lahko naletite, ko aktivirate vsak element menija ob kliku, je ta, da navigacijska vrstica pokriva zgornji del vsakega razdelka. Če želite to preprečiti, lahko preprosto vstavite naslednjo kodo v razdelek s pripomočki v slogovnem listu:

oddelek{
drsni rob-vrh: 4,5 rem;
}

Zgornja koda bo zagotovila, da bo navigacijska vrstica ostala 4,5 rem nad vsakim razdelkom (ali 72 slikovnih pik), ko se pomaknete do vsakega razdelka s klikom. Druga kul funkcija, ki jo lahko dodate na svoje spletno mesto, je gladko drsenje, kar lahko dosežete z naslednjo kodo CSS:

html {
vedenje pomikanja: gladko;
}

Naredite svojo domačo stran interaktivno

Na večini spletnih mest bo uporabnik videl svoj prvi gumb v navigacijski vrstici ali domači strani. Poleg tega, da mora biti gumb videti kot poziv k dejanju, mora biti tudi interaktiven. Odličen način za dosego tega je s CSS : lebdi izbirnik, ki elementu dodeli novo stanje vsakič, ko ga uporabnik zažene z miško.

Na spletni strani portfelja ima edina povezava na domači strani btn razred (kar mu daje videz gumba). Torej, da bo ta gumb interaktiven, lahko preprosto dodelite : lebdi izbirnik na btn razredu.

Uporaba izbirnika :hover

 .btn: lebdi{
ozadje: #fff;
barva: modra;
obroba: modro polno ;
radij obrobe: 5px;
}

Če zgornjo kodo dodate v razdelek s pripomočki na spletnem mestu portfelja, bo gumb prešel iz enega stanja v drugo, ko premaknete miškin kazalec nanj.

Druga kul funkcija domače strani je animacija tipkanja, ki uporablja typed.js (skript animacije za tipkanje jQuery).

Uporaba typed.js

// jquery skript za animacijo besedila
var typed = new Typed(".typing", {
nizi: ["Razvijalec programske opreme"],
vrsta Hitrost: 100,
hitrost nazaj: 60,
zanka: res
});

Ko zgornjo kodo dodate v datoteko JavaScript, boste morali v HTML-ju narediti naslednjo spremembo:

In jaz sem a 

V zgornji kodi zamenjate besedilo »Razvijalec programske opreme« v izvirni kodi z razredom »tipkanje«, s čimer ustvarite animacijo tipkanja.

Interaktivnost drugih razdelkov vašega spletnega mesta

Ustvarjanje uporabnega razreda gumbov in uporaba lebdi izbirnik bo zagotovil, da je vsak del vaše spletne strani, ki ima gumb, interaktiven. Lastnosti prehoda in transformacije CSS imajo tudi nekaj odličnih funkcij animacije, ki jih lahko dodate na svoje spletno mesto.

Če imate na svojem spletnem mestu galerijo ali kateri koli razdelek s slikami, lahko uporabite dve zgoraj omenjeni lastnosti, da ustvarite učinek lebdenja na svojih slikah. Če slikam v razdelku projektov na spletnem mestu portfelja dodate naslednjo kodo CSS, boste ustvarili učinek preoblikovanja na slikah v razdelku:

.img-container img{
največja širina: 450 slikovnih pik;
prehod: vse 0,3s ease-out;
kazalec: kazalec;
}
.img-container img: lebdi{
preobrazba: lestvica (1,2);
}

Naredite odzivnost vaše spletne strani

Pri ustvarjanju odzivnega spletnega mesta morate upoštevati štiri različne vrste naprav – namizne, prenosne, tablične in pametne telefone. Poleg tega ima vsaka od teh vrst naprav tudi vrsto različnih velikosti zaslona, ​​vendar je s temi štirimi kategorijami dober začetek.

Povezano: Kako uporabljati medijske poizvedbe v HTML in CSS za ustvarjanje odzivnih spletnih mest

V trenutnem stanju se spletno mesto portfelja dobro prikazuje na namiznih in prenosnih računalnikih. Zato bo njegova odzivnost pomenila ustvarjanje prilagojene postavitve za tablične računalnike in pametne telefone.

Najboljši način za doseganje odzivnega dizajna s CSS in HTML so medijske poizvedbe. Medijsko poizvedbo lahko postavite v datoteko CSS ali HTML povezava oznaka. Slednji pristop olajša razširljivost in je tudi metoda, ki jo bom pokazal.

Ustvariti boste morali dve dodatni datoteki CSS. Prva datoteka CSS bo ustvarila strukturo postavitve za majhne prenosnike in tablične računalnike v ležečem načinu. Imel bo največjo širino 1100 slikovnih pik, kot vidite v naslednji oznaki povezave:

Zgornjo vrstico kode vstavite v glavo oznaka vaše datoteke HTML (ali v tem primeru datoteke spletnega mesta portfelja) bo zagotovila, da bo vsaka naprava s širino zaslona 1100 slikovnih pik in pod bo uporabil styling v široki zaslon.css mapa.

Datoteka widescreen.css

/* Domov */
#navbar .posoda h1 a span{
zaslon: brez;
}
#home .home-content .text-3 span{
barva: #000000;
}
/* Portfelj */
.projekti{
justify-content: center;
}
.projekt{
flex: 0;
}
/* O */
.about-content{
flex-direction: stolpec;
}
/* Kontakt */
.contact-content{
flex-direction: stolpec;
}

Zgornja koda bo ustvarila odzivno postavitev na napravah z velikostjo zaslona 1100 slikovnih pik in manj, kot lahko vidite v spodnjem izhodu:

Druga datoteka CSS bo ustvarila strukturo postavitve za pametne telefone in tablične računalnike v pokončnem načinu. Imel bo največjo širino 760 slikovnih pik, kot lahko vidite v naslednji oznaki povezave:

Datoteka mobile.css

/* Navbar */
#navbar .posoda h1 a span{
zaslon: brez;
}
#navbar .container .menu{
margin-left: 0rem;
}
#ham-menu{
širina: 35px;
višina: 30px;
rob: 30px 0 20px 20px;
kazalec: kazalec;
}
#navbar .container .menu-wrap .menu{
zaslon: brez;
}
.bar{
višina: 5px;
širina: 100 %;
barva ozadja: #ffffff;
zaslon: blok;
radij obrobe: 5px;
prehod: 0,3s enostavnost;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Domov */
#doma{
zaslon: flex;
ozadje: url("/images/home.jpg") središče brez ponovitve;
višina: 100vh;
}
#home .container{
marža: 6rem 1rem 2rem 1rem;
oblazinjenje: 2 rem;
}
#home .home-content .text-1{
velikost pisave: 20px;
marža: 1,2rem;
}
#home .home-content .text-2{
velikost pisave: 45px;
teža pisave: 500;
marža: 1rem;
}
#home .home-content .text-3{
velikost pisave: 22px;
marža: 1,2rem;
}
#home .home-content .text-3 span{
barva: #0000ff;
teža pisave: 600;
}
#home .container{
rob-levo: 4,5rem;
}
/* O */
#about .container{
oblazinjenje: 0;
}
/* Kontakt */
#contact .container{
oblazinjenje: 0;
}

Zgornja datoteka bo ustvarila naslednjo odzivno postavitev pametnega telefona:

Drugi načini za ustvarjanje odzivnih interaktivnih spletnih mest

Znati, kako narediti svoje spletno mesto odzivno in interaktivno z uporabo CSS in HTML, je odlična veščina. Vendar to niso edini načini, kako narediti vaše spletno mesto odzivno in interaktivno.

Številni sprednji okvirji in celo predloge v storitvah, kot je Joomla, omogočajo odzivno interaktivno oblikovanje.

15 elegantnih predlog Joomla za odzivna spletna mesta

Želite ustvariti spletno stran za svoje podjetje ali blog? Preizkusite te predloge Joomla.

Preberite Naprej

O avtorju