Ako zabezpečiť, aby bol váš web responzívny a interaktívny pomocou CSS a JavaScriptu

Mať webovú stránku, ktorá je responzívna aj interaktívna, je nepísanou požiadavkou každého vlastníka webovej stránky. Výhody interaktívnej webovej stránky, ktorá sa dokonale prispôsobí akejkoľvek veľkosti obrazovky, nemožno preceňovať.

Mali by ste vytvoriť prispôsobené prostredie pre každého používateľa, ktorý navštívi vaše webové stránky, a pomocou niekoľkých vlastností CSS a niekoľkých funkcií JavaScriptu to môžete urobiť.

V tomto výukovom článku sa dozviete, ako zabezpečiť, aby bol váš web HTML a CSS responzívny a interaktívny.

Urobte svoj web interaktívnym

Keď vytvárate webovú stránku, začínate zhora nadol. Vytvorenie interaktívnej webovej stránky je preto proces, ktorý by mal tiež začínať na vrchu. Vezmite túto webovú stránku portfólia postavili sme ako príklad. Má čistý dizajn, ale nie je úplne interaktívny.

Každá položka ponuky zmení farbu, keď na ňu umiestnite kurzor myši, ale ako viete, v ktorej sekcii webovej lokality sa nachádzate? Existujú dva spôsoby, ako to urobiť — aktivovať položky ponuky pomocou onscroll a po kliknutí diania.

Aktivácia položky ponuky pri každom posúvaní webovej lokality nahor alebo nadol si bude vyžadovať použitie funkcie JavaScript, ktorú môžete nazvať „activeMenu“. Táto funkcia bude vyžadovať prístup k položkám ponuky na navigačnom paneli, ako aj ku každej sekcii webovej lokality. Našťastie to môžete dosiahnuť pomocou querySelectorAll Selektor DOM.

V adresári projektu budete musieť vytvoriť nový súbor JavaScript a prepojiť ho so súborom HTML pomocou nasledujúceho riadku kódu:

V skript značka, src hodnota je názov súboru JavaScript, čo je v príklade vyššie main.js.

Súbor main.js

// pomocou javascriptu aktivujte položku ponuky onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("sekcia");
function activeMenu(){
nech len=sek.dĺžka;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktívne"));
li[len].classList.add("aktívny");
}
activeMenu();
window.addEventListener("scroll", activeMenu);

The querySelectorAll Selektor vo vyššie uvedenom kóde zachytáva všetky položky ponuky pomocou tlačidla odkazy trieda. Tiež zachytáva všetky sekcie webovej stránky pomocou oddiele tag. The aktivovať Menu funkcia potom vezme dĺžku každej sekcie a odstráni alebo pridá „aktívnu“ premennú v závislosti od pozície rolovania používateľa.

Aby kód uvedený vyššie fungoval, budete musieť aktualizovať šablónu so štýlmi webovej lokality portfólia tak, aby obsahovala nasledujúci kód v sekcii navigačnej lišty:

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

Aktivácia položiek ponuky kliknutím

 //pomocou jquery aktivujete položku ponuky onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Pridaním vyššie uvedeného kódu do súboru JavaScript sa každá sekcia aktivuje, keď používateľ klikne na príslušnú položku ponuky. Používa však jQuery (knižnicu JavaScript), ktorá vykonáva túto úlohu s minimálnym množstvom kódu.

Problém, s ktorým sa môžete stretnúť pri aktivácii každej položky ponuky po kliknutí, je, že navigačná lišta bude pokrývať hornú časť každej sekcie. Aby ste tomu zabránili, môžete jednoducho vložiť nasledujúci kód do pomocnej časti šablóny štýlov:

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

Vyššie uvedený kód zabezpečí, že keď prejdete na každú sekciu kliknutím, navigačná lišta zostane 4,5 m nad každou sekciou (alebo 72 pixelov). Ďalšou skvelou funkciou, ktorú môžete pridať na svoj web, je plynulé rolovanie, ktorý môžete vykonať pomocou nasledujúceho kódu CSS:

html {
rolovacie správanie: hladké;
}

Urobte svoju domovskú stránku interaktívnou

Na väčšine webových stránok používateľ uvidí svoje prvé tlačidlo na navigačnom paneli alebo na domovskej stránke. Okrem toho, že tlačidlo vyzerá ako výzva na akciu, malo by byť aj interaktívne. Skvelý spôsob, ako to dosiahnuť, je pomocou CSS :vznášať sa selektor, ktorý prvku priradí nový stav vždy, keď naň používateľ prejde myšou.

Na webovej stránke portfólia má jediný odkaz na domovskej stránke odkaz btn triedy (čo mu dáva vzhľad tlačidla). Takže, aby bolo toto tlačidlo interaktívne, môžete jednoducho priradiť :vznášať sa volič na btn trieda.

Pomocou :hover Selector

 .btn: visieť{
pozadie: #fff;
farba: modrá;
ohraničenie: modrá plná ;
border-radius: 5px;
}

Pridaním vyššie uvedeného kódu do sekcie nástrojov na webovej stránke portfólia sa tlačidlo prepne z jedného stavu do druhého, keď naň umiestnite kurzor myši.

Ďalšou skvelou funkciou pre domovskú stránku je animácia písania, ktorú používa zadaný.js (animačný skript pre písanie jQuery).

Pomocou typed.js

// skript animácie textu na písanie jquery
var typed = new Typed(".typing", {
reťazce: ["Software Developer"],
typRýchlosť: 100,
rýchlosť chrbta: 60,
slučka: pravda
});

Po pridaní vyššie uvedeného kódu do súboru JavaScript budete musieť vykonať nasledujúcu úpravu kódu HTML:

A ja som a 

