Single Page jQuery ScrollTo

Voici un mini tutoriel sur comment faire une "single page". Je vais partir sur un scroll vertical, mais le principe reste le même pour une singlepage en scroll vertical.
D'abord la structure HTML, je vais créer des balises <article> pour chaque partie de ma page. Je met un id sur chacun pour m'en servir comme ancre :

<article id="article1">
 
    <h2>Accueil</h2>
 
    <p>Nunc fermentum mauris bibendum odio volutpat facilisis. Proin 
eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, 
lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis 
accumsan turpis ante non mi? Cras id metus nec turpis rhoncus 
volutpat et dignissim ipsum.Nunc fermentum mauris bibendum 
odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum 
lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus 
lacinia nisi, sagittis accumsan turpis ante non mi? Cras id metus nec 
turpis rhoncus volutpat et dignissim ipsum.</p>
 
</article>
 
<article id="article2">
 
    <h2>News</h2>
 
    <p>Nunc fermentum mauris bibendum odio volutpat facilisis. Proin 
eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, 
lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis 
accumsan turpis ante non mi? Cras id metus nec turpis rhoncus 
volutpat et dignissim ipsum.Nunc fermentum mauris bibendum 
odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum 
lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus 
lacinia nisi, sagittis accumsan turpis ante non mi? Cras id metus nec 
turpis rhoncus volutpat et dignissim ipsum.</p>
 
</article>
 
<article id="article3">
 
    <h2>Contact</h2>
 
    <p>Nunc fermentum mauris bibendum odio volutpat facilisis. Proin 
eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, 
lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis 
accumsan turpis ante non mi? Cras id metus nec turpis rhoncus 
volutpat et dignissim ipsum.Nunc fermentum mauris bibendum 
odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum 
lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus 
lacinia nisi, sagittis accumsan turpis ante non mi? Cras id metus nec 
turpis rhoncus volutpat et dignissim ipsum.</p>
 
</article>

On va maintenant "mettre en forme" chaque article pour qu'ils soit plus haut que votre écran, afin de ne voir qu'un article à la fois.

article {height:1000px}

A noter que cette hauteur peut être calculée en javascript pour plus de précision.
Maintenant, comme pour tout site, nous allons ajouter la navigation (je vais la placer en début de page, avant les articles) :

<nav>
    <ul>
        <li><a href="#article1">Accueil</a></li>
        <li><a href="#article2">News</a></li>
        <li><a href="#article3">Contact</a></li>
    </ul>
</nav>

Alors oui, ça fonctionne, mais après avoir cliqué sur le menu, il disparait... Nous allons donc le fixer (pour ma part, je le place en haut à droite de l'écran) :

nav {position:fixed; top:20px; right:20px}

Et voilà, c'est fonctionnel ! Mais pas très sympa la transition entre les articles ? D'ailleurs, il n'y en a pas...

Transition avec le plugin jQuery ScrollTo

Pour faire une jolie transition entre les ancres, nous allons utilisé le plugin jQuery ScrollTo, qui comme son nom l'indique, va faire scroller votre page.

Nous ajoutons alors l'appel de jQuery et du plugin ScrollTo dans la balise <head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.scrollto.js"></script>

Puis sur chaque clic du menu, nous employons le plugin :

<script type="text/javascript">
    $(document).ready(function() {
 
        $("#navigation a").click(function() {
            $.scrollTo($(this).attr("href"), "slow");
            return false;
        });
 
    });
</script>

Et voilà, nous avons une jolie single page fonctionnelle, à vous de mettre en forme :)

Voir la démo

Voici un exemple de single page jQuery :
http://www.freezonline.com/

jQuery

ven, 2011-12-23 10:56 — Anonyme

Plugin ?

Je ne crois pas que le plugin soit vraiment nécessaire pour ça. Ça permet juste de diminuer un peu le code, certes. Mais peut on modifier l'easing, mettre un callback ? En plus ton selecteur est foireux : si le visiteur clique sur un lien normal, il reste bloqué sur la page ! Moi je fait comme ca :

<script type="text/javascript">
    $(document).ready(function() {
 
        $('#navigation a[href^="#"]').click(function() {
            $(document)
                .animate({
                   scrollTop : $(this).offset().top
                }, 300, "easeOutQuint");
 
            return false;
        });
 
    });
</script>

Enfin, ne prends pas non plus trop mal ce commentaire, hein ? Je m'suis inscrit a ton RSS ;)
A bientot

répondre

ven, 2011-12-23 11:16 — jarash

:)

Salut,

mon selecteur fonctionne très bien dans l'exemple, à toi de l'adapter pour d'autres besoins.

Concernant le plugin, tu as plutôt raison je dois dire. Mais je trouvais intéressant de parler de lui, car il permet de faire de jolies choses :)

répondre