Come rendere il tuo sito web reattivo e interattivo con CSS e JavaScript

Avere un sito web che sia sia reattivo che interattivo è un requisito non scritto per ogni proprietario di un sito web. I vantaggi di avere un sito Web interattivo che si adatta perfettamente a qualsiasi dimensione dello schermo non possono essere sopravvalutati.

Dovresti creare un'esperienza personalizzata per ogni utente che visita il tuo sito Web e con diverse proprietà CSS e alcune funzioni JavaScript, puoi farlo.

In questo articolo tutorial imparerai come rendere il tuo sito Web HTML e CSS reattivo e interattivo.

Rendi il tuo sito web interattivo

Quando crei un sito web, inizi dall'alto verso il basso. Pertanto, rendere interattivo il tuo sito web è un processo che dovrebbe iniziare anche dall'alto. Prendere questo sito portfolio abbiamo costruito come esempio. Ha un design pulito ma non è completamente interattivo.

Ogni voce di menu cambia colore quando ci passi sopra, ma come fai a sapere in quale sezione del sito ti trovi? Bene, ci sono due modi per farlo: attivare le voci di menu con scorrere e al clic eventi.

L'attivazione di una voce di menu ogni volta che si scorre verso l'alto o verso il basso un sito Web richiede l'utilizzo di una funzione JavaScript che è possibile chiamare "activeMenu". Questa funzione richiederà l'accesso alle voci di menu nella barra di navigazione, nonché a ciascuna sezione del sito Web. Fortunatamente, puoi farlo con l'uso del querySelectorAll selettore DOM.

Nella directory del tuo progetto, dovrai creare un nuovo file JavaScript e collegarlo al tuo file HTML utilizzando la seguente riga di codice:

In un sceneggiatura tag, il src value è il nome del file JavaScript, che nell'esempio sopra è main.js.

Il file main.js

// utilizzo di javascript per attivare la voce di menu onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("sezione");
funzione attivaMenu(){
let len=sec.lunghezza;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("attivo"));
li[len].classList.add("attivo");
}
attivoMenu();
window.addEventListener("scroll", activeMenu);

Il querySelectorAll selettore nel codice sopra cattura tutte le voci di menu usando il link classe. Cattura anche tutte le sezioni del sito web utilizzando il sezione etichetta. Il attivaMenu la funzione prende quindi la lunghezza di ogni sezione e rimuove o aggiunge una variabile "attiva" a seconda della posizione di scorrimento dell'utente.

Affinché il codice sopra funzioni, dovrai aggiornare il foglio di stile del sito Web del portfolio per includere il seguente codice nella sezione della barra di navigazione:

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

Attivazione delle voci di menu con un clic

 //usando jquery per attivare la voce di menu onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

L'aggiunta del codice sopra al tuo file JavaScript attiverà ogni sezione quando un utente fa clic sulla voce di menu appropriata. Tuttavia, utilizza jQuery (una libreria JavaScript) che svolge questo compito con una quantità minima di codice.

Un problema che potresti incontrare quando attivi ogni voce di menu al clic è che la barra di navigazione coprirà la parte superiore di ogni sezione. Per evitare ciò, puoi semplicemente inserire il seguente codice nella sezione utility del foglio di stile:

sezione{
margine di scorrimento in alto: 4.5rem;
}

Il codice sopra farà in modo che quando navighi in ciascuna sezione facendo clic, la barra di navigazione rimarrà 4.5rem sopra ogni sezione (o 72px). Un'altra caratteristica interessante da aggiungere al tuo sito web è scorrimento fluido, che puoi realizzare con il seguente codice CSS:

html {
comportamento di scorrimento: liscio;
}

Rendi la tua home page interattiva

Sulla maggior parte dei siti Web, un utente vedrà il suo primo pulsante sulla barra di navigazione o sulla home page. Oltre a sembrare un invito all'azione, un pulsante dovrebbe anche essere interattivo. Un ottimo modo per farlo è con i CSS :passa il mouse selector, che assegna un nuovo stato a un elemento ogni volta che il mouse di un utente ci passa sopra.

Sul sito del portfolio, l'unico link nella home page ha il btn class (che gli conferisce l'aspetto di un pulsante). Quindi, per rendere interattivo questo pulsante, puoi semplicemente assegnare il :passa il mouse selettore per btn classe.

Utilizzo del selettore :hover

 .btn: hover{
sfondo: #fff;
colore blu;
bordo: blu solido;
raggio di confine: 5px;
}

L'aggiunta del codice sopra alla sezione utilità del sito Web del portfolio farà passare il pulsante da uno stato all'altro quando ci passi sopra con il mouse.

Un'altra caratteristica interessante per la home page è un'animazione di digitazione, che utilizza digitato.js (uno script di animazione di digitazione jQuery).

Usando typed.js

// jquery digitando lo script di animazione del testo
var typed = new Typed(".typing", {
stringhe: ["Sviluppatore di software"],
tipoVelocità: 100,
indietroVelocità: 60,
ciclo: vero
});

Dopo aver aggiunto il codice sopra al tuo file JavaScript, dovrai apportare la seguente modifica all'HTML:

e io sono un 

Nel codice sopra si sostituisce il testo "Sviluppatore software" nel codice originale con la classe "digitazione", creando l'animazione di digitazione.

Rendere interattive altre sezioni del tuo sito web

