Kaip padaryti, kad jūsų svetainė būtų jautri ir interaktyvi naudojant CSS ir JavaScript

Interaktyvi ir interaktyvi svetainė yra nerašytas reikalavimas kiekvienam svetainės savininkui. Negalima pervertinti interaktyvios svetainės, kuri puikiai prisitaiko prie bet kokio ekrano dydžio, pranašumų.

Turėtumėte sukurti individualizuotą patirtį kiekvienam vartotojui, kuris apsilanko jūsų svetainėje, o naudodami kelias CSS ypatybes ir keletą „JavaScript“ funkcijų galite tai padaryti.

Šiame mokymo straipsnyje sužinosite, kaip padaryti HTML ir CSS svetainę interaktyvią ir interaktyvią.

Padarykite savo svetainę interaktyvia

Kai kuriate svetainę, pradedate nuo viršaus į apačią. Todėl interneto svetainės pavertimas interaktyvia yra procesas, kuris taip pat turėtų prasidėti viršuje. Imk šioje portfelio svetainėje pastatėme kaip pavyzdį. Jis turi švarų dizainą, bet nėra visiškai interaktyvus.

Kiekvienas meniu elementas keičia spalvą, kai užvedate pelės žymeklį virš jo, bet kaip žinoti, kurioje svetainės skiltyje esate? Na, yra du būdai tai padaryti – suaktyvinkite meniu elementus naudodami slinkti ir paspaudus įvykius.

Norint suaktyvinti meniu elementą kiekvieną kartą, kai slenkate aukštyn arba žemyn svetainėje, reikės naudoti „JavaScript“ funkciją, kurią galite pavadinti „activeMenu“. Šiai funkcijai reikės prieigos prie meniu elementų naršymo juostoje, taip pat prie kiekvienos svetainės skilties. Laimei, tai galite padaryti naudodami querySelectorAll DOM parinkiklis.

Projekto kataloge turėsite sukurti naują „JavaScript“ failą ir susieti jį su HTML failu naudodami šią kodo eilutę:

A scenarijus žyma, src reikšmė yra JavaScript failo pavadinimas, kuris aukščiau pateiktame pavyzdyje yra main.js.

Main.js failas

// naudojant „Javascript“, kad suaktyvintumėte meniu elementą „onscroll“.
const li = document.querySelectorAll(.links");
const sec = document.querySelectorAll("skyrius");
function activeMenu(){
tegul len=sek.ilgis;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktyvus"));
li[len].classList.add("aktyvus");
}
aktyvusMeniu();
window.addEventListener("slinkti", aktyvusMeniu);

The querySelectorAll aukščiau esančiame kode esantis parinkiklis paima visus meniu elementus naudodamas nuorodos klasė. Jis taip pat paima visas svetainės dalis, naudodamas skyrius žyma. The aktyvinti meniu tada funkcija paima kiekvienos sekcijos ilgį ir pašalina arba prideda „aktyvų“ kintamąjį, priklausomai nuo vartotojo slinkties padėties.

Kad anksčiau pateiktas kodas veiktų, turėsite atnaujinti portfelio svetainės stiliaus lapą ir naršymo juostos skiltyje įtraukti šį kodą:

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

Meniu elementų suaktyvinimas spustelėjus

 //naudojant jquery, kad suaktyvintumėte meniu elementą onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('aktyvus')
})

Pridėjus anksčiau pateiktą kodą prie „JavaScript“ failo, vartotojui spustelėjus atitinkamą meniu elementą, bus suaktyvinta kiekviena sekcija. Tačiau ji naudoja jQuery (JavaScript biblioteką), kuri atlieka šią užduotį su minimaliu kodo kiekiu.

Problema, su kuria galite susidurti, kai spustelėję suaktyvinate kiekvieną meniu elementą, yra ta, kad naršymo juosta uždengs viršutinę kiekvienos skilties dalį. Norėdami to išvengti, galite tiesiog įterpti šį kodą į stiliaus lapo naudingumo skyrių:

skyrius{
slinkties paraštė-viršus: 4,5rem;
}