Vo vyššie uvedenom kóde nahradíte text „Software Developer“ v pôvodnom kóde triedou „typing“, čím vytvoríte animáciu písania.

Urobte ďalšie časti vašej webovej lokality interaktívnymi

Vytvorenie pomocnej triedy tlačidiel a použitie vznášať sa Selektor zabezpečí, že každá časť vašej webovej stránky, ktorá má tlačidlo, bude interaktívna. Vlastnosti prechodu a transformácie CSS majú tiež niekoľko skvelých funkcií animácie, ktoré môžete pridať na svoj web.

Ak máte na svojom webe galériu alebo akúkoľvek sekciu obrázkov, môžete použiť dve vlastnosti uvedené vyššie na vytvorenie efektu vznášania sa na svojich obrázkoch. Pridaním nasledujúceho kódu CSS k obrázkom v sekcii projektu na webovej lokalite portfólia vytvoríte transformačný efekt na obrázky v sekcii:

.img-container img{
max-width: 450px;
prechod: uvoľnenie všetkých 0,3 s;
kurzor: ukazovateľ;
}
.img-container img: visieť{
transformácia: mierka (1,2);
}

Aby bol váš web responzívny

Pri vytváraní responzívnej webovej stránky musíte zvážiť štyri rôzne typy zariadení – stolné počítače, notebooky, tablety a smartfóny. Okrem toho má každý z týchto typov zariadení aj celý rad rôznych veľkostí obrazovky, ale tieto štyri kategórie sú dobrým miestom, kde začať.

Súvisiace: Ako používať mediálne dotazy v HTML a CSS na vytváranie responzívnych webových stránok

V súčasnom stave sa webová stránka portfólia dobre zobrazuje na stolných počítačoch a prenosných počítačoch. Responzívne teda bude znamenať vytvorenie prispôsobeného rozloženia pre tablety a smartfóny.

Najlepší spôsob, ako dosiahnuť responzívny dizajn pomocou CSS a HTML, je prostredníctvom mediálnych dopytov. Mediálny dotaz môžete umiestniť do súboru CSS alebo HTML odkaz tag. Posledný prístup uľahčuje škálovateľnosť a je to tiež metóda, ktorú ukážem.

Budete musieť vytvoriť dva ďalšie súbory CSS. Prvý súbor CSS vytvorí štruktúru rozloženia pre malé notebooky a tablety v režime na šírku. Bude mať maximálnu šírku 1100 pixelov, ako vidíte v nasledujúcej značke odkazu:

Vloženie riadku kódu vyššie do hlavu tag vášho HTML súboru (alebo v tomto prípade súboru webovej stránky portfólia) zabezpečí, že každé zariadenie so šírkou obrazovky 1100 pixelov a pod použije štýl v širokouhlý.css súbor.

Súbor widescreen.css

/* Domov */
#navbar .container h1 a span{
displej: žiadny;
}
#home .home-content .text-3 span{
farba: #000000;
}
/* Portfólio */
.projekty{
justify-content: center;
}
.projekt{
ohyb: 0;
}
/* O */
.about-content{
smer ohybu: stĺpec;
}
/* Kontakt */
.contact-content{
smer ohybu: stĺpec;
}

Vyššie uvedený kód vytvorí citlivé rozloženie na zariadeniach s veľkosťou obrazovky 1100 pixelov a menej, ako môžete vidieť vo výstupe nižšie:

Druhý súbor CSS vytvorí štruktúru rozloženia pre smartfóny a tablety v režime na výšku. Bude mať maximálnu šírku 760 pixelov, ako môžete vidieť v nasledujúcej značke odkazu:

Súbor mobile.css

/* Navigačný panel */
#navbar .container h1 a span{
displej: žiadny;
}
#navbar .container .menu{
ľavý okraj: 0rem;
}
#ham-menu{
šírka: 35px;
výška: 30px;
okraj: 30px 0 20px 20px;
kurzor: ukazovateľ;
}
#navbar .container .menu-wrap .menu{
displej: žiadny;
}
.bar{
výška: 5px;
šírka: 100 %;
farba pozadia: #ffffff;
displej: blok;
border-radius: 5px;
prechod: 0,3 s ľahkosť;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Domov */
#Domov{
displej: flex;
pozadie: url("/images/home.jpg") centrum bez opakovania;
výška: 100vh;
}
#home .kontajner{
okraj: 6rem 1rem 2rem 1rem;
polstrovanie: 2rem;
}
#home .home-content .text-1{
veľkosť písma: 20px;
okraj: 1,2rem;
}
#home .home-content .text-2{
veľkosť písma: 45px;
váha písma: 500;
okraj: 1rem;
}
#home .home-content .text-3{
veľkosť písma: 22px;
okraj: 1,2rem;
}
#home .home-content .text-3 span{
farba: #0000ff;
váha písma: 600;
}
#home .kontajner{
ľavý okraj: 4,5rem;
}
/* O */
#about .container{
výplň: 0;
}
/* Kontakt */
#contact .container{
výplň: 0;
}

Vyššie uvedený súbor vytvorí nasledujúce responzívne rozloženie smartfónu:

Ďalšie spôsoby vytvárania responzívnych interaktívnych webových stránok

Vedieť, ako urobiť svoj web responzívny a interaktívny pomocou CSS a HTML, je skvelá zručnosť. Nie sú to však jediné spôsoby, ako zabezpečiť, aby bol váš web responzívny a interaktívny.

Mnohé frontendové rámce a dokonca aj šablóny v službách ako Joomla uľahčujú responzívne interaktívne návrhy.

15 štýlových Joomla šablón pre responzívne webové stránky

Chcete vytvoriť webovú stránku pre svoju firmu alebo blog? Vyskúšajte tieto Joomla šablóny.

Prečítajte si ďalej

O autorovi