Creazione di una classe di utilità per i pulsanti e utilizzo di passa il mouse selector farà in modo che ogni sezione della tua pagina web che ha un pulsante sia interattiva. Le proprietà di transizione e trasformazione CSS hanno anche alcune fantastiche funzionalità di animazione che puoi aggiungere al tuo sito web.

Se disponi di una galleria o di una sezione di immagini sul tuo sito Web, puoi utilizzare le due proprietà sopra menzionate per creare un effetto al passaggio del mouse sulle tue immagini. L'aggiunta del seguente codice CSS alle immagini nella sezione progetti del sito Web del portfolio creerà un effetto di trasformazione sulle immagini nella sezione:

.img-contenitore img{
larghezza massima: 450 px;
transizione: tutti gli 0.3 s facilitano;
cursore: puntatore;
}
.img-contenitore img: hover{
trasforma: scala (1.2);
}

Rendi il tuo sito web reattivo

Quando si crea un sito Web reattivo, è necessario considerare quattro diversi tipi di dispositivi: desktop, laptop, tablet e smartphone. Inoltre, ciascuno di questi tipi di dispositivi ha anche una gamma di diverse dimensioni dello schermo, ma avere queste quattro categorie è un buon punto di partenza.

Imparentato: Come utilizzare le query multimediali in HTML e CSS per creare siti Web responsive

Allo stato attuale, il sito Web del portfolio viene visualizzato bene su desktop e laptop. Quindi, renderlo responsive significherà creare un layout personalizzato per tablet e smartphone.

Il modo migliore per ottenere un design reattivo con CSS e HTML è tramite query multimediali. Puoi inserire una media query all'interno di un file CSS o HTML collegamento etichetta. Quest'ultimo approccio facilita la scalabilità ed è anche il metodo che dimostrerò.

Dovrai creare due file CSS aggiuntivi. Il primo file CSS creerà la struttura del layout per piccoli laptop e tablet in modalità orizzontale. Avrà una larghezza massima di 1100 px, come puoi vedere nel seguente tag di collegamento:

Inserendo la riga di codice sopra all'interno del testa tag del tuo file HTML (o in questo caso il file del sito Web del portfolio) assicurerà che ogni dispositivo con una larghezza dello schermo di 1100 px e sotto utilizzerà lo stile in widescreen.css file.

Il file widescreen.css

/* Casa */
#navbar .container h1 a span{
display: nessuno;
}
#home .home-content .text-3 span{
colore: #000000;
}
/* Portafoglio */
.progetti{
giustifica-contenuto: centro;
}
.progetto{
flessione: 0;
}
/* Di */
.su-contenuto{
direzione di flessione: colonna;
}
/* Contatto */
.contatto-contenuto{
direzione di flessione: colonna;
}

Il codice sopra produrrà un layout reattivo su dispositivi con dimensioni dello schermo di 1100 px e inferiori, come puoi vedere nell'output di seguito:

Il secondo file CSS creerà la struttura del layout per smartphone e tablet in modalità verticale. Avrà una larghezza massima di 760 pixel, come puoi vedere nel seguente tag di collegamento:

Il file mobile.css

/* Barra di navigazione */
#navbar .container h1 a span{
display: nessuno;
}
#barra di navigazione .contenitore .menu{
margine sinistro: 0rem;
}
#menu-prosciutto{
larghezza: 35px;
altezza: 30px;
margine: 30px 0 20px 20px;
cursore: puntatore;
}
#navbar .container .menu-wrap .menu{
display: nessuno;
}
.sbarra{
altezza: 5px;
larghezza: 100%;
colore di sfondo: #ffffff;
blocco di visualizzazione;
raggio di confine: 5px;
transizione: facilità di 0,3 secondi;
}
#bar1{
trasforma: translateY(-4px);
}
#bar3{
trasforma: translateY(4px);
}
/* Casa */
#casa{
display: flessibile;
sfondo: url("/images/home.jpg") centro senza ripetizione;
altezza: 100vh;
}
#home .contenitore{
margine: 6rem 1rem 2rem 1rem;
imbottitura: 2rem;
}
#home .home-content .text-1{
dimensione del carattere: 20px;
margine: 1.2rem;
}
#home .home-content .text-2{
dimensione del carattere: 45px;
peso del carattere: 500;
margine: 1rem;
}
#home .home-content .text-3{
dimensione del carattere: 22px;
margine: 1.2rem;
}
#home .home-content .text-3 span{
colore: #0000ff;
peso del carattere: 600;
}
#home .contenitore{
margine sinistro: 4.5rem;
}
/* Di */
#su .contenitore{
imbottitura: 0;
}
/* Contatto */
#contatto .contenitore{
imbottitura: 0;
}

Il file sopra produrrà il seguente layout per smartphone reattivo:

Altri modi per creare siti Web interattivi reattivi

Sapere come rendere il tuo sito web reattivo e interattivo usando CSS e HTML è una grande abilità da avere. Ma questi non sono gli unici metodi per rendere il tuo sito web reattivo e interattivo.

Molti framework frontend e persino modelli su servizi come Joomla facilitano i progetti interattivi reattivi.

15 eleganti modelli Joomla per siti Web reattivi

Stai cercando di creare un sito Web per la tua attività o il tuo blog? Prova questi modelli Joomla.

Leggi Avanti

Circa l'autore