[Résolu]Scrolling animé jQuery

[SamLi]

Bonjour,

Dans ce tutoriel nous allons apprendre comment obtenir un scrolling fluide animé lors du clic sur une ancre pour votre site.
Par exemple lorsque vous utiliserez l'ancre "haut de page", le site défilera vers le haut d'une manière plus sympathique que la remontée direct avec juste HTML.

Ce tutoriel est basé sur le tutoriel vidéo visionné sur le site Grafikart.fr dont le code a été modifié pour s'adapter à cmsms par Jissey

Rappel : Faire une ancre

Pour créer une ancre avec cmsms il faut utiliser le tag suivant qui va créer le lien pointant vers l'ancre

Code :

{anchor anchor='top' title='Remonter' text='Haut de page'}

à lequel il faut associer soit l'ancre

Code :

<a name="top">

ou bien l'id d'un élement par exemple div

Code :

<div id="top">

Première partie : votre page

Afin de pouvoir avoir ce type d'effet il vous faut une page dans laquelle vous naviguez avec des ancres. Il peut s'agir d'un simple "haut de page" ou bien contenir plusieurs éléments.

Pour l'exemple on peut utiliser la page test de Jissey que vous devez insérer dans le contenu de votre page (en ayant décoché WYSIWYG)

Code :

<p><strong><a name="top"></a>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu</p>
<p> </p>
<p><strong><a name="par1"></a>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu</p>
<p><strong><a name="par2"></a>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsu.</p>
<p> </p>
<p>{anchor anchor='top' title='Remonter' text='Haut de page'}</p>
<p>{anchor anchor='par1' title='Remonter' text='Paragraphe 1'}</p>
<p>{anchor anchor='par2' title='Remonter' text='Paragraphe 2'}</p>

A ce stade, les liens vous redirigent respectivement vers le haut de la page, le paragraphe 1 ou 2, mais de façon directe est brutale.
Nous allons maintenant ajouter une petite animation de défilement fluide avec Jquery.

Troisième partie : Jquery

La première étape est de télécharger Jquery Page de téléchargement,
vous pouvez le renommer en jquery.js pour que cela soit plus simple et le placer à la racine de votre site ou dans un autre dossier.
Pour ma part, je l'ai placé à la racine.

Il faut maintenant appeler ce fichier à partir du gabarit de votre CMS. Pour cela ajouté la ligne suivante entre les balises

Code :

{literal}{/literal}

Code :

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

Vous pouvez aussi plutôt appeler ce fichier à partir de l'API de google via la ligne

Code :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Ensuite, il vous faut créer un nouveau fichier que vous pourrez apeller scroll.js dans lequel vous copierez le code suivant

Code :

$(document).ready(function(){
    $('a[href*=#]').click(function(){
        href=$(this).attr('href');
        diese=href.indexOf('#');
        cible=href.substr(diese,href.length-diese)
        if($(cible).length>=1){
            hauteur=$(cible).offset().top;
        }
        else{
            hauteur=$("a[name="+cible.substr(1,cible.length-1)+"]").offset().top;
       }
        $('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint');
        return false;
        
    });
    
});

Energistrez le fichier et placez le dans le même répertoire que jquery.js

Il vous faut l'appeler par le gabarit de la même manière que jquery.js, ajoutez simplement la ligne

Code :

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

Vous obtenez alors quelque chose comme ceci :

Code :

{literal}
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scroll.js"></script>
{/literal}

A ce stade l'animation doit fonctionner lorsque vous cliquez sur une ancre.
Vous pouvez modifier la vitesse dans le fichier scroll.js en modifiant la valeur numérique dans la ligne

Code :

$('html,body').animate({scrollTop:hauteur},1000);

Cette valeur numérique règle la durée de l'animation en ms, ici donc 1 sec.

Facultatif : ajouter un effet d'accélération.

Vous pouvez rajouter un effet d'accélération à l'animation qui dans ce cas précis donnera une forte accélération au début du scroll puis à la fin un ralentissement (la vitesse va suivre une courbe logarithmique).

Pour cela il vous faut télécharger le fichier Jquery easing que vous pouvez renommer en jquery-easing.js pour plus de simplicité
Sur cette page vous trouverez aussi les différents types d'animations possible. Ici on utilisera easeOutQuint

Copiez ce fichier dans le répertoire contenant jquery.js et scroll.js.

Là aussi il faut appeler le fichier dans le gabarit du cms avec la ligne

Code :

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

Qu'il vous faudra insérer entre les deux autres de manière à obtenir quelque chose comme cela

Code :

{literal}
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-easing.js"></script>
<script type="text/javascript" src="scroll.js"></script>
{/literal}

Pour finir il vous faudra modifier la ligne

Code :

$('html,body').animate({scrollTop:hauteur},1000);

en

Code :

$('html,body').animate({scrollTop:hauteur},1000,'easeOutQuint');

pour paramétrer l'accélération de votre animation


------


Voilà le tutoriel est fini, merci à Jissey et à Grafikart.fr. Si quelque chose ne vas pas avec ce tuto, vous pouvez regarder suivre la vidéo en utilisant le code fourni ici pour scroll.js.