Hur du gör din webbplats responsiv och interaktiv med CSS och JavaScript

Att ha en webbplats som är både responsiv och interaktiv är ett oskrivet krav för varje webbplatsägare. Fördelarna med att ha en interaktiv webbplats som anpassar sig perfekt till alla skärmstorlekar kan inte överskattas.

Du bör skapa en personlig upplevelse för varje användare som besöker din webbplats, och med flera CSS-egenskaper och några JavaScript-funktioner kan du göra just det.

I den här självstudieartikeln lär du dig hur du gör din HTML- och CSS-webbplats responsiv och interaktiv.

Gör din webbplats interaktiv

När du bygger en webbplats börjar du uppifrån och ner. Att göra din webbplats interaktiv är därför en process som också bör börja på toppen. Ta denna portföljwebbplats vi byggde som ett exempel. Den har en ren design men den är inte helt interaktiv.

Varje menyalternativ ändrar färg när du håller muspekaren över det, men hur vet du vilken del av webbplatsen du är på? Tja, det finns två sätt att göra det - aktivera menyalternativ med oncroll och onclick evenemang.

Aktivering av ett menyalternativ varje gång du rullar upp eller ner på en webbplats kräver användning av en JavaScript-funktion som du kan kalla "activeMenu". Den här funktionen kommer att behöva tillgång till menyalternativen i navigeringsfältet, såväl som varje sektion av webbplatsen. Lyckligtvis kan du åstadkomma detta med hjälp av

querySelectorAll DOM-väljare.

I din projektkatalog måste du skapa en ny JavaScript-fil och länka den till din HTML-fil med hjälp av följande kodrad:

I en manus taggen, den src värde är namnet på JavaScript-filen, vilket i exemplet ovan är main.js.

Main.js-filen

// använder javascript för att aktivera menyalternativ på rullning
const li = document.querySelectorAll(".länkar");
const sek = document.querySelectorAll("sektion");
function activeMenu(){
låt len=sek.längd;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("active"));
li[len].classList.add("aktiv");
}
activeMenu();
window.addEventListener("scroll", activeMenu);

De querySelectorAll väljaren i koden ovan tar tag i alla menyalternativ med hjälp av länkar klass. Den tar också tag i alla delar av webbplatsen med hjälp av sektion märka. De aktivera Meny funktionen tar sedan längden på varje avsnitt och tar bort eller lägger till en "aktiv" variabel beroende på en användares rullningsposition.

För att koden ovan ska fungera måste du uppdatera portföljwebbplatsens stilark för att inkludera följande kod i navigeringsfältet:

#navbar .menu li.active a{
färg: #fff;
}

Aktivera menyalternativ när du klickar

 //använder jquery för att aktivera menyalternativet vid klick
