Comment Rendre Votre Site Web Réactif et Interactif Avec CSS et JavaScript

Vous avez configuré votre site Web avec HTML et CSS, mais vous devez maintenant ajouter de la logique. Voici ce qu’il faut faire.

Avoir un site Web à la fois réactif et interactif est une exigence non écrite pour chaque propriétaire de site Web. Les avantages d’avoir un site Web interactif qui s’adapte parfaitement à n’importe quelle taille d’écran ne peuvent pas être surestimés.

Vous devez créer une expérience personnalisée pour chaque utilisateur qui visite votre site Web, et avec plusieurs propriétés CSS et quelques fonctions JavaScript, vous pouvez le faire.

Dans cet article de tutoriel, vous apprendrez à rendre votre site Web HTML et CSS réactif et interactif.

Rendre Votre Site Web Interactif

Lorsque vous créez un site Web, vous commencez de haut en bas. Par conséquent, rendre votre site Web interactif est un processus qui devrait également commencer par le haut. Prenez ce site Web de portfolio que nous avons construit comme exemple. Il a un design épuré mais ce n’est pas complètement interactif.

Chaque élément de menu change de couleur lorsque vous le survolez, mais comment savoir quelle section du site Web vous êtes sur? Eh bien, il y a deux façons de le faire: activer les éléments de menu avec les événements oncroll et onclick.

L’activation d’un élément de menu chaque fois que vous faites défiler vers le haut ou le bas d’un site Web nécessitera l’utilisation d’une fonction JavaScript que vous pouvez appeler « activeMenu ». Cette fonction devra accéder aux éléments de menu de la barre de navigation, ainsi qu’à chaque section du site Web. Heureusement, vous pouvez accomplir cela avec l’utilisation du sélecteur DOM querySelectorAll.

Icon for javascript ,programming

Dans le répertoire de votre projet, vous devrez créer un nouveau fichier JavaScript et le lier à votre fichier HTML en utilisant la ligne de code suivante:

Dans une balise de script, la valeur src est le nom du fichier JavaScript, qui dans l’exemple ci-dessus est main.js.
Principal.fichier js

// utilisation de javascript pour activer l’élément de menurollcroll
const li = document.querySelectorAll (« .lien »);
const sec = document.querySelectorAll (« section »);

fonction activeMenu() {
soit len = longueur sec.;
alors que ( windowlen & & fenêtre.scrollY +97 ltx.Liste de classes.supprimer (« actif »));
li [len].Liste de classes.ajouter (« actif »);
}
activeMenu ();
fenêtre.addEventListener(« défilement », activeMenu);

Le sélecteur querySelectorAll dans le code ci-dessus saisit tous les éléments de menu à l’aide de la classe links. Il saisit également toutes les sections du site Web à l’aide de la balise de section. La fonction activateMenu prend ensuite la longueur de chaque section et supprime ou ajoute une variable “active” en fonction de la position de défilement de l’utilisateur.

Pour que le code ci-dessus fonctionne, vous devrez mettre à jour la feuille de style du site Web du portefeuille pour inclure le code suivant dans la section de la barre de navigation:

barre de navigation.menu li. actif a {

couleur : #fff;
}

Activation des Éléments de Menu onclick

// utilisation de jquery pour activer l’élément de menu onclick
$(document).on (‘click’, ‘li’, function() {
$(ce).addClass (‘actif’).sœur().removeClass (‘actif’)
})

L’ajout du code ci-dessus à votre fichier JavaScript activera chaque section lorsqu’un utilisateur clique sur l’élément de menu approprié. Cependant, il utilise jQuery (une bibliothèque JavaScript) qui accomplit cette tâche avec une quantité minimale de code.

Un problème que vous pourriez rencontrer lorsque vous activez chaque élément de menu sur un clic est que la barre de navigation couvrira la partie supérieure de chaque section. Pour éviter cela, vous pouvez simplement insérer le code suivant dans la section utilitaire de la feuille de style:

section{
défilement-marge-haut: 4.5rem;
}

Le code ci-dessus garantira que lorsque vous naviguerez vers chaque section en cliquant sur, la barre de navigation restera 4,5 rem au-dessus de chaque section (ou 72 pixels). Une autre fonctionnalité intéressante à ajouter à votre site Web est le défilement fluide, que vous pouvez accomplir avec le code CSS suivant:

HTML {
comportement de défilement: lisse;
}

Icon for javascript ,programming

Rendre Votre Page D’Accueil Interactive

Sur la plupart des sites Web, un utilisateur verra son premier bouton dans la barre de navigation ou la page d’accueil. En plus de ressembler à un appel à l’action, un bouton doit également être interactif. Un excellent moyen d’y parvenir est avec le sélecteur CSS:hover, qui attribue un nouvel état à un élément chaque fois que la souris d’un utilisateur passe dessus.

Sur le site du portfolio, le seul lien de la page d’accueil a la classe btn (ce qui lui donne l’apparence d’un bouton). Ainsi, pour rendre ce bouton interactif, vous pouvez simplement affecter le sélecteur :hover à la classe btn.
Utilisation du sélecteur :hover

.btn : survoler {
contexte : #fff;
couleur: bleu;
bordure: solide bleu ;
rayon de bordure: 5px;
}

L’ajout du code ci-dessus à la section utilitaire du site Web du portefeuille fera passer le bouton d’un état à un autre lorsque vous le survolerez.

Une autre fonctionnalité intéressante pour la page d’accueil est une animation de frappe, qui utilise la saisie typée.js (un script d’animation de frappe jQuery).
Utilisation dactylographiée.js

// script d’animation de texte de saisie jquery
var typé = nouveau typé(« .taper », {
chaînes : [« Développeur de logiciels »],
Type de vitesse: 100,
Vitesse arrière: 60,
boucle: vrai
});

