Sådan gør du din hjemmeside responsiv og interaktiv med CSS og JavaScript

At have et websted, der både er responsivt og interaktivt, er et uskreven krav for enhver webstedsejer. Fordelene ved at have en interaktiv hjemmeside, der tilpasser sig perfekt til enhver skærmstørrelse, kan ikke overvurderes.

Du bør skabe en personlig oplevelse for hver bruger, der besøger dit websted, og med flere CSS-egenskaber og et par JavaScript-funktioner kan du gøre netop det.

I denne selvstudieartikel lærer du, hvordan du gør dit HTML- og CSS-websted responsivt og interaktivt.

Gør din hjemmeside interaktiv

Når du bygger en hjemmeside, starter du oppefra og ned. Derfor er det at gøre din hjemmeside interaktiv en proces, der også bør begynde i toppen. Tage denne porteføljehjemmeside vi byggede som et eksempel. Det har et rent design, men det er ikke helt interaktivt.

Hvert menupunkt skifter farve, når du holder markøren over det, men hvordan ved du, hvilken sektion af hjemmesiden du er på? Nå, der er to måder at gøre det på - aktiver menupunkter med på rulle og onclick begivenheder.

Aktivering af et menupunkt, hver gang du ruller op eller ned på et websted, kræver brug af en JavaScript-funktion, som du kan kalde "activeMenu". Denne funktion skal have adgang til menupunkterne i navigeringslinjen, såvel som hver sektion af webstedet. Heldigvis kan du opnå dette ved at bruge querySelectorAll DOM-vælger.

I dit projektbibliotek skal du oprette en ny JavaScript-fil og linke den til din HTML-fil ved hjælp af følgende kodelinje:

I en manuskript tag, den src værdi er navnet på JavaScript-filen, som i eksemplet ovenfor er main.js.

Main.js-filen

// ved at bruge javascript til at aktivere menupunktet på rulle
const li = document.querySelectorAll(.links");
const sec = document.querySelectorAll("sektion");
function activeMenu(){
lad len=sek.længde;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("active"));
li[len].classList.add("aktiv");
}
aktivMenu();
window.addEventListener("scroll", activeMenu);

Det querySelectorAll vælgeren i koden ovenfor fanger alle menupunkterne ved hjælp af links klasse. Den griber også alle sektioner af webstedet ved hjælp af afsnit tag. Det aktiver Menu funktionen tager derefter længden af ​​hver sektion og fjerner eller tilføjer en "aktiv" variabel afhængigt af en brugers rulleposition.

For at koden ovenfor skal virke, skal du opdatere porteføljens webstedstypografi for at inkludere følgende kode i navbar-sektionen:

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

Aktivering af menupunkter ved klik

 //brug af jquery til at aktivere menupunktet ved klik
