ESTHÉTIQUE
SIMPLICITÉ
EFFICACITÉ

Aneartiste sur deviantartAneartiste sur twitter Aneartiste sur scoop-it

Chapitres imbriqués (No jQuery)

Du swing dans le javascript

Les bibliothèques jQuery et similaires sont idéales pour prendre en charge des choses comme les opérations asynchrones (AJAX, Deferreds, etc.) et assurer la compatibilité entre plusieurs navigateurs différents. Mais l'inconvénient (relatif) peut-être le poids de la bibliothèque, parfois supérieur à 100 Ko. Des alternatives comme Javascript Vanilla représenteront alors le meilleur choix pour alléger la page. Toutefois, si vous envisagez de n'utiliser que très peu de JavaScript, centré sur des manipulation DOM, il sera certainement plus efficace ,en termes de performance et de poids en octets, de coder directement en JavaScript simple. L'animation présentée ici s'exécute principalement à l'aide du CSS et ne nécessite qu'un minimum d'instructions javascript : 408 octets non compressés. L'effet consiste à ne montrer que les titres des chapitres présent sur la page et à n'afficher de manière alternée que le contenu de celui en cours de lecture. Ce dispositif peut être propice dans le cas où la nécessité d'un aperçu global doit se concilier avec une surface d'affichage réduite. Dans cette situation, on exclut temporairement certaines parties du message pour mieux en dévoiler le sens général.

Aperçu chapitres untriqués,Capture d'écranCapture d'écran

« Imaginer, c'est se restreindre, c'est exclure. »
—Emil Cioran


Utilisation des @keyframes

Au niveau de la page html, on se contente d'une liste ul/li pour organiser les chapitres. L'animation de met en place avec l'instauration de deux keyframes afin de planifier l'ouverture et le repli des espaces de textes. Pour rappel, la règle @keyframes permet de définir les étapes qui composent la séquence d'une animation CSS. On utilisera ensuite ce nom avec la propriété animation-name afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle @keyframes peut contenir une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape. La partie css se présente comme suit et sera commandé, au clic sur l'élément ciblé, par une très succincte fonction javascript.


@keyframes slidedown {
0% {height: 30px;}
100% {height: 180px;}
}

#nav1.slideLess, #nav2.slideLess, #nav3.slideLess, #nav4.slideLess, #nav5.slideLess {
animation-delay: 0.1s;
animation-duration: 0.8s;
animation-name: slideup;
animation-fill-mode:backwards;
}

@keyframes slideup {
0% {height: 180px;}
100% {height: 30px;}
}

Complétée par la fonction :


function slideChap(idt) {
const nav = document.getElementById('nav'+idt);
// Referme les espaces dépliés
for(i=1;i<6;i++) {
let initNav = document.getElementById('nav'+i);
if(initNav.className == 'slideMore') {
initNav.className = 'slideLess';
};
};
// Déplie la cible choisie
if (nav.className != 'slideMore') {
nav.className = 'slideMore';
};
};

Ce qui donne le résultat suivant :

« Le swing, c'est une manière d’interpréter le tempo même si c’est du binaire ; qui peut dire où ça commence et où ça s’arrête ? »
—Didier Lockwood

Les effets de slidedown et slideup s'applique avec un volontaire effet de décalage, la durée du tempo de la deuxième animation représentant le double de la précédente. ce qui donne le swing particulier de l'animation. Mais on peut facilement les modifier, si l'on préfère une mise en œuvre plus austère. La version fonctionnelle de la démo est à télécharger ici. Elle se compose de trois fichiers : javascript, css, et html pour un poids total de 1,5ko.

publié le 16/01/2022, à 18h32 par Frédéric Schäfer

Précédentsuivant