Après avoir ajouté le code ci-dessus à votre fichier JavaScript, vous devrez apporter les modifications suivantes au code HTML: Et je suis une

Dans le code ci-dessus, vous remplacez le texte “Développeur de logiciels” dans le code d’origine par la classe “typing”, créant ainsi l’animation de saisie.

Rendre les Autres Sections de votre Site Web Interactives

La création d’une classe utilitaire de bouton et l’utilisation du sélecteur de survol garantiront que chaque section de votre page Web dotée d’un bouton est interactive. Les propriétés de transition et de transformation CSS ont également d’excellentes fonctionnalités d’animation que vous pouvez ajouter à votre site Web.

Si vous avez une galerie ou une section d’image sur votre site Web, vous pouvez utiliser les deux propriétés mentionnées ci-dessus pour créer un effet de survol sur vos images. L’ajout du code CSS suivant aux images de la section projet du site Web du portefeuille créera un effet de transformation sur les images de la section:

.img – conteneur img {
largeur maximale: 450px;
transition: tous les 0.3s facilité de sortie;
curseur: pointeur;
}

.img – conteneur img : survol {
transformer: échelle (1.2);
}

Rendre Votre Site Web réactif

Lors de la création d’un site Web réactif, vous devez prendre en compte quatre types d’appareils différents: ordinateurs de bureau, ordinateurs portables, tablettes et smartphones. De plus, chacun de ces types d’appareils a également une gamme de tailles d’écran différentes, mais avoir ces quatre catégories est un bon point de départ.
Dans son état actuel, le site Web du portefeuille s’affiche bien sur les ordinateurs de bureau et les ordinateurs portables. Ainsi, le rendre réactif signifiera la création d’une mise en page personnalisée pour les tablettes et les smartphones.

La meilleure façon d’obtenir un design réactif avec CSS et HTML consiste à effectuer des requêtes multimédias. Vous pouvez placer une requête multimédia dans un fichier CSS ou la balise de lien HTML. Cette dernière approche facilite l’évolutivité, et c’est aussi la méthode que je vais démontrer.

Vous devrez créer deux fichiers CSS supplémentaires. Le premier fichier CSS créera la structure de mise en page pour les petits ordinateurs portables et tablettes en mode paysage. Il aura une largeur maximale de 1100 pixels, comme vous le voyez dans la balise de lien suivante:

L’insertion de la ligne de code ci-dessus dans la balise head de votre fichier HTML (ou dans ce cas le fichier du site Web du portefeuille) garantira que chaque appareil avec une largeur d’écran de 1100 pixels et moins utilisera le style de l’écran large.fichier css.

L’écran large.fichier css

/* Maison */

barre de navigation.conteneur h1 une portée {

affichage: aucun;
}

maison .accueil – contenu.texte – 3 span {

couleur: #000000;
}

/* Portefeuille */
.projet{
justify – contenu : centre;
}
.projet{
flex: 0;
}

/* Sur */
.à propos – contenu {
flex-direction: colonne;
}

/* Contacter */
.contact – contenu {
flex-direction: colonne;
}

Le code ci-dessus produira une mise en page réactive sur les appareils avec des tailles d’écran de 1100 pixels et moins, comme vous pouvez le voir dans la sortie ci-dessous:
Le deuxième fichier CSS créera la structure de mise en page pour les smartphones et les tablettes en mode portrait. Il aura une largeur maximale de 760 pixels, comme vous pouvez le voir dans la balise de lien suivante:

Mobile.fichier css

/* Barre de navigation */

barre de navigation.conteneur h1 une portée {

affichage: aucun;
}

barre de navigation.conteneur .menu {

marge – gauche: 0rem;
}

menu jambon {

largeur: 35px;
hauteur: 30px;
marge: 30px 0 20px 20px;
curseur: pointeur;
}

barre de navigation.conteneur .menu – envelopper.menu {

affichage: aucun;
}

.bar{
hauteur: 5px;
largeur: 100%;
couleur de fond : #ffffff;
affichage: bloc;

rayon de bordure: 5px;
transition: facilité de 0,3 s;
}

bar1 {

transformer: Traduire (-4px);
}

bar3 {

transformer: Traduire (4px);
}

/* Maison */

maison{

affichage: flex;
arrière-plan: url(« /images/accueil.jpg ») centre sans répétition;
hauteur: 100 vh;
}

maison .conteneur{

marge: 6rem 1rem 2rem 1rem;
rembourrage: 2rem;
}

maison .accueil – contenu.texte – 1 {

taille de la police: 20px;
marge: 1,2rem;
}

maison .accueil – contenu.texte – 2 {

taille de la police: 45px;
poids de la police: 500;
marge: 1rem;
}

maison .accueil – contenu.texte – 3 {

taille de la police: 22px;
marge: 1,2rem;
}

maison .accueil – contenu.texte – 3 span {

couleur: #0000ff;
poids de la police: 600;
}

maison .conteneur{

marge à gauche: 4,5rem;
}

/* Sur */

sur .conteneur{

rembourrage: 0;
}

/* Contacter */

contacter .conteneur{

rembourrage: 0;
}

Le fichier ci-dessus produira la disposition de smartphone réactive.

Autres Façons de Créer des Sites Web Interactifs Réactifs

Savoir comment rendre votre site Web réactif et interactif en utilisant CSS et HTML est une grande compétence à avoir. Mais ce ne sont pas les seules méthodes pour rendre votre site Web réactif et interactif.

De nombreux frameworks frontend et même des modèles sur des services tels que Joomla facilitent les conceptions interactives réactives.

%d blogueurs aiment cette page :