Kuinka tehdä sivustostasi reagoiva ja interaktiivinen CSS: n ja JavaScriptin avulla

Responsiivinen ja interaktiivinen verkkosivusto on kirjoittamaton vaatimus jokaiselle verkkosivuston omistajalle. Interaktiivisen verkkosivuston etuja, joka mukautuu täydellisesti mihin tahansa näyttökokoon, ei voi yliarvioida.

Sinun tulisi luoda henkilökohtainen käyttökokemus jokaiselle verkkosivustollasi vierailevalle käyttäjälle, ja useilla CSS-ominaisuuksilla ja muutamalla JavaScript-toiminnolla voit tehdä juuri sen.

Tässä opetusartikkelissa opit tekemään HTML- ja CSS-verkkosivustostasi responsiivisen ja interaktiivisen.

Tee sivustostasi interaktiivinen

Kun rakennat verkkosivustoa, aloitat ylhäältä alas. Siksi verkkosivustosi interaktiivinen tekeminen on prosessi, jonka tulisi myös alkaa ylhäältä. Ota tällä portfoliosivustolla rakensimme esimerkkinä. Siinä on puhdas muotoilu, mutta se ei ole täysin interaktiivinen.

Jokainen valikon kohta vaihtaa väriä, kun viet hiiren sen päälle, mutta mistä tiedät, millä verkkosivuston osuudella olet? No, on kaksi tapaa tehdä se: aktivoi valikkokohdat käyttämällä rullaa ja klikkaamalla Tapahtumat.

Valikkokohdan aktivointi aina, kun vierität verkkosivustoa ylös- tai alaspäin, edellyttää JavaScript-toiminnon käyttöä, jota voit kutsua "activeMenuksi". Tämä toiminto tarvitsee pääsyn navigointipalkin valikkokohtiin sekä verkkosivuston jokaiseen osioon. Onneksi voit saavuttaa tämän käyttämällä querySelectorAll DOM-valitsin.

Sinun on luotava projektihakemistoosi uusi JavaScript-tiedosto ja linkitettävä se HTML-tiedostoosi käyttämällä seuraavaa koodiriviä:

Jonkin sisällä käsikirjoitus tag, src arvo on JavaScript-tiedoston nimi, joka yllä olevassa esimerkissä on main.js.

Main.js-tiedosto

// javascriptin avulla aktivoidaksesi valikon vaihtoehdon vieritystilassa
const li = document.querySelectorAll(.links");
const sec = document.querySelectorAll("osio");
function activeMenu(){
anna len=sek.pituus;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktiivinen"));
li[len].classList.add("aktiivinen");
}
aktiivinenMenu();
window.addEventListener("scroll", activeMenu);

The querySelectorAll yllä olevan koodin valitsin nappaa kaikki valikon kohdat käyttämällä linkkejä luokkaa. Se myös nappaa kaikki verkkosivuston osiot käyttämällä -osio tag. The aktivoi valikko toiminto ottaa sitten kunkin osan pituuden ja poistaa tai lisää "aktiivisen" muuttujan käyttäjän vieritysasennosta riippuen.

Jotta yllä oleva koodi toimisi, sinun on päivitettävä portfolion verkkosivuston tyylisivu siten, että se sisältää seuraavan koodin navigointipalkkiosioon:

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

Valikkokohteiden aktivointi napsautuksella

 //Jqueryn avulla aktivoidaksesi valikkokohdan onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').sisarukset().removeClass('active')
})

Yllä olevan koodin lisääminen JavaScript-tiedostoosi aktivoi jokaisen osion, kun käyttäjä napsauttaa asianmukaista valikon kohtaa. Se käyttää kuitenkin jQueryä (JavaScript-kirjasto), joka suorittaa tämän tehtävän ja käyttää vain vähän koodia.

Ongelma, jonka saatat kohdata aktivoidessasi kunkin valikkokohdan napsautuksella, on se, että navigointipalkki peittää kunkin osion yläosan. Voit estää tämän lisäämällä seuraavan koodin tyylisivun apuohjelmaosioon:

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