Aukščiau pateiktas kodas užtikrins, kad kai naršysite į kiekvieną skyrių spustelėdami, naršymo juosta išliks 4,5 rem virš kiekvienos skilties (arba 72 pikselių). Dar viena puiki funkcija, kurią galite pridėti prie savo svetainės sklandus slinkimas, kurį galite atlikti naudodami šį CSS kodą:

html {
slinkties elgsena: sklandžiai;
}

Padarykite savo pagrindinį puslapį interaktyvų

Daugumoje svetainių vartotojas naršymo juostoje arba pagrindiniame puslapyje matys savo pirmąjį mygtuką. Mygtukas turėtų atrodyti ne tik kaip raginimas veikti, bet ir būti interaktyvus. Puikus būdas tai padaryti yra naudojant CSS :užveskite pelės žymeklį parinkiklis, kuris elementui priskiria naują būseną kiekvieną kartą, kai naudotojas paleidžia jį pele.

Portfelio svetainėje vienintelė nuoroda pagrindiniame puslapyje yra btn klasė (tai suteikia mygtuko išvaizdą). Taigi, kad šis mygtukas būtų interaktyvus, galite tiesiog priskirti :užveskite pelės žymeklį parinkiklis į btn klasė.

Naudodami :hover parinkiklį

 .btn: hover{
fonas: #fff;
spalva: mėlyna;
kraštinė: mėlyna vientisa ;
kraštinės spindulys: 5 pikseliai;
}

Pridėjus anksčiau pateiktą kodą prie portfelio svetainės paslaugų skyriaus, mygtukas pereis iš vienos būsenos į kitą, kai užveskite pelės žymeklį virš jo.

Kita puiki pagrindinio puslapio funkcija yra spausdinimo animacija, kuriai naudojama typed.js („jQuery“ spausdinimo animacijos scenarijus).

Naudojant typed.js

// jquery įvedant teksto animacijos scenarijų
var typed = new Typed(.typing", {
eilutės: ["Programinės įrangos kūrėjas"],
tipasGreitis: 100,
Atgal greitis: 60,
kilpa: tiesa
});

Pridėję anksčiau pateiktą kodą prie „JavaScript“ failo, turėsite atlikti šiuos HTML pakeitimus:

Ir aš esu a 

Aukščiau esančiame kode pakeisite tekstą „Programinės įrangos kūrėjas“ pradiniame kode „spausdinimo“ klase, sukurdami spausdinimo animaciją.

Kitų svetainės skilčių pavertimas interaktyviomis

Mygtukų naudingumo klasės sukūrimas ir naudojimas užveskite pelės žymeklį parinkiklis užtikrins, kad kiekviena tinklalapio skiltis su mygtuku būtų interaktyvi. CSS perėjimo ir transformavimo ypatybės taip pat turi keletą puikių animacijos funkcijų, kurias galite įtraukti į savo svetainę.

Jei savo svetainėje turite galeriją ar bet kurią vaizdų skiltį, galite naudoti dvi pirmiau minėtas ypatybes, kad sukurtumėte vaizdų užvedimo efektą. Pridėjus šį CSS kodą prie vaizdų portfelio svetainės projekto skiltyje, bus sukurtas skilties vaizdų transformacijos efektas:

.img-container img{
maksimalus plotis: 450 pikselių;
perėjimas: visas 0,3 s palengvinimas;
žymeklis: rodyklė;
}
.img-container img: hover{
transformuoti: mastelis (1.2);
}

Kad jūsų svetainė būtų jautri

Kurdami interaktyvią svetainę, turite atsižvelgti į keturis skirtingus įrenginių tipus – stalinius, nešiojamuosius kompiuterius, planšetinius kompiuterius ir išmaniuosius telefonus. Be to, kiekvienas iš šių įrenginių tipų taip pat turi įvairių dydžių ekranus, tačiau turėdami šias keturias kategorijas yra gera vieta pradėti.

Susijęs: Kaip naudoti medijos užklausas HTML ir CSS kuriant reaguojančias svetaines

Dabartinė portfelio svetainė puikiai rodoma staliniuose ir nešiojamuosiuose kompiuteriuose. Taigi, kad jis būtų jautrus, reikės sukurti tinkintą planšetinių kompiuterių ir išmaniųjų telefonų išdėstymą.

