Hoe u uw website responsief en interactief kunt maken met CSS en JavaScript

Het hebben van een website die zowel responsief als interactief is, is een ongeschreven vereiste voor elke website-eigenaar. De voordelen van een interactieve website die zich perfect aanpast aan elk schermformaat, kunnen niet genoeg worden benadrukt.

U moet een gepersonaliseerde ervaring creëren voor elke gebruiker die uw website bezoekt, en met verschillende CSS-eigenschappen en een paar JavaScript-functies kunt u precies dat doen.

In dit zelfstudieartikel leert u hoe u uw HTML- en CSS-website responsief en interactief kunt maken.

Uw website interactief maken

Als je een website bouwt, begin je van boven naar beneden. Daarom is het interactief maken van je website een proces dat ook bovenaan moet beginnen. Nemen deze portfoliowebsite we hebben gebouwd als voorbeeld. Het heeft een strak ontwerp, maar het is niet volledig interactief.

Elk menu-item verandert van kleur als je erover beweegt, maar hoe weet je op welk gedeelte van de website je je bevindt? Welnu, er zijn twee manieren om dat te doen: activeer menu-items met verder scrollen en bij klikken evenementen.

Als u een menu-item activeert telkens wanneer u een website omhoog of omlaag scrolt, moet u een JavaScript-functie gebruiken die u "activeMenu" kunt noemen. Deze functie heeft toegang nodig tot de menu-items in de navigatiebalk, evenals tot elk gedeelte van de website. Gelukkig kunt u dit bereiken met behulp van de querySelectorAll DOM-kiezer.

In uw projectdirectory moet u een nieuw JavaScript-bestand maken en dit koppelen aan uw HTML-bestand met behulp van de volgende regel code:

In een script tag, de src waarde is de naam van het JavaScript-bestand, dat in het bovenstaande voorbeeld is main.js.

Het main.js-bestand

// javascript gebruiken om menu-item opscroll te activeren
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("sectie");
functie actiefMenu(){
laat len=sec.lengte;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("actief"));
li[len].classList.add("actief");
}
actiefMenu();
window.addEventListener("scroll", activeMenu);

De querySelectorAll selector in de bovenstaande code grijpt alle menu-items met behulp van de links klas. Het grijpt ook alle secties van de website met behulp van de sectie label. De activeerMenu functie neemt dan de lengte van elke sectie en verwijdert of voegt een "actieve" variabele toe, afhankelijk van de scrollpositie van een gebruiker.

Om de bovenstaande code te laten werken, moet u het stijlblad van de portfoliowebsite bijwerken om de volgende code in de navigatiebalk op te nemen:

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

Menu-items activeren bij klikken

 // jQuery gebruiken om menu-item onclick te activeren
