Hogyan teheti webhelyét reszponzívvá és interaktívvá CSS és JavaScript segítségével

A reszponzív és interaktív weboldal megléte minden webhelytulajdonos számára íratlan követelmény. A bármilyen képernyőmérethez tökéletesen alkalmazkodó interaktív webhely előnyeit nem lehet túlbecsülni.

Személyre szabott élményt kell teremtenie minden felhasználó számára, aki felkeresi webhelyét, és számos CSS tulajdonsággal és néhány JavaScript funkcióval ezt megteheti.

Ebből az oktatócikkből megtudhatja, hogyan teheti HTML- és CSS-webhelyét reszponzívvá és interaktívvá.

Webhelyének interaktívvá tétele

Amikor webhelyet készít, felülről lefelé indul. Ezért a webhely interaktívvá tétele egy olyan folyamat, amelynek szintén a tetején kell kezdődnie. Vesz ezt a portfólió webhelyet példaként építettünk. Letisztult kialakítású, de nem teljesen interaktív.

Minden menüpont színe megváltozik, ha fölé viszi az egérmutatót, de honnan tudja, hogy a webhely melyik részén tartózkodik? Nos, ennek két módja van – a menüelemek aktiválása a következővel onscroll és kattintásra eseményeket.

Egy menüelem aktiválásához minden alkalommal, amikor felfelé vagy lefelé görget egy webhelyet, JavaScript-funkció használatára van szükség, amelyet "activeMenu"-nak nevezhet. Ehhez a funkcióhoz hozzá kell férni a navigációs sáv menüelemeihez, valamint a webhely minden szakaszához. Szerencsére ezt megteheti a használatával

querySelectorAll DOM választó.

A projektkönyvtárban létre kell hoznia egy új JavaScript-fájlt, és a következő kódsor segítségével csatolnia kell a HTML-fájlhoz:

Az a forgatókönyv címke, a src az érték a JavaScript fájl neve, amely a fenti példában az main.js.

A main.js fájl

// Javascript használatával aktiválja a menüelemet a onscrollon
const li = document.querySelectorAll(.links");
const sec = document.querySelectorAll("szakasz");
function activeMenu(){
legyen len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("aktív"));
li[len].classList.add("aktív");
}
activeMenu();
window.addEventListener("scroll", activeMenu);

A querySelectorAll A fenti kódban található választó megragadja az összes menüelemet a linkeket osztály. Ezenkívül megragadja a webhely összes szakaszát a szakasz címke. A aktiválja a menüt A funkció ezután felveszi az egyes szakaszok hosszát, és eltávolít vagy hozzáad egy „aktív” változót a felhasználó görgetési pozíciójától függően.

A fenti kód működéséhez frissítenie kell a portfólió webhely stíluslapját, hogy a navigációs sávban szerepeljen a következő kód:

#navbar .menu li.active a{
szín: #fff;
}

A menüelemek aktiválása kattintással

 //Jquery használatával aktiválja az onclick menüpontot
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('aktív')
})

Ha a fenti kódot hozzáadja a JavaScript-fájlhoz, akkor minden szakasz aktiválódik, amikor a felhasználó a megfelelő menüelemre kattint. Azonban a jQuery-t (a JavaScript-könyvtárat) használja, amely ezt a feladatot minimális mennyiségű kóddal hajtja végre.

Egy olyan probléma, amellyel az egyes menüelemek kattintásra történő aktiválásakor találkozhat, hogy a navigációs sáv lefedi az egyes szakaszok felső részét. Ennek elkerülése érdekében egyszerűen beillesztheti a következő kódot a stíluslap segédprogram részébe:

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

A fenti kód biztosítja, hogy amikor az egyes szakaszokhoz kattintással navigál, a navigációs sáv az egyes szakaszok felett 4,5 méter magasságban (vagy 72 képpontban) maradjon. Egy másik nagyszerű funkció, amelyet hozzáadhat webhelyéhez sima görgetés, amelyet a következő CSS-kóddal érhet el:

html {
scroll-behavior: sima;
}

Kezdőlap interaktívvá tétele

A legtöbb webhelyen a felhasználó az első gombját látja a navigációs sávon vagy a kezdőlapon. Amellett, hogy cselekvésre ösztönzőnek tűnik, a gombnak interaktívnak is kell lennie. Ennek nagyszerű módja a CSS :lebeg választó, amely minden alkalommal új állapotot rendel egy elemhez, amikor a felhasználó egérrel ráfut.

A portfólió weboldalán a kezdőlap egyetlen hivatkozása tartalmazza a btn osztály (ami gomb megjelenését kelti). Tehát, hogy ez a gomb interaktív legyen, egyszerűen hozzárendelheti a :lebeg választót a btn osztály.

A :hover Selector használatával

 .btn: hover{
háttér: #fff;
szín: kék;
szegély: kék szilárd ;
határsugár: 5 képpont;
}

Ha a fenti kódot hozzáadja a portfólió webhelyének segédprogram részéhez, a gomb átvált egyik állapotból a másikba, ha rámutat.

A kezdőlap másik nagyszerű funkciója a gépelési animáció, amely használ beírt.js (egy jQuery gépelési animációs szkript).

A typed.js használatával

// jquery szöveges animációs szkript
var typed = new Typed(".gépelés", {
karakterláncok: ["Szoftverfejlesztő"],
típussebesség: 100,
visszafordulási sebesség: 60,
hurok: igaz
});

Miután hozzáadta a fenti kódot a JavaScript-fájlhoz, a következő módosításokat kell végrehajtania a HTML-ben:

És én a 

A fenti kódban lecseréli az eredeti kód „Szoftverfejlesztő” szövegét a „typing” osztályra, létrehozva a gépelési animációt.

