Cum să vă faceți site-ul web receptiv și interactiv cu CSS și JavaScript

A avea un site web care este atât receptiv, cât și interactiv este o cerință nescrisă pentru fiecare proprietar de site. Beneficiile de a avea un site web interactiv care se adaptează perfect la orice dimensiune a ecranului nu pot fi supraevaluate.

Ar trebui să creați o experiență personalizată pentru fiecare utilizator care vă vizitează site-ul web și, cu mai multe proprietăți CSS și câteva funcții JavaScript, puteți face exact asta.

În acest articol tutorial, veți învăța cum să faceți site-ul dvs. HTML și CSS receptiv și interactiv.

Faceți site-ul dvs. interactiv

Când construiți un site web, începeți de sus în jos. Prin urmare, să vă faceți site-ul web interactiv este un proces care ar trebui să înceapă și de sus. Lua acest site web de portofoliu am construit ca exemplu. Are un design curat, dar nu este complet interactiv.

Fiecare element de meniu își schimbă culoarea când treci cu mouse-ul peste el, dar de unde știi în ce secțiune a site-ului te afli? Ei bine, există două moduri de a face asta — activați elementele de meniu cu onscroll și onclick evenimente.

Activarea unui element de meniu de fiecare dată când derulați în sus sau în jos un site web va necesita utilizarea unei funcții JavaScript pe care o puteți numi „activeMenu”. Această funcție va avea nevoie de acces la elementele de meniu din bara de navigare, precum și la fiecare secțiune a site-ului web. Din fericire, puteți realiza acest lucru cu ajutorul querySelectorAll Selector DOM.

În directorul de proiect, va trebui să creați un nou fișier JavaScript și să îl conectați la fișierul dvs. HTML folosind următoarea linie de cod:

Într-o scenariu eticheta, src value este numele fișierului JavaScript, care în exemplul de mai sus este main.js.

Fișierul main.js

// folosind javascript pentru a activa elementul de meniu onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("sectiune");
funcția activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("activ"));
li[len].classList.add("activ");
}
ActiveMenu();
window.addEventListener("scroll", activeMenu);

The querySelectorAll selectorul din codul de mai sus preia toate elementele de meniu folosind link-uri clasă. De asemenea, preia toate secțiunile site-ului web folosind secțiune etichetă. The activați meniul apoi ia lungimea fiecărei secțiuni și elimină sau adaugă o variabilă „activă” în funcție de poziția de defilare a utilizatorului.

Pentru ca codul de mai sus să funcționeze, va trebui să actualizați foaia de stil pentru site-ul de portofoliu pentru a include următorul cod în secțiunea barei de navigare:

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

Activarea elementelor de meniu la clic

 //folosind jquery pentru a activa elementul de meniu la clic
$(document).on('click', 'li', function(){
$(this).addClass('activ').fraţi().removeClass('activ')
})

Adăugarea codului de mai sus la fișierul JavaScript va activa fiecare secțiune atunci când un utilizator face clic pe elementul de meniu corespunzător. Cu toate acestea, folosește jQuery (o bibliotecă JavaScript) care îndeplinește această sarcină cu o cantitate minimă de cod.

O problemă pe care o puteți întâlni atunci când activați fiecare element de meniu la clic este că bara de navigare va acoperi partea de sus a fiecărei secțiuni. Pentru a preveni acest lucru, puteți introduce pur și simplu următorul cod în secțiunea de utilitate a foii de stil:

secțiune{
scroll-margin-top: 4.5rem;
}

Codul de mai sus se va asigura că atunci când navigați la fiecare secțiune făcând clic, bara de navigare va rămâne la 4,5 rem deasupra fiecărei secțiuni (sau 72 px). O altă caracteristică grozavă de adăugat site-ului dvs. este defilare lină, pe care îl puteți realiza cu următorul cod CSS:

html {
parcurgere-comportament: neted;
}

Faceți pagina dvs. de pornire interactivă

Pe majoritatea site-urilor web, un utilizator va vedea primul buton pe bara de navigare sau pe pagina de pornire. Pe lângă faptul că arată ca un îndemn, un buton ar trebui să fie și interactiv. O modalitate excelentă de a realiza acest lucru este cu CSS :planare selector, care atribuie o stare nouă unui element de fiecare dată când mouse-ul unui utilizator trece peste el.

Pe site-ul portofoliu, singurul link de pe pagina de start are btn clasa (care ii da aspectul unui buton). Deci, pentru a face acest buton interactiv, puteți pur și simplu să atribuiți :planare selector la btn clasă.

Folosind selectorul :hover

 .btn: hover{
fundal: #fff;
Culoarea albastra;
chenar: albastru solid ;
chenar-rază: 5px;
}

Adăugarea codului de mai sus la secțiunea de utilități a site-ului web portofoliu va face ca butonul să treacă de la o stare la alta atunci când treceți cu mouse-ul peste el.

O altă caracteristică grozavă pentru pagina de pornire este o animație de tastare, care folosește tastat.js (un script de animație de tastare jQuery).

Folosind typed.js

// jquery tastarea textului script de animație
var tastat = new Typed(".typing", {
șiruri de caractere: [„Dezvoltator de software”],
tipViteză: 100,
Viteza înapoi: 60,
buclă: adevărat
});

După ce adăugați codul de mai sus în fișierul JavaScript, va trebui să faceți următoarea modificare la HTML:

Și eu sunt un 

În codul de mai sus înlocuiți textul „Dezvoltator de software” din codul original cu clasa „tastare”, creând animația de tastare.