$(document).on('klick', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Om du lägger till koden ovan i din JavaScript-fil aktiveras varje avsnitt när en användare klickar på lämpligt menyalternativ. Däremot använder den jQuery (ett JavaScript-bibliotek) som utför denna uppgift med en minimal mängd kod.

Ett problem som du kan stöta på när du aktiverar varje menyalternativ vid klick är att navigeringsfältet kommer att täcka den övre delen av varje avsnitt. För att förhindra detta kan du helt enkelt infoga följande kod i verktygsdelen av stilmallen:

sektion{
scroll-marginal-top: 4,5rem;
}

Koden ovan säkerställer att när du navigerar till varje avsnitt genom att klicka, kommer navigeringsfältet att stanna 4,5 rem ovanför varje avsnitt (eller 72px). En annan cool funktion att lägga till på din webbplats är smidig rullning, vilket du kan åstadkomma med följande CSS-kod:

html {
rullningsbeteende: slät;
}

Gör din hemsida interaktiv

På de flesta webbplatser kommer en användare att se sin första knapp i navigeringsfältet eller på startsidan. Förutom att se ut som en uppmaning bör en knapp också vara interaktiv. Ett bra sätt att åstadkomma detta är med CSS :sväva väljare, som tilldelar ett nytt tillstånd till ett element varje gång en användares mus kör över det.

På portföljwebbplatsen har den enda länken på hemsidan btn klass (vilket ger det utseendet av en knapp). Så för att göra den här knappen interaktiv kan du helt enkelt tilldela den :sväva väljare till btn klass.

Använda :hoverväljaren

 .btn: hover{
bakgrund: #fff;
färgen blå;
kant: blå fast ;
border-radie: 5px;
}

Om du lägger till koden ovan i verktygssektionen på portföljwebbplatsen kommer knappen att övergå från ett tillstånd till ett annat när du håller muspekaren över den.

En annan cool funktion för hemsidan är en skrivanimation, som använder typd.js (ett animationsskript för att skriva jQuery).

Använder typd.js

// jquery-skrivande textanimationsskript
var typed = new Typed(".typing", {
strängar: ["Programvaruutvecklare"],
typHastighet: 100,
backhastighet: 60,
loop: sant
});

När du har lagt till koden ovan i din JavaScript-fil måste du göra följande ändring av HTML: en:

Och jag är en 

I koden ovan ersätter du "Software Developer"-texten i originalkoden med "typing"-klassen, vilket skapar skrivanimationen.

Göra andra delar av din webbplats interaktiva

Skapa en knappverktygsklass och använda sväva selector ser till att varje avsnitt på din webbsida som har en knapp är interaktivt. CSS-övergångs- och transformeringsegenskaperna har också några fantastiska animeringsfunktioner som du kan lägga till på din webbplats.

Om du har ett galleri eller någon bildsektion på din webbplats kan du använda de två egenskaperna som nämns ovan för att skapa en svävningseffekt på dina bilder. Om du lägger till följande CSS-kod till bilderna i projektdelen av portföljwebbplatsen skapas en transformationseffekt på bilderna i avsnittet:

.img-container img{
maxbredd: 450px;
övergång: alla 0,3s lättnader;
markör: pekare;
}
.img-container img: hover{
transform: skala (1,2);
}

Gör din webbplats responsiv

När du skapar en responsiv webbplats finns det fyra olika enhetstyper som du måste tänka på – stationära datorer, bärbara datorer, surfplattor och smartphones. Dessutom har var och en av dessa enhetstyper också en rad olika skärmstorlekar, men att ha dessa fyra kategorier är ett bra ställe att börja.

Relaterad: Hur man använder mediafrågor i HTML och CSS för att skapa responsiva webbplatser

I sitt nuvarande tillstånd visas portföljwebbplatsen bra på stationära och bärbara datorer. Så att göra den responsiv kommer att innebära att skapa en anpassad layout för surfplattor och smartphones.

Det bästa sättet att uppnå en responsiv design med CSS och HTML är genom mediefrågor. Du kan placera en mediefråga i en CSS-fil eller HTML länk märka. Det senare tillvägagångssättet underlättar skalbarhet, och det är också metoden som jag kommer att demonstrera.

Du måste skapa ytterligare två CSS-filer. Den första CSS-filen kommer att skapa layoutstrukturen för små bärbara datorer och surfplattor i liggande läge. Den kommer att ha en maximal bredd på 1100px, som du ser i följande länktagg:

Infoga kodraden ovan inom huvud taggen för din HTML-fil (eller i det här fallet portföljwebbplatsfilen) kommer att säkerställa att varje enhet med en skärmbredd på 1100px och under kommer att använda stylingen i widescreen.css fil.

Filen widescreen.css

/* Hem */
#navbar .container h1 a span{
display: ingen;
}
#home .home-content .text-3 span{
färg: #000000;
}
/* Portfölj */
.projects{
motivera-innehåll: center;
}
.projekt{
flex: 0;
}
/* Handla om */
.about-content{
flex-riktning: kolumn;
}
/* Kontakt */
.contact-content{
flex-riktning: kolumn;
}

Koden ovan kommer att producera en responsiv layout på enheter med skärmstorlekar på 1100px och mindre, som du kan se i utgången nedan:

Den andra CSS-filen kommer att skapa layoutstrukturen för smartphones och surfplattor i stående läge. Den kommer att ha en maximal bredd på 760px, som du kan se i följande länktagg:

Filen mobile.css

/* Navbar */
#navbar .container h1 a span{
display: ingen;
}
#navbar .container .menu{
marginal-vänster: 0rem;
}
#skinka-meny{
bredd: 35px;
höjd: 30px;
marginal: 30px 0 20px 20px;
markör: pekare;
}
#navbar .container .menu-wrap .menu{
display: ingen;
}
.bar{
höjd: 5px;
bredd: 100%;
bakgrundsfärg: #ffffff;
display: block;
border-radie: 5px;
övergång: 0,3s lätthet;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Hem */
#Hem{
display: flex;
bakgrund: url("/images/home.jpg") no-repeat center;
höjd: 100vh;
}
#home .container{
marginal: 6rem 1rem 2rem 1rem;
stoppning: 2rem;
}
#home .home-content .text-1{
teckenstorlek: 20px;
marginal: 1,2rem;
}
#home .home-content .text-2{
teckenstorlek: 45px;
teckensnittsvikt: 500;
marginal: 1rem;
}
#home .home-content .text-3{
teckenstorlek: 22px;
marginal: 1,2rem;
}
#home .home-content .text-3 span{
färg: #0000ff;
teckensnittsvikt: 600;
}
#home .container{
marginal-vänster: 4,5 rem;
}
/* Handla om */
#about .container{
stoppning: 0;
}
/* Kontakt */
#kontakt .container{
stoppning: 0;
}

Filen ovan kommer att producera följande responsiva smartphone-layout:

Andra sätt att skapa responsiva interaktiva webbplatser

Att veta hur du gör din webbplats responsiv och interaktiv med CSS och HTML är en stor färdighet att ha. Men det här är inte de enda metoderna för att göra din webbplats responsiv och interaktiv.

Många frontend-ramverk och till och med mallar på tjänster som Joomla underlättar responsiv interaktiv design.

15 snygga Joomla-mallar för responsiva webbplatser

Vill du skapa en webbplats för ditt företag eller din blogg? Prova dessa Joomla-mallar.

Läs Nästa

Om författaren