$(document).on('klik', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Tilføjelse af koden ovenfor til din JavaScript-fil vil aktivere hver sektion, når en bruger klikker på det relevante menupunkt. Det bruger dog jQuery (et JavaScript-bibliotek), som udfører denne opgave med en minimal mængde kode.

Et problem, du kan støde på, når du aktiverer hvert menupunkt ved klik, er, at navigeringslinjen vil dække den øverste del af hver sektion. For at forhindre dette kan du blot indsætte følgende kode i værktøjsdelen af ​​typografiarket:

afsnit{
rulle-margin-top: 4,5rem;
}

Koden ovenfor sikrer, at når du navigerer til hver sektion ved at klikke, vil navigeringslinjen forblive 4,5 rem over hver sektion (eller 72px). En anden cool funktion at tilføje til din hjemmeside er jævn rulning, som du kan opnå med følgende CSS-kode:

html {
rulle-adfærd: glat;
}

Gør din hjemmeside interaktiv

På de fleste websteder vil en bruger se deres første knap på navigeringslinjen eller startsiden. Udover at ligne en opfordring til handling, skal en knap også være interaktiv. En god måde at opnå dette på er med CSS :hover selector, som tildeler en ny tilstand til et element, hver gang en brugers mus kører over det.

På porteføljehjemmesiden har det eneste link på hjemmesiden btn klasse (hvilket giver det udseende af en knap). Så for at gøre denne knap interaktiv, kan du blot tildele den :hover vælger til btn klasse.

Brug af :hover-vælgeren

 .btn: hover{
baggrund: #fff;
farve: blå;
kant: blå fast ;
kant-radius: 5px;
}

Tilføjelse af koden ovenfor til hjælpesektionen på porteføljewebstedet vil få knappen til at skifte fra en tilstand til en anden, når du holder musemarkøren over den.

En anden cool funktion til hjemmesiden er en skriveanimation, som bruger typed.js (et jQuery-type animationsscript).

Bruger typed.js

// jquery skrive tekst animation script
var typed = new Typed(".typing", {
strings: ["Softwareudvikler"],
typeHastighed: 100,
tilbagehastighed: 60,
sløjfe: sandt
});

Når du har tilføjet koden ovenfor til din JavaScript-fil, skal du foretage følgende ændring af HTML:

Og jeg er en 

I koden ovenfor erstatter du "Softwareudvikler"-teksten i den originale kode med klassen "indtastning", hvilket skaber skriveanimationen.

Gør andre sektioner af dit websted interaktive

Oprettelse af en knapværktøjsklasse og brug af svæve selector vil sikre, at hver sektion af din webside, der har en knap, er interaktiv. CSS-overgangs- og transformationsegenskaberne har også nogle fantastiske animationsfunktioner, som du kan tilføje til dit websted.

Hvis du har et galleri eller en hvilken som helst billedsektion på din hjemmeside, kan du bruge de to ovennævnte egenskaber til at skabe en svæveeffekt på dine billeder. Tilføjelse af følgende CSS-kode til billederne i projektsektionen på porteføljewebstedet vil skabe en transformationseffekt på billederne i sektionen:

.img-container img{
max-bredde: 450px;
overgang: alle 0.3s ease-out;
markør: pointer;
}
.img-container img: hover{
transform: skala (1,2);
}

Gør din hjemmeside responsiv

Når du opretter et responsivt websted, er der fire forskellige enhedstyper, du skal overveje – desktops, bærbare computere, tablets og smartphones. Derudover har hver af disse enhedstyper også en række forskellige skærmstørrelser, men at have disse fire kategorier er et godt sted at starte.

Relaterede: Sådan bruger du medieforespørgsler i HTML og CSS til at skabe responsive websteder

I sin nuværende tilstand vises porteføljewebstedet godt på stationære og bærbare computere. Så at gøre det responsivt vil betyde at skabe et tilpasset layout til tablets og smartphones.

Den bedste måde at opnå et responsivt design med CSS og HTML på er gennem medieforespørgsler. Du kan placere en medieforespørgsel i en CSS-fil eller HTML link tag. Sidstnævnte tilgang letter skalerbarheden, og det er også den metode, jeg vil demonstrere.

Du skal oprette to ekstra CSS-filer. Den første CSS-fil vil skabe layoutstrukturen for små bærbare computere og tablets i liggende tilstand. Det vil have en maksimal bredde på 1100px, som du kan se i følgende linktag:

Indsættelse af kodelinjen ovenfor i hoved tag på din HTML-fil (eller i dette tilfælde porteføljewebstedsfilen) vil sikre, at hver enhed med en skærmbredde på 1100px og under vil bruge stylingen i widescreen.css fil.

Widescreen.css-filen

/* Hjem */
#navbar .container h1 a span{
display: ingen;
}
#home .home-content .text-3 span{
farve: #000000;
}
/* Portefølje */
.projekter{
retfærdiggøre-indhold: center;
}
.projekt{
flex: 0;
}
/* Om */
.about-content{
flex-retning: kolonne;
}
/* Kontakt */
.contact-content{
flex-retning: kolonne;
}

Ovenstående kode vil producere et responsivt layout på enheder med skærmstørrelser på 1100px og derunder, som du kan se i outputtet nedenfor:

Den anden CSS-fil vil skabe layoutstrukturen for smartphones og tablets i portrættilstand. Det vil have en maksimal bredde på 760px, som du kan se i følgende link tag:

Mobile.css-filen

/* Navbar */
#navbar .container h1 a span{
display: ingen;
}
#navbar .container .menu{
margin-venstre: 0rem;
}
#skinke-menu{
bredde: 35px;
højde: 30px;
margen: 30px 0 20px 20px;
markør: pointer;
}
#navbar .container .menu-wrap .menu{
display: ingen;
}
.bar{
højde: 5px;
bredde: 100%;
baggrundsfarve: #ffffff;
display: blok;
kant-radius: 5px;
overgang: 0,3s lethed;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Hjem */
#hjem{
display: flex;
baggrund: url("/images/home.jpg") no-repeat center;
højde: 100vh;
}
#home .container{
margin: 6rem 1rem 2rem 1rem;
polstring: 2rem;
}
#home .home-content .text-1{
skriftstørrelse: 20px;
margin: 1,2rem;
}
#home .home-content .text-2{
skriftstørrelse: 45px;
skrifttype-vægt: 500;
margin: 1rem;
}
#home .home-content .text-3{
skriftstørrelse: 22px;
margin: 1,2rem;
}
#home .home-content .text-3 span{
farve: #0000ff;
skrifttype-vægt: 600;
}
#home .container{
margin-venstre: 4,5rem;
}
/* Om */
#about .container{
polstring: 0;
}
/* Kontakt */
#kontakt .container{
polstring: 0;
}

Filen ovenfor vil producere følgende responsive smartphone-layout:

Andre måder at skabe responsive interaktive websteder på

At vide, hvordan du gør din hjemmeside responsiv og interaktiv ved hjælp af CSS og HTML er en stor færdighed at have. Men det er ikke de eneste metoder til at gøre din hjemmeside responsiv og interaktiv.

Mange frontend-rammer og endda skabeloner på tjenester som Joomla letter responsive interaktive designs.

15 stilfulde Joomla-skabeloner til responsive websteder

Vil du oprette en hjemmeside til din virksomhed eller blog? Prøv disse Joomla skabeloner.

Læs Næste

Om forfatteren