Faceți interactive alte secțiuni ale site-ului dvs. web

Crearea unei clase de utilitate buton și utilizarea planare selectorul se va asigura că fiecare secțiune a paginii dvs. web care are un buton este interactivă. Proprietățile de tranziție și transformare CSS au, de asemenea, câteva caracteristici excelente de animație pe care le puteți adăuga pe site-ul dvs. web.

Dacă aveți o galerie sau orice secțiune de imagini pe site-ul dvs., puteți utiliza cele două proprietăți menționate mai sus pentru a crea un efect de hover asupra imaginilor dvs. Adăugarea următorului cod CSS la imagini în secțiunea de proiecte a site-ului portofoliu va crea un efect de transformare asupra imaginilor din secțiune:

.img-container img{
lățime maximă: 450px;
tranziție: toate 0.3s ease-out;
cursor: pointer;
}
.img-container img: hover{
transforma: scară (1,2);
}

Faceți site-ul dvs. receptiv

Când creați un site web receptiv, există patru tipuri diferite de dispozitive pe care trebuie să le luați în considerare: desktop-uri, laptopuri, tablete și smartphone-uri. În plus, fiecare dintre aceste tipuri de dispozitive are, de asemenea, o gamă de dimensiuni diferite de ecran, dar a avea aceste patru categorii este un loc bun pentru a începe.

Legate de: Cum să utilizați interogări media în HTML și CSS pentru a crea site-uri web receptive

În starea sa actuală, site-ul de portofoliu se afișează bine pe desktop-uri și laptop-uri. Așadar, a-l face receptiv va însemna crearea unui aspect personalizat pentru tablete și smartphone-uri.

Cea mai bună modalitate de a obține un design receptiv cu CSS și HTML este prin interogări media. Puteți plasa o interogare media într-un fișier CSS sau HTML legătură etichetă. Ultima abordare facilitează scalabilitatea și este, de asemenea, metoda pe care o voi demonstra.

Va trebui să creați două fișiere CSS suplimentare. Primul fișier CSS va crea structura de aspect pentru laptopuri și tablete mici în modul peisaj. Va avea o lățime maximă de 1100px, după cum vedeți în următoarea etichetă de link:

Inserarea liniei de cod de mai sus în cadrul cap eticheta fișierului dvs. HTML (sau în acest caz fișierul site-ului portofoliu) se va asigura că fiecare dispozitiv cu o lățime a ecranului de 1100px iar sub va folosi stilul în ecran lat.css fişier.

Fișierul widescreen.css

/* Acasă */
#navbar .container h1 a span{
afișaj: niciunul;
}
#home .home-content .text-3 span{
culoare: #000000;
}
/* Portofoliu */
.proiecte{
justificare-conținut: centru;
}
.proiect{
flex: 0;
}
/* Despre */
.despre-conținut{
flex-direcție: coloană;
}
/* A lua legatura */
.contact-content{
flex-direcție: coloană;
}

Codul de mai sus va produce un aspect receptiv pe dispozitivele cu dimensiuni de ecran de 1100 px și mai mici, așa cum puteți vedea în rezultatul de mai jos:

Al doilea fișier CSS va crea structura de aspect pentru smartphone-uri și tablete în modul portret. Va avea o lățime maximă de 760 px, după cum puteți vedea în următoarea etichetă de link:

Fișierul mobile.css

/* Bara de navigare */
#navbar .container h1 a span{
afișaj: niciunul;
}
#navbar .container .meniu{
margine-stânga: 0rem;
}
#meniu-șuncă{
latime: 35px;
înălțime: 30px;
marjă: 30px 0 20px 20px;
cursor: pointer;
}
#navbar .container .menu-wrap .meniu{
afișaj: niciunul;
}
.bar{
înălțime: 5px;
latime: 100%;
culoare de fundal: #ffffff;
afisare: bloc;
chenar-rază: 5px;
tranziție: ușurință de 0,3s;
}
#bar1{
transforma: translateY(-4px);
}
#bar3{
transforma: translateY(4px);
}
/* Acasă */
#Acasă{
display: flex;
fundal: url("/images/home.jpg") centru fără repetare;
inaltime: 100vh;
}
#acasă .container{
marginea: 6rem 1rem 2rem 1rem;
captuseala: 2rem;
}
#acasă .acasă-conținut .text-1{
dimensiunea fontului: 20px;
marja: 1.2rem;
}
#acasă .acasă-conținut .text-2{
dimensiunea fontului: 45px;
greutate font: 500;
marja: 1rem;
}
#acasă .acasă-conținut .text-3{
dimensiunea fontului: 22px;
marja: 1.2rem;
}
#home .home-content .text-3 span{
culoare: #0000ff;
greutate font: 600;
}
#acasă .container{
margine-stânga: 4.5rem;
}
/* Despre */
#despre .container{
umplutură: 0;
}
/* A lua legatura */
#contact .container{
umplutură: 0;
}

Fișierul de mai sus va produce următorul aspect de smartphone receptiv:

Alte moduri de a crea site-uri web interactive receptive

A ști cum să faci site-ul tău receptiv și interactiv folosind CSS și HTML este o abilitate grozavă de avut. Dar acestea nu sunt singurele metode de a face site-ul dvs. receptiv și interactiv.

Multe cadre frontale și chiar șabloane pentru servicii precum Joomla facilitează design-urile interactive receptive.

15 șabloane Joomla elegante pentru site-uri web receptive

Doriți să creați un site web pentru afacerea dvs. sau blogul dvs.? Încercați aceste șabloane Joomla.

Citiți în continuare

Despre autor