Jak zajistit, aby byl váš web responzivní a interaktivní pomocí CSS a JavaScriptu

Mít web, který je zároveň responzivní a interaktivní, je nepsaným požadavkem každého majitele webu. Výhody interaktivní webové stránky, která se dokonale přizpůsobí jakékoli velikosti obrazovky, nelze přeceňovat.

Měli byste vytvořit personalizované prostředí pro každého uživatele, který navštíví váš web, as několika vlastnostmi CSS a několika funkcemi JavaScriptu to můžete udělat.

V tomto výukovém článku se dozvíte, jak zajistit, aby váš web HTML a CSS byl citlivý a interaktivní.

Interaktivní web

Když vytváříte web, začínáte odshora dolů. Vytvoření interaktivního webu je proto proces, který by měl také začínat nahoře. Vzít webové stránky tohoto portfolia jsme postavili jako příklad. Má čistý design, ale není úplně interaktivní.

Každá položka nabídky změní barvu, když na ni umístíte ukazatel myši, ale jak poznáte, ve které části webu se nacházíte? Existují dva způsoby, jak to udělat — aktivovat položky nabídky pomocí onscroll a při kliknutí Události.

Aktivace položky nabídky pokaždé, když přejdete na webovou stránku nahoru nebo dolů, bude vyžadovat použití funkce JavaScript, kterou můžete nazvat „activeMenu“. Tato funkce bude vyžadovat přístup k položkám nabídky v navigační liště a také ke každé sekci webu. Naštěstí toho můžete dosáhnout pomocí

querySelectorAll DOM selektor.

V adresáři projektu budete muset vytvořit nový soubor JavaScript a propojit ho se souborem HTML pomocí následujícího řádku kódu:

V skript značka, src hodnota je název souboru JavaScript, což ve výše uvedeném příkladu je main.js.

Soubor main.js

// pomocí javascriptu aktivujte položku nabídky onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("sekce");
function activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec[délka].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktivní"));
li[len].classList.add("aktivní");
}
activeMenu();
window.addEventListener("scroll", activeMenu);

The querySelectorAll selektor v kódu výše uchopí všechny položky nabídky pomocí Odkazy třída. Také uchopí všechny sekce webu pomocí sekce štítek. The aktivovat Menu funkce pak vezme délku každé sekce a odebere nebo přidá „aktivní“ proměnnou v závislosti na pozici posouvání uživatele.

Aby výše uvedený kód fungoval, budete muset aktualizovat šablonu stylů webu portfolia tak, aby v sekci navbar obsahovala následující kód:

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

Aktivace položek nabídky onclick

 //pomocí jquery aktivovat položku nabídky onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Přidáním výše uvedeného kódu do souboru JavaScript se každá sekce aktivuje, když uživatel klikne na příslušnou položku nabídky. Používá však jQuery (knihovnu JavaScriptu), která tento úkol splní s minimálním množstvím kódu.

Problém, se kterým se můžete setkat, když aktivujete každou položku nabídky po kliknutí, je to, že navigační panel bude pokrývat horní část každé sekce. Abyste tomu zabránili, můžete jednoduše vložit následující kód do sekce nástrojů šablony stylů:

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

Výše uvedený kód zajistí, že když přejdete do každé sekce kliknutím, navigační lišta zůstane 4,5rem nad každou sekcí (nebo 72px). Další skvělou funkcí, kterou můžete přidat na svůj web, je plynulé rolování, což můžete provést pomocí následujícího kódu CSS:

html {
rolovací chování: hladké;
}

Interaktivní domovská stránka

Na většině webů uvidí uživatel své první tlačítko na navigační liště nebo na domovské stránce. Kromě toho, že tlačítko vypadá jako výzva k akci, mělo by být také interaktivní. Skvělý způsob, jak toho dosáhnout, je pomocí CSS :vznášet se selektor, který prvku přiřadí nový stav pokaždé, když na něj uživatel přejede myší.

Na webu portfolia má jediný odkaz na domovské stránce odkaz btn třídy (což mu dává vzhled tlačítka). Takže, aby bylo toto tlačítko interaktivní, můžete jednoduše přiřadit :vznášet se volič na btn třída.

Pomocí voliče :hover

 .btn: najíždějte{
pozadí: #fff;
barva: modrá;
ohraničení: modrá plná ;
border-radius: 5px;
}

Přidáním výše uvedeného kódu do sekce nástrojů na webu portfolia se tlačítko přepne z jednoho stavu do druhého, když na něj umístíte ukazatel myši.

Další skvělou funkcí pro domovskou stránku je animace psaní, kterou využívá zadaný.js (animační skript pro psaní jQuery).

Pomocí typed.js

// skript animace textu pro psaní jquery
var typed = new Typed(".typing", {
řetězce: ["Software Developer"],
typ Rychlost: 100,
zadní rychlost: 60,
smyčka: pravda
});

Poté, co přidáte výše uvedený kód do souboru JavaScript, budete muset v kódu HTML provést následující změny:

A já jsem 

Ve výše uvedeném kódu nahradíte text „Software Developer“ v původním kódu třídou „typing“, čímž vytvoříte animaci psaní.

Interaktivní ostatní části vašeho webu

Vytvoření obslužné třídy tlačítka a použití vznášet se Selektor zajistí, že každá část vaší webové stránky, která má tlačítko, bude interaktivní. Vlastnosti přechodu a transformace CSS mají také některé skvělé animační funkce, které můžete přidat na svůj web.

Máte-li na svém webu galerii nebo jakoukoli obrázkovou sekci, můžete použít dvě výše uvedené vlastnosti k vytvoření efektu visení na obrázcích. Přidáním následujícího kódu CSS k obrázkům v sekci projektu na webu portfolia vytvoříte transformační efekt na obrázky v sekci:

.img-container img{
max-width: 450px;
přechod: všech 0,3s uvolnění;
kurzor: ukazatel;
}
.img-container img: hover{
transformace: měřítko (1,2);
}

Aby byl váš web responzivní

Při vytváření responzivního webu je třeba vzít v úvahu čtyři různé typy zařízení – stolní počítače, notebooky, tablety a chytré telefony. Kromě toho má každý z těchto typů zařízení také řadu různých velikostí obrazovky, ale mít tyto čtyři kategorie je dobrým místem pro začátek.

Příbuzný: Jak používat dotazy na média v HTML a CSS k vytváření responzivních webů

V současném stavu se web portfolia dobře zobrazuje na stolních počítačích a noteboocích. Responzivní tedy bude znamenat vytvoření přizpůsobeného rozvržení pro tablety a smartphony.

Nejlepší způsob, jak dosáhnout responzivního designu pomocí CSS a HTML, je prostřednictvím dotazů na média. Dotaz na média můžete umístit do souboru CSS nebo HTML odkaz štítek. Druhý přístup usnadňuje škálovatelnost a je to také metoda, kterou ukážu.

Budete muset vytvořit dva další soubory CSS. První soubor CSS vytvoří strukturu rozložení pro malé notebooky a tablety v režimu na šířku. Bude mít maximální šířku 1100 pixelů, jak vidíte v následující značce odkazu:

Vložením výše uvedeného řádku kódu do hlava tag vašeho HTML souboru (nebo v tomto případě souboru webové stránky portfolia) zajistí, že každé zařízení s šířkou obrazovky 1100 pixelů a pod použije styl v širokoúhlý.css soubor.

Soubor widescreen.css

/* Domov */
#navbar .container h1 a span{
displej: žádný;
}
#home .home-content .text-3 span{
barva: #000000;
}
/* Portfolio */
.projekty{
justify-content: center;
}
.projekt{
flex: 0;
}
/* O */
.about-content{
směr ohybu: sloupec;
}
/* Kontakt */
.contact-content{
směr ohybu: sloupec;
}

Výše uvedený kód vytvoří responzivní rozložení na zařízeních s velikostí obrazovky 1100 pixelů a méně, jak můžete vidět ve výstupu níže:

Druhý soubor CSS vytvoří strukturu rozložení pro chytré telefony a tablety v režimu na výšku. Bude mít maximální šířku 760 pixelů, jak můžete vidět v následujícím tagu odkazu:

Soubor mobile.css

/* Navigační lišta */
#navbar .container h1 a span{
displej: žádný;
}
#navbar .container .menu{
okraj-levý: 0rem;
}
#ham-menu{
šířka: 35px;
výška: 30px;
okraj: 30px 0 20px 20px;
kurzor: ukazatel;
}
#navbar .container .menu-wrap .menu{
displej: žádný;
}
.bar{
výška: 5px;
šířka: 100 %;
barva pozadí: #ffffff;
displej: blok;
border-radius: 5px;
přechod: 0,3s snadnost;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Domov */
#Domov{
displej: flex;
pozadí: url("/images/home.jpg") centrum bez opakování;
výška: 100vh;
}
#home .container{
okraj: 6rem 1rem 2rem 1rem;
polstrování: 2rem;
}
#home .home-content .text-1{
velikost písma: 20px;
okraj: 1,2rem;
}
#home .home-content .text-2{
velikost písma: 45px;
váha písma: 500;
okraj: 1rem;
}
#home .home-content .text-3{
velikost písma: 22px;
okraj: 1,2rem;
}
#home .home-content .text-3 span{
barva: #0000ff;
váha písma: 600;
}
#home .container{
okraj-levý: 4,5rem;
}
/* O */
#about .container{
výplň: 0;
}
/* Kontakt */
#contact .container{
výplň: 0;
}

Výše uvedený soubor vytvoří následující responzivní rozložení smartphonu:

Další způsoby vytváření responzivních interaktivních webových stránek

Vědět, jak zajistit, aby vaše webové stránky byly responzivní a interaktivní pomocí CSS a HTML, je skvělá dovednost. Ale to nejsou jediné způsoby, jak zajistit, aby vaše webové stránky byly responzivní a interaktivní.

Mnoho frontendových frameworků a dokonce i šablon ve službách jako Joomla usnadňuje responzivní interaktivní návrhy.

15 stylových Joomla šablon pro responzivní weby

Chcete vytvořit webové stránky pro vaši firmu nebo blog? Vyzkoušejte tyto šablony Joomla.

Přečtěte si další

O autorovi