Yllä oleva koodi varmistaa, että kun navigoit kuhunkin osioon napsauttamalla, navigointipalkki pysyy 4,5 rem kunkin osion yläpuolella (tai 72 pikseliä). Toinen hieno ominaisuus, jonka voit lisätä verkkosivustollesi, on tasainen vieritys, jonka voit suorittaa seuraavalla CSS-koodilla:

html {
vierityskäyttäytyminen: tasainen;
}

Tee kotisivustasi interaktiivinen

Useimmilla verkkosivustoilla käyttäjä näkee ensimmäisen painikkeensa navigointipalkissa tai kotisivulla. Sen lisäksi, että se näyttää toimintakehotukselta, painikkeen tulee olla myös interaktiivinen. Loistava tapa saavuttaa tämä on CSS: n avulla :hover valitsin, joka määrittää elementille uuden tilan aina, kun käyttäjän hiiri kulkee sen päällä.

Portfoliosivustolla kotisivun ainoassa linkissä on btn luokka (mikä antaa sille painikkeen ulkonäön). Jotta tästä painikkeesta tulee interaktiivinen, voit yksinkertaisesti määrittää sen :hover valitsin kohtaan btn luokkaa.

:hover-valitsimella

 .btn: hover{
tausta: #fff;
väri: sininen;
reuna: sininen kiinteä ;
reunan säde: 5px;
}

Yllä olevan koodin lisääminen portfoliosivuston apuohjelmaosioon saa painikkeen siirtymään tilasta toiseen, kun viet hiiren sen päälle.

Toinen hieno etusivun ominaisuus on kirjoitusanimaatio, joka käyttää typed.js (jQuery-kirjoitusanimaatioskripti).

Käytä typed.js: ää

// jquery kirjoittaa tekstin animaatioskriptiä
var typed = new Kirjoitettu(.kirjoitus", {
merkkijonot: ["Software Developer"],
tyyppinopeus: 100,
Takaisinnopeus: 60,
silmukka: totta
});

Kun olet lisännyt yllä olevan koodin JavaScript-tiedostoosi, sinun on tehtävä seuraava muutos HTML-koodiin:

Ja minä olen a 

Yllä olevassa koodissa korvaat alkuperäisen koodin "Software Developer" -tekstin "kirjoitus"-luokalla, jolloin luodaan kirjoitusanimaatio.

Verkkosivustosi muiden osien tekeminen interaktiiviseksi

Painikkeiden apuohjelman luominen ja leijuu valitsin varmistaa, että jokainen verkkosivusi osa, jossa on painike, on interaktiivinen. CSS-siirtymä- ja muunnosominaisuuksilla on myös hienoja animaatioominaisuuksia, joita voit lisätä verkkosivustollesi.

Jos verkkosivustollasi on galleria tai mikä tahansa kuvaosio, voit käyttää kahta yllä mainittua ominaisuutta luodaksesi hover-tehosteen kuviisi. Seuraavan CSS-koodin lisääminen portfoliosivuston projektiosion kuviin luo muunnosvaikutelman osion kuviin:

.img-container img{
suurin leveys: 450 pikseliä;
siirtyminen: kaikki 0.3s helpotus;
kohdistin: osoitin;
}
.img-container img: hover{
muunnos: asteikko (1.2);
}

Verkkosivuston tekeminen responsiivisiksi

Kun luot responsiivista verkkosivustoa, sinun on otettava huomioon neljä eri laitetyyppiä: pöytätietokoneet, kannettavat tietokoneet, tabletit ja älypuhelimet. Lisäksi jokaisessa näistä laitetyypeistä on myös useita eri näyttökokoja, mutta näiden neljän luokan omistaminen on hyvä paikka aloittaa.

Aiheeseen liittyvä: HTML- ja CSS-mediakyselyjen käyttäminen reagoivien verkkosivustojen luomiseen

Nykyisessä tilassaan portfoliosivusto näkyy hyvin pöytätietokoneissa ja kannettavissa tietokoneissa. Joten sen tekeminen reagoivaksi tarkoittaa mukautetun asettelun luomista tableteille ja älypuhelimille.

