Se connecter Recherche

Midnight.js est un plugin jQuery qui vous permettra de modifier l’apparence d’un élément fixe lors du scroll de la page web.

epica design

Le fonctionnement est simple: vous définissez les différentes sections entraînant un changement de style par un simple data-midnight et créez les règles CSS à appliquer sections par sections. Coté Front-end, l’élément adoptera automatiquement le style CSS établi en fonction de la section sur laquelle il se trouve.

L’élément à modifier doit obligatoirement être positionné en fixe par une propriété css position:fixed.
Vous ne pouvez modifier que les couleurs, background, taille de police.
Sur ma base Bootstrap, la navigation responsive pose quelques problèmes. Privilégiez une navigation fixed et, pour les petites résolution, sans bouton de déploiement ni de dropdown.
Si vous trouvez une méthode permettant de modifier les propriétés de type height, padding, margin, …, n’hésitez pas à en faire par dans les commentaires afin de partager vos compétences avec nous tous et que je mette cet article à jour. J’ai testé sur certains éléments mais sans réussir à obtenir un résultat probant.

Nous allons donc voir ensemble comment intégré Midnight.js dans votre page web et les bases de son utilisation. Cet article consiste à créer 6 sections et appliquer un style différent à la barre de navigation au survol de chacune d’entre-elles.

VOIR LA DEMO

TELECHARGER LES FICHIERS SOURCES DE LA DEMO

Intégrer Midnight.js

Ce plugin se résume à un fichier JS léger qui ne vient pas allourdir vos temps de chargement de page. Vous pourrez télécharger midnight.jquery.min.js sur le site officiel ou le récupérer directement dans les fichiers de démonstration. Pour l’appeler dans votre page web, la procédure est classique:

<script src="mon_chemin_de_fichier/midnight.jquery.min.js"></script>

Créer l'élément modifiable au scroll

Pour le démonstration j’utilise la navigation, symboliser par une balise <nav>, mais vous pouvez cibler tous types de balise tant que cette dernière est en position fixed. Son contenu à peu d’importance mais déterminera sa hauteur d’origine qui ne sera pas modifiable par la suite.

<nav id="mon-element-fixed" class="navbar navbar-default navbar-fixed-top" role="navigation">
 <div class="container">
 <div class="navbar-header">
 ...
 <a class="navbar-brand" href="#">Project name</a>
 </div>
 <div class="navbar-collapse collapse">
 <ul class="nav navbar-nav navbar-right">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Product</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </div>
 </div>
 </nav>

Démarrer Midnight

Pour lier votre élément à la fonctionnalité proposée par Midnight.js, une simple fonction JavaScript placé avant votre </body> suffit:

<script>
// Start midnight
$(document).ready(function(){
 // Change this to the correct selector.
 $('nav#mon-element-fixed').midnight();
});
</script>

Indiquez l’id ou la class de l’élément ciblé en remplacement de nav#mon-element-fixed, c’est aussi simple que cela.

Créer vos sections

Chaque section devant générer un changement de style doit être signalée par un attribut data-midnight auquel vous ajouterez la dénomination de class utilisée par la suite dans la création des styles CSS

<section class="section6" data-midnight="orange">
<!--
...
Votre contenu HTML de section sera ici
...
-->
</section>
<section class="section6" data-midnight="blue">
<!--
...
Votre contenu HTML de section sera ici
...
-->
</section>
<section class="section6" data-midnight="red">
<!--
...
Votre contenu HTML de section sera ici
...
-->
</section>
<!-- ainsi de suite ... -->

J’utilise ici une balise <section>, mais vous pouvez bien sur utiliser une balise <div>, <article> ou autre.

Définir les styles CSS

Nous allons maintenant créer les règles de styles, pour chaque class nommées dans l’attribut data-midnight, qui seront chargées pour l’élément fixed lorsque celui-ci survol la dites section.
En premier point, vous devez définir le style initial de l’élément. Ce style est défini par la class default qui est automatiquement ajouté à votre élément fixed lors de l’ouverture de la page sans que vous n’ayez besoin de la générée par un data-midnight.

.midnightHeader.default {background-color:#fff;color: black;}
Puis vous allez définir les styles appliqués au survol de chaque section, section qui se verra attribuée une class CSS du même nom que celui défini dans son attribut data-midnight.
.midnightHeader.blue {background-color:#17b3cb;color: white;}
.midnightHeader.blue .navbar-brand, .midnightHeader.blue .navbar-nav > li > a {color: #fff;}
.midnightHeader.red {background-color:red;color: white;}
.midnightHeader.red .navbar-brand, .midnightHeader.red .navbar-nav > li > a {color: #fff;}
.midnightHeader.orange {background-color:#ee6215;color: white;}
.midnightHeader.orange .navbar-brand, .midnightHeader.orange .navbar-nav > li > a {color: #fff;}

j’ai un peu rallongé l’écriture du CSS afin de faciliter la lecture du code pour les moins expérimentés.

Les fonctions de Midnight.js sont maintenant en place sur votre page web et vous devriez déjà pouvoir visualiser le changement au scroll (pensez à la hauteur de vos éléments si ces derniers sont vides pour l’instant). Il ne vous reste plus qu’à créer le style propre à chaque section et leur contenu. Contrairement à certaines rumeurs trainant sur le web, les différentes sections non pas besoin d’avoir la même hauteur, heureusement.
Vous pourrez vous baser sur les fichiers de démonstration pour une structure initiale ou sur la démonstration officielle utilisant, elle, un background de type image (un sprite plus exactement).
Maintenant, a vous de jouer pour vous créer un site One Page Scroll qui se démarque des autres!

Site officiel de Midnight.js

Commentaires Écrire un commentaire

  • enuzzo le 4 mars 2015 at 20 h 40 min Répondre

    Hi, i found your tutorial and decided to give a try to midnight.js with bootstrap on a site i’m developing.
    I noticed there is a bug if you try to use any dropdown menu. You can try on your demo too

    • EpicaDesign administrateurle 4 mars 2015 - 21 h 12 min Répondre

      Hello! I proceed on a test and post my result quickly

  • dh le 15 août 2015 at 16 h 37 min Répondre

    Bonjour,
    Super tuto, merci ! Une petite question : le fond des sections changent (via Midnight.js) à Xpx (hauteur de ). Dans le cas d’un menu (nav) vertical, comment faire pour que le fond change à top: 0px ? Mes lacunes en javascript font que je n’ai pas trouvé dans le fichier Midnight.js. Encore merci !


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*