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 didacticiel, vous apprendrez comment 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 au sommet. Prendre ce site portfolio nous avons construit à titre d’exemple. Il a un design épuré mais il n’est pas complètement interactif.
Chaque élément de menu change de couleur lorsque vous le survolez, mais comment savoir sur quelle section du site Web vous vous trouvez ? Eh bien, il y a deux façons de le faire : activer les éléments de menu avec défilement et sur clic événements.
L’activation d’un élément de menu à chaque fois que vous faites défiler un site Web vers le haut ou vers le bas nécessitera l’utilisation d’une fonction JavaScript que vous pouvez appeler “activeMenu”. Cette fonction aura besoin d’accéder aux éléments de menu dans la barre de navigation, ainsi qu’à chaque section du site Web. Heureusement, vous pouvez y parvenir en utilisant le querySelectorAll sélecteur DOM.
Dans votre répertoire de projet, vous devrez créer un nouveau fichier JavaScript et le lier à votre fichier HTML en utilisant la ligne de code suivante :
<script src="main.js"></script>
Dans un scénario étiquette, le src value est le nom du fichier JavaScript, qui dans l’exemple ci-dessus est main.js.
Le fichier main.js
// using javascript to activate menu item onscroll
const li = document.querySelectorAll(".links");
const sec = document.querySelectorAll("section");function activeMenu(){
let len=sec.length;
while(--len && window.scrollY + 97 < sec[len].offsetTop){}
li.forEach(ltx => ltx.classList.remove("active"));
li[len].classList.add("active");
}
activeMenu();
window.addEventListener("scroll", activeMenu);
le querySelectorAll le sélecteur dans le code ci-dessus récupère tous les éléments de menu en utilisant le liens classer. Il saisit également toutes les sections du site Web en utilisant le section étiqueter. le activerMenu La fonction prend alors la longueur de chaque section et supprime ou ajoute une variable « active » en fonction de la position de défilement d’un 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 :
#navbar .menu li.active a{
color: #fff;
}
//using jquery to activate menu item onclick
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
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 en cliquant 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{
scroll-margin-top: 4.5rem;
}
Le code ci-dessus garantira que lorsque vous accédez à chaque section en cliquant, la barre de navigation restera à 4,5 rem au-dessus de chaque section (ou 72px). Une autre fonctionnalité intéressante à ajouter à votre site Web est défilement fluide, que vous pouvez accomplir avec le code CSS suivant :
html {
scroll-behavior: smooth;
}
Rendre votre page d’accueil interactive
Sur la plupart des sites Web, un utilisateur verra son premier bouton sur 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 CSS :flotter sélecteur, 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 sur la page d’accueil a le btn class (ce qui lui donne l’apparence d’un bouton). Ainsi, pour rendre ce bouton interactif, vous pouvez simplement affecter le :flotter sélecteur au btn classer.
Utilisation du sélecteur :hover
.btn:hover{
background: #fff;
color:blue;
border: blue solid ;
border-radius: 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 survolez.
Une autre fonctionnalité intéressante pour la page d’accueil est une animation de saisie, qui utilise tapé.js (un script d’animation de saisie jQuery).
Utilisation de typed.js
// jquery typing text animation script
var typed = new Typed(".typing", {
strings: ["Software Developer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
Après avoir ajouté le code ci-dessus à votre fichier JavaScript, vous devrez apporter la modification suivante au code HTML :
<div class="text-3">And I'm a <span class="typing"></span></div>
Dans le code ci-dessus, vous remplacez le texte « Développeur de logiciels » dans le code d’origine par la classe « dactylographie », créant ainsi l’animation de saisie.
Rendre d’autres sections de votre site Web interactives
Création d’une classe utilitaire de bouton et utilisation du flotter selector s’assurera que chaque section de votre page Web qui a 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’images 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 portfolio créera un effet de transformation sur les images de la section :
.img-container img{
max-width: 450px;
transition: all 0.3s ease-out;
cursor: pointer;
}.img-container img:hover{
transform: scale(1.2);
}
Rendre votre site Web responsive
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 propose également une gamme de tailles d’écran différentes, mais ces quatre catégories sont 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 créer une mise en page personnalisée pour les tablettes et les smartphones.
Le meilleur moyen d’obtenir un design réactif avec CSS et HTML consiste à utiliser des requêtes multimédias. Vous pouvez placer une requête multimédia dans un fichier CSS ou le HTML lien étiqueter. 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 1100px, comme vous le voyez dans la balise de lien suivante :
<link rel="stylesheet" media="screen and (max-width: 1100px)" href="css/widescreen.css">
L’insertion de la ligne de code ci-dessus dans le diriger balise 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 1100px et sous utilisera le style dans le écran large.css déposer.
Le fichier widescreen.css
/* Home */
#navbar .container h1 a span{
display: none;
}#home .home-content .text-3 span{
color: #000000;
}
/* Portfolio */
.projects{
justify-content: center;
}
.project{
flex: 0;
}
/* About */
.about-content{
flex-direction: column;
}
/* Contact */
.contact-content{
flex-direction: column;
}
Le code ci-dessus produira une mise en page réactive sur les appareils avec des tailles d’écran de 1100px 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 smartphones et tablettes en mode portrait. Il aura une largeur maximale de 760px, comme vous pouvez le voir dans la balise de lien suivante :
<link rel="stylesheet" media="screen and (max-width: 760px)" href="css/mobile.css">
Le fichier mobile.css
/* Navbar */#navbar .container h1 a span{
display: none;
}
#navbar .container .menu{
margin-left: 0rem;
}
#ham-menu{
width: 35px;
height: 30px;
margin: 30px 0 20px 20px;
cursor: pointer;
}
#navbar .container .menu-wrap .menu{
display: none;
}
.bar{
height: 5px;
width: 100%;
background-color: #ffffff;
display: block;
border-radius: 5px;
transition: 0.3s ease;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Home */
#home{
display: flex;
background: url("/images/home.jpg") no-repeat center;
height: 100vh;
}
#home .container{
margin: 6rem 1rem 2rem 1rem;
padding: 2rem;
}
#home .home-content .text-1{
font-size: 20px;
margin: 1.2rem;
}
#home .home-content .text-2{
font-size: 45px;
font-weight: 500;
margin: 1rem;
}
#home .home-content .text-3{
font-size: 22px;
margin: 1.2rem;
}
#home .home-content .text-3 span{
color: #0000ff;
font-weight: 600;
}
#home .container{
margin-left: 4.5rem;
}
/* About */
#about .container{
padding: 0;
}
/* Contact */
#contact .container{
padding: 0;
}
Le fichier ci-dessus produira la mise en page de smartphone réactive suivante :
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 frontaux et même des modèles sur des services comme Joomla facilitent les conceptions interactives réactives.
Lire la suite
A propos de l’auteur
— to www.makeuseof.com
French
Arabic
Chinese (Simplified)
English
German
Italian
Russian
Spanish