Geriausias būdas pasiekti interaktyvų dizainą naudojant CSS ir HTML yra medijos užklausos. Medijos užklausą galite įdėti į CSS failą arba HTML nuoroda žyma. Pastarasis metodas palengvina mastelio keitimą, be to, tai yra metodas, kurį parodysiu.

Turėsite sukurti du papildomus CSS failus. Pirmasis CSS failas sukurs mažų nešiojamųjų kompiuterių ir planšetinių kompiuterių išdėstymo struktūrą kraštovaizdžio režimu. Didžiausias jo plotis bus 1100 taškų, kaip matote šioje nuorodos žymoje:

Aukščiau esančios kodo eilutės įterpimas viduje galva HTML failo (arba šiuo atveju portfelio svetainės failo) žyma užtikrins, kad kiekvienas įrenginys, kurio ekrano plotis yra 1100 taškų ir pagal naudos stilių plačiaekranis.css failą.

Widescreen.css failas

/* Namai */
#navbar .container h1 a span{
ekranas: nėra;
}
#home .home-content .text-3 span{
spalva: #000000;
}
/* Portfelis */
.projects{
pateisinti-turinys: centras;
}
.project{
lankstumas: 0;
}
/* Apie */
.about-content{
lankstumo kryptis: stulpelis;
}
/* Kontaktas */
.contact-content{
lankstumo kryptis: stulpelis;
}

Aukščiau pateiktas kodas sukurs interaktyvų išdėstymą įrenginiuose, kurių ekrano dydis yra 1100 pikselių ir mažesnis, kaip matote toliau pateiktoje išvestyje:

Antrasis CSS failas sukurs išmaniųjų telefonų ir planšetinių kompiuterių išdėstymo struktūrą portreto režimu. Didžiausias jo plotis bus 760 taškų, kaip matote šioje nuorodos žymoje:

Failas mobile.css

/* Naršymo juosta */
#navbar .container h1 a span{
ekranas: nėra;
}
#navbar .container .menu{
paraštė-kairė: 0rem;
}
#kumpio meniu{
plotis: 35px;
aukštis: 30px;
paraštė: 30 piks. 0 20 piks. 20 piks.;
žymeklis: rodyklė;
}
#navbar .container .menu-wrap .menu{
ekranas: nėra;
}
.bar{
aukštis: 5px;
plotis: 100%;
fono spalva: #ffffff;
ekranas: blokas;
kraštinės spindulys: 5 pikseliai;
perėjimas: 0,3 s lengvumas;
}
#bar1{
transformuoti: translateY(-4px);
}
#bar3{
transformuoti: translateY(4px);
}
/* Namai */
#namai{
ekranas: lankstus;
fonas: url("/images/home.jpg") nesikartojantis centras;
aukštis: 100vh;
}
#home .container{
paraštė: 6rem 1rem 2rem 1rem;
paminkštinimas: 2rem;
}
#home .home-content .text-1{
šrifto dydis: 20 pikselių;
paraštė: 1.2rem;
}
#home .home-content .text-2{
šrifto dydis: 45 pikseliai;
šrifto svoris: 500;
paraštė: 1 rem;
}
#home .home-content .text-3{
šrifto dydis: 22 pikseliai;
paraštė: 1.2rem;
}
#home .home-content .text-3 span{
spalva: #0000ff;
šrifto svoris: 600;
}
#home .container{
paraštė-kairė: 4,5rem;
}
/* Apie */
#about .container{
paminkštinimas: 0;
}
/* Kontaktas */
#contact .container{
paminkštinimas: 0;
}

Aukščiau pateiktame faile bus sukurtas toks jautrus išmaniojo telefono išdėstymas:

Kiti interaktyvių svetainių kūrimo būdai

Žinojimas, kaip padaryti svetainę reaguojančią ir interaktyvią naudojant CSS ir HTML, yra puikus įgūdis. Tačiau tai nėra vieninteliai būdai, kaip padaryti jūsų svetainę interaktyvią ir interaktyvią.

Daugelis sąsajų sistemų ir net šablonų tokiose paslaugose kaip „Joomla“ palengvina interaktyvų dizainą.

15 stilingų „Joomla“ šablonų, skirtų reaguojančioms svetainėms

Norite sukurti svetainę savo verslui ar tinklaraščiui? Išbandykite šiuos Joomla šablonus.

Skaitykite toliau

Apie autorių