Paras tapa saavuttaa responsiivinen suunnittelu CSS: n ja HTML: n avulla on mediakyselyt. Voit sijoittaa mediakyselyn CSS-tiedostoon tai HTML-koodiin linkki tag. Jälkimmäinen lähestymistapa helpottaa skaalautuvuutta, ja se on myös menetelmä, jonka esitän.

Sinun on luotava kaksi muuta CSS-tiedostoa. Ensimmäinen CSS-tiedosto luo asettelurakenteen pienille kannettaville tietokoneille ja tableteille vaakatilassa. Sen enimmäisleveys on 1100 pikseliä, kuten näet seuraavasta linkkitunnisteesta:

Yllä olevan koodirivin lisääminen koodin sisään pää HTML-tiedostosi tagi (tai tässä tapauksessa portfoliosivuston tiedosto) varmistaa, että jokainen laite, jonka näytön leveys on 1100 pikseliä ja alla käyttävät tyyliä laajakuva.css tiedosto.

Widescreen.css-tiedosto

/* Koti */
#navbar .container h1 a span{
näyttö: ei mitään;
}
#home .home-content .text-3 span{
väri: #000000;
}
/* Portfolio */
.projektit{
perustella-sisältö: keskus;
}
.project{
flex: 0;
}
/* Tietoja */
.about-content{
flex-suunta: pylväs;
}
/* Ottaa yhteyttä */
.contact-content{
flex-suunta: pylväs;
}

Yllä oleva koodi tuottaa responsiivisen asettelun laitteille, joiden näyttökoko on 1100 pikseliä tai pienempi, kuten alla olevasta tulosteesta näkyy:

Toinen CSS-tiedosto luo asettelurakenteen älypuhelimille ja tableteille pystytilassa. Sen enimmäisleveys on 760 pikseliä, kuten näet seuraavasta linkkitunnisteesta:

Mobile.css-tiedosto

/* Navbar */
#navbar .container h1 a span{
näyttö: ei mitään;
}
#navbar .container .menu{
marginaali vasen: 0rem;
}
#kinkku-menu{
leveys: 35px;
korkeus: 30px;
marginaali: 30px 0 20px 20px;
kohdistin: osoitin;
}
#navbar .container .menu-wrap .menu{
näyttö: ei mitään;
}
.baari{
korkeus: 5px;
leveys: 100 %;
taustaväri: #ffffff;
näyttö: lohko;
reunan säde: 5px;
siirtyminen: 0,3 s helppous;
}
#bar1{
muunnos: translateY(-4px);
}
#bar3{
muunnos: translateY(4px);
}
/* Koti */
#Koti{
näyttö: flex;
tausta: url("/images/home.jpg") ei toistoa keskus;
korkeus: 100vh;
}
#home .container{
marginaali: 6rem 1rem 2rem 1rem;
pehmuste: 2rem;
}
#home .home-content .text-1{
fonttikoko: 20px;
marginaali: 1,2 rem;
}
#home .home-content .text-2{
fonttikoko: 45px;
fontin paino: 500;
marginaali: 1rem;
}
#home .home-content .text-3{
fonttikoko: 22px;
marginaali: 1,2 rem;
}
#home .home-content .text-3 span{
väri: #0000ff;
fontin paino: 600;
}
#home .container{
marginaali vasen: 4,5rem;
}
/* Tietoja */
#about .container{
pehmuste: 0;
}
/* Ottaa yhteyttä */
#contact .container{
pehmuste: 0;
}

Yllä oleva tiedosto tuottaa seuraavan reagoivan älypuhelimen asettelun:

Muita tapoja luoda reagoivia interaktiivisia verkkosivustoja

Tietää kuinka tehdä verkkosivustostasi responsiivinen ja interaktiivinen CSS: n ja HTML: n avulla, on hieno taito. Mutta nämä eivät ole ainoita tapoja tehdä verkkosivustostasi responsiivinen ja interaktiivinen.

Monet käyttöliittymäkehykset ja jopa mallit Joomlan kaltaisissa palveluissa helpottavat reagoivaa interaktiivista suunnittelua.

15 tyylikästä Joomla-mallia reagoiville verkkosivustoille

Haluatko luoda verkkosivuston yrityksellesi tai blogillesi? Kokeile näitä Joomla-malleja.

Lue Seuraava

Kirjailijasta