$(document).on('klik', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Door de bovenstaande code aan uw JavaScript-bestand toe te voegen, wordt elke sectie geactiveerd wanneer een gebruiker op het juiste menu-item klikt. Het gebruikt echter jQuery (een JavaScript-bibliotheek) die deze taak uitvoert met een minimale hoeveelheid code.

Een probleem dat u kunt tegenkomen wanneer u elk menu-item activeert met een klik, is dat de navigatiebalk het bovenste gedeelte van elke sectie bedekt. Om dit te voorkomen, kunt u eenvoudig de volgende code invoegen in het hulpprogramma-gedeelte van het stijlblad:

sectie{
scroll-marge-top: 4.5rem;
}

De bovenstaande code zorgt ervoor dat wanneer u naar elke sectie navigeert door te klikken, de navigatiebalk 4,5 rem boven elke sectie (of 72px) blijft. Een andere leuke functie om toe te voegen aan uw website is: soepel scrollen, wat u kunt bereiken met de volgende CSS-code:

html {
scroll-gedrag: glad;
}

Uw startpagina interactief maken

Op de meeste websites ziet een gebruiker zijn eerste knop op de navigatiebalk of de startpagina. Behalve dat het eruitziet als een oproep tot actie, moet een knop ook interactief zijn. Een geweldige manier om dit te bereiken is met de CSS :zweven selector, die een nieuwe status aan een element toewijst telkens wanneer de muis van een gebruiker eroverheen gaat.

Op de portfoliowebsite heeft de enige link op de homepage de btn class (waardoor het eruitziet als een knop). Dus om deze knop interactief te maken, kun je eenvoudig de :zweven selector naar de btn klas.

De :hover-kiezer gebruiken

 .btn: zweef{
achtergrond: #fff;
kleur blauw;
rand: blauw effen ;
grens-radius: 5px;
}

Door de bovenstaande code toe te voegen aan het hulpprogramma-gedeelte van de portfoliowebsite, gaat de knop van de ene staat naar de andere wanneer u eroverheen beweegt.

Een andere leuke functie voor de startpagina is een typanimatie, die gebruikmaakt van getypt.js (een jQuery-type animatiescript).

Typed.js gebruiken

// jQuery typen tekstanimatiescript
var getypt = new Typed(".typing", {
strings: ["Softwareontwikkelaar"],
typeSnelheid: 100,
terugSnelheid: 60,
lus: waar
});

Nadat u de bovenstaande code aan uw JavaScript-bestand heeft toegevoegd, moet u de volgende wijziging in de HTML aanbrengen:

En ik ben een 

In de bovenstaande code vervang je de tekst "Softwareontwikkelaar" in de originele code door de klasse "typen", waardoor de typanimatie ontstaat.

Andere delen van uw website interactief maken

Een hulpprogramma-klasse voor knoppen maken en de. gebruiken zweven selector zorgt ervoor dat elk gedeelte van uw webpagina met een knop interactief is. De CSS-overgangs- en transformatie-eigenschappen hebben ook enkele geweldige animatiefuncties die u aan uw website kunt toevoegen.

Als u een galerij of een afbeeldingssectie op uw website heeft, kunt u de twee bovengenoemde eigenschappen gebruiken om een ​​zweefeffect op uw afbeeldingen te creëren. Het toevoegen van de volgende CSS-code aan de afbeeldingen in het projectgedeelte van de portfoliowebsite zal een transformatie-effect creëren op de afbeeldingen in het gedeelte:

.img-container img{
maximale breedte: 450px;
overgang: alle 0.3s gemak-out;
cursor: aanwijzer;
}
.img-container img: zweef{
transformeren: schaal (1.2);
}

Uw website responsive maken

Bij het maken van een responsieve website zijn er vier verschillende apparaattypen waarmee u rekening moet houden: desktops, laptops, tablets en smartphones. Bovendien heeft elk van deze apparaattypen ook een reeks verschillende schermformaten, maar het hebben van deze vier categorieën is een goed begin.

Verwant: Mediaquery's in HTML en CSS gebruiken om responsieve websites te maken

In de huidige staat wordt de portfoliowebsite goed weergegeven op desktops en laptops. Om het responsief te maken, moet u dus een aangepaste lay-out voor tablets en smartphones maken.

De beste manier om een ​​responsief ontwerp met CSS en HTML te bereiken, is door middel van mediaquery's. U kunt een mediaquery plaatsen in een CSS-bestand of de HTML koppeling label. De laatste benadering vergemakkelijkt de schaalbaarheid, en het is ook de methode die ik zal demonstreren.

U moet twee extra CSS-bestanden maken. Het eerste CSS-bestand maakt de lay-outstructuur voor kleine laptops en tablets in liggende modus. Het heeft een maximale breedte van 1100px, zoals je ziet in de volgende link-tag:

De regel code hierboven invoegen in de hoofd tag van uw HTML-bestand (of in dit geval het portfolio-websitebestand) zorgt ervoor dat elk apparaat met een schermbreedte van 1100px en onder zal de styling gebruiken in de breedbeeld.css het dossier.

Het breedbeeld.css-bestand

/* Huis */
#navbar .container h1 een span{
Geen weergeven;
}
#home .home-content .text-3 span{
kleur: #000000;
}
/* Portefeuille */
.projecten{
rechtvaardigen-inhoud: centrum;
}
.project{
flexibel: 0;
}
/* Over */
.over-inhoud{
flex-richting: kolom;
}
/* Contact */
.contact-inhoud{
flex-richting: kolom;
}

De bovenstaande code produceert een responsieve lay-out op apparaten met schermformaten van 1100px en minder, zoals je kunt zien in de onderstaande uitvoer:

Het tweede CSS-bestand maakt de lay-outstructuur voor smartphones en tablets in staande modus. Het heeft een maximale breedte van 760 pixels, zoals je kunt zien in de volgende link-tag:

Het mobile.css-bestand

/* Navigatiebalk */
#navbar .container h1 een span{
Geen weergeven;
}
#navbar .container .menu{
marge-links: 0rem;
}
#hammenu{
breedte: 35px;
hoogte: 30px;
marge: 30px 0 20px 20px;
cursor: aanwijzer;
}
#navbar .container .menu-wrap .menu{
Geen weergeven;
}
.bar{
hoogte: 5px;
breedte: 100%;
achtergrondkleur: #ffffff;
weergave: blok;
grens-radius: 5px;
overgang: 0.3s gemak;
}
#balk1{
transformeren: translateY(-4px);
}
#bar3{
transformeren: translateY(4px);
}
/* Huis */
#huis{
weergave: flexibel;
achtergrond: url("/images/home.jpg") niet-herhaalcentrum;
hoogte: 100vh;
}
#home .container{
marge: 6rem 1rem 2rem 1rem;
vulling: 2rem;
}
#home .home-inhoud .text-1{
lettergrootte: 20px;
marge: 1.2rem;
}
#home .home-content .text-2{
lettergrootte: 45px;
lettergewicht: 500;
marge: 1rem;
}
#home .home-content .text-3{
lettergrootte: 22px;
marge: 1.2rem;
}
#home .home-content .text-3 span{
kleur: #0000ff;
lettergewicht: 600;
}
#home .container{
marge-links: 4.5rem;
}
/* Over */
#over .container{
opvulling: 0;
}
/* Contact */
#contact .container{
opvulling: 0;
}

Het bovenstaande bestand produceert de volgende responsieve smartphone-indeling:

Andere manieren om responsieve interactieve websites te maken

Weten hoe u uw website responsief en interactief kunt maken met behulp van CSS en HTML is een geweldige vaardigheid om te hebben. Maar dit zijn niet de enige methoden om uw website responsive en interactief te maken.

Veel frontend-frameworks en zelfs sjablonen op services zoals Joomla maken responsieve interactieve ontwerpen mogelijk.

15 Stijlvolle Joomla-sjablonen voor responsieve websites

Wilt u een website maken voor uw bedrijf of blog? Probeer deze Joomla-sjablonen uit.

Lees volgende

Over de auteur