Webhelye egyéb szakaszainak interaktívvá tétele

Gombos segédprogram osztály létrehozása és a lebeg A választó biztosítja, hogy a weboldal minden gombbal rendelkező része interaktív legyen. A CSS-átmenet és -átalakítás tulajdonságai emellett nagyszerű animációs funkciókat is tartalmaznak, amelyeket hozzáadhat webhelyéhez.

Ha a webhelyén van galéria vagy bármilyen képrész, akkor a fent említett két tulajdonság segítségével hover hatást hozhat létre a képeken. A következő CSS-kód hozzáadása a portfólió webhely projekt részében lévő képekhez átalakítási hatást hoz létre a szakaszban lévő képeken:

.img-container img{
maximális szélesség: 450 képpont;
átmenet: minden 0,3 másodperces könnyítés;
kurzor: pointer;
}
.img-container img: hover{
transzformáció: skála (1.2);
}

Webhelyének reszponzívvá tétele

A reszponzív webhely létrehozásakor négy különböző eszköztípust kell figyelembe vennie – az asztali számítógépeket, a laptopokat, a táblagépeket és az okostelefonokat. Ezen túlmenően, ezen eszköztípusok mindegyike különböző képernyőméretekkel is rendelkezik, de ez a négy kategória jó kiindulópont.

Összefüggő: A médialekérdezések használata HTML-ben és CSS-ben reszponzív webhelyek létrehozásához

A portfólió webhely jelenlegi állapotában jól jelenik meg asztali számítógépeken és laptopokon. Tehát a reszponzívvá tétel azt jelenti, hogy személyre szabott elrendezést kell létrehozni táblagépekhez és okostelefonokhoz.

A CSS és HTML segítségével a reszponzív tervezés legjobb módja a médialekérdezések. Médialekérdezést elhelyezhet egy CSS-fájlban vagy a HTML-ben link címke. Ez utóbbi megközelítés megkönnyíti a méretezhetőséget, és ezt a módszert is bemutatom.

Létre kell hoznia két további CSS-fájlt. Az első CSS-fájl létrehozza a kisméretű laptopok és táblagépek elrendezését fekvő módban. Maximális szélessége lesz 1100 képpont, ahogy az a következő linkcímkében is látható:

A fenti kódsor beszúrása a fej A HTML-fájl (vagy ebben az esetben a portfólió-webhely-fájl) címkéje biztosítja, hogy minden olyan eszköz, amelynek képernyőszélessége 1100 képpont és alatt fogja használni a stílust a szélesvásznú.css fájlt.

A widescreen.css fájl

/* Itthon */
#navbar .container h1 a span{
kijelző: nincs;
}
#home .home-content .text-3 span{
szín: #000000;
}
/* Portfólió */
.projects{
indokol-tartalom: center;
}
.project{
flex: 0;
}
/* Ról ről */
.about-content{
hajlítási irány: oszlop;
}
/* Kapcsolatba lépni */
.contact-content{
hajlítási irány: oszlop;
}

A fenti kód reszponzív elrendezést hoz létre 1100 képpont vagy annál kisebb képernyőmérettel rendelkező eszközökön, amint az az alábbi kimeneten látható:

A második CSS-fájl létrehozza az okostelefonok és táblagépek elrendezését álló módban. Maximális szélessége lesz 760 képpont, amint azt a következő linkcímkében láthatod:

A mobile.css fájl

/* Navbar */
#navbar .container h1 a span{
kijelző: nincs;
}
#navbar .container .menu{
margó-bal: 0rem;
}
#sonka-menü{
szélesség: 35 képpont;
magasság: 30px;
margó: 30 képpont 0 20 képpont 20 képpont;
kurzor: pointer;
}
#navbar .container .menu-wrap .menu{
kijelző: nincs;
}
.rúd{
magasság: 5px;
szélesség: 100%;
háttérszín: #ffffff;
kijelző: blokk;
határsugár: 5 képpont;
átmenet: 0,3s könnyű;
}
#bar1{
transzformáció: translateY(-4px);
}
#bar3{
transzformáció: translateY(4px);
}
/* Itthon */
#itthon{
kijelző: flex;
háttér: url("/images/home.jpg") no-repeat center;
magasság: 100vh;
}
#home .container{
margó: 6rem 1rem 2rem 1rem;
párnázás: 2rem;
}
#home .home-content .text-1{
betűméret: 20 képpont;
margó: 1,2 rem;
}
#home .home-content .text-2{
betűméret: 45 képpont;
betűsúly: 500;
margó: 1 rem;
}
#home .home-content .text-3{
betűméret: 22 képpont;
margó: 1,2 rem;
}
#home .home-content .text-3 span{
szín: #0000ff;
betűsúly: 600;
}
#home .container{
margó-bal: 4,5 rem;
}
/* Ról ről */
#about .container{
párnázás: 0;
}
/* Kapcsolatba lépni */
#contact .container{
párnázás: 0;
}

A fenti fájl a következő reszponzív okostelefon-elrendezést hozza létre:

Reszponzív interaktív webhelyek létrehozásának egyéb módjai

Ha tudja, hogyan teheti webhelyét reszponzívvá és interaktívvá CSS és HTML használatával, az nagyszerű készség. De nem ezek az egyetlen módszerek arra, hogy webhelyét reszponzívvá és interaktívvá tegye.

Számos előtér-keretrendszer, sőt a Joomla-hoz hasonló szolgáltatások sablonja is elősegíti a reszponzív interaktív tervezést.

15 stílusos Joomla sablon reszponzív webhelyekhez

Weboldalt szeretne létrehozni vállalkozásának vagy blogjának? Próbálja ki ezeket a Joomla sablonokat.

Olvassa el a következőt

A szerzőről