Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Effet Smoothscroll (défilement fluide)

    Partagez
    MasculinAge : 29Message(s) : 5736
    Riku Asakura
    le Dim 14 Aoû 2011 - 3:01
    Hello,

    Vous vous souvenez peut-être de ce script que je vous avez fourni pour faire du défilement fluide sur vos forums.
    Il était long, pas facile à mettre en place...
    Il est là d'ailleurs : http://www.never-utopia.com/t19393-effet-visuel-scroll-fluide


    Et bien aujourd'hui je vous en propose un tout neuf qui utilise jQuery, la bibliothèque javascript chargée automatiquement par vos forums.
    Voici le code :

    Code:
    <script type="text/javascript">
    $(document).ready( function() {

       var speedy = 400;

       function scrollTo(element) {
          $(element).click(function(){
             var goscroll = false;
             var the_hash = $(this).attr("href");
             var regex = new RegExp("(.*)\#(.*)","gi");

             if(the_hash.match("\#")) {

                the_hash = the_hash.replace(regex,"$2");

                if($("#"+the_hash).size()>0) {
                   the_element = "#" + the_hash;
                   goscroll = true;
                }
                else if($("a[name=" + hash + "]").size()>0) {
                   the_element = "a[name=" + the_hash + "]";
                goscroll = true;
                }
                   
                if(goscroll) {
                   var container = 'html';
                   if ($.browser.webkit) container = 'body';
                   $(container).animate({
                      scrollTop:$(the_element).offset().top
                   }, speedy);
                   return false;
                }

             }
          });
       }
    }

    scrollTo('a');
    </script>

    Ce code est à placer dans votre template Overall_header juste avant < /head >.

    D'après les fonctions utilisées, ce code devrait fonctionner sur tous les navigateurs.
    Pour le tester il suffit de cliquer sur les boutons "Top" et "Bottom" disséminés un peu partout dans les topics :)

    Pour personnaliser la vitesse d'animation, il suffit de changer la valeur de la première variable nommée speedy.

    Si vous avez des questions je suis là.
    Amusez-vous bien !

    Info complémentaires
    - Taille du script : 0,596 ko
    - Version 1.5 (dernière màj : optimisation pour les liens absolus)
    - Version originale par Riku Asakura
    - Creative Commons (pas d'utilisation commerciale, partage à l'identique, citation de l'auteur)
    - Compatibilité : Firefox 2+, Opera 9+, Internet Explorer 6+, Chrome 10+, Safari 4+


    Dernière édition par Riku Asakura le Jeu 17 Nov 2011 - 0:07, édité 3 fois



    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Dim 14 Aoû 2011 - 19:05
    effet intéressant, j'avais vu la première version, mais j'avais perdu la page ^^ (et je ne me souvenais pas que c'était sur NU)

    juste une question (comme toujours ^^) : pourquoi tu utilise body et html en même temps ?

    merci
    MasculinAge : 29Message(s) : 5736
    Riku Asakura
    le Mar 16 Aoû 2011 - 0:15
    Hello,

    C'est une erreur, il vaut mieux utiliser html uniquement, mais body convient également, tout dépend ensuite du système dans lequel tu l'utilises.
    Merci d'avoir remarqué l'erreur.

    Au plaisir Wink



    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    MasculinAge : 22Message(s) : 764
    vic_le_faucheur
    le Mar 16 Aoû 2011 - 11:00
    avec body ça ne fonctionne pas ^^ (j'ai testé sous IE et firefox)
    MasculinAge : 29Message(s) : 5736
    Riku Asakura
    le Mar 16 Aoû 2011 - 20:05
    Hello,

    Tout dépend des CSS et de ta mise en page, puisque tu es censé pouvoir faire défiler n'importe quel élément dans n'importe quel autre, à partir du moment ou le débordement et gérer en scroll.
    HTML possède cependant des CSS "system" différents de body, par défaut.

    Merci pour ta remarque vic.



    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    MasculinAge : 29Message(s) : 5736
    Riku Asakura
    le Sam 20 Aoû 2011 - 23:38
    Hello,

    C'est re-moi,
    En fait dans webkit ça ne marche pas si tu n'utilises pas body.
    Je viens de faire un test sur un autre type de script, et je me suis rendu compte que ça ne fonctionnait pas.

    Donc soit on précise systématiquement les deux, le souci étant qu'il va jouer l'animation en double en parallèle (ça ne se voit pas, mais ça fait du calcul en plus pour le processeur), soit on fait une détection de navigateur et on choisi html pour tous sauf pour webkit où on met body.

    J'édite le code pour la deuxième solution, plus propre en matière de procédé.
    Je remplace :
    Code:
    $('html').animate({
    par
    Code:
    var container = 'html';
    if ($.browser.webkit) container = 'body';
    $(container).animate({

    Bise !



    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    MasculinAge : 29Message(s) : 5736
    Riku Asakura
    le Jeu 17 Nov 2011 - 0:07
    Petite mise à jour du script avec une meilleure gestion des liens absolus.
    Bises



    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    MasculinAge : 23Message(s) : 42
    Minimoy28
    le Ven 25 Nov 2011 - 17:22
    Coucou,

    Merci pour ce code merveilleux mais j'utilise ce scroll sur mes messages mais la fluidité de fonctionne pas et je n'y connais rien en javascript. On ne peux pas utiliser ce code en le plaçant directement dans une feuille de style javascript ?

    Mini'
    MasculinAge : 29Message(s) : 5736
    Riku Asakura
    le Dim 27 Nov 2011 - 21:07
    Hello,

    Je propose de procéder ainsi car je n'ai jamais réussi à faire fonctionner les feuilles JS proposées par Forum-Actif.
    Mais c'est effectivement envisageable, il suffit de coller ce code dans une feuille JS et cela marchera de la même manière.

    L'important étant que le script doit être appelé en fin de document (avant la balise de fin BODY).

    Au plaisir Wink



    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    MasculinAge : 23Message(s) : 42
    Minimoy28
    le Jeu 1 Déc 2011 - 23:36
    Parce que j'ai utilisé ce tuto pour la fluidité et l'autre tuto vers lequel tu nous ramène. Et la fluidité ne fonctionne pas. Faut-il modifier quelque chose pour que cela fonctionne ?
    MasculinAge : 20Message(s) : 158
    titou9322
    le Mar 17 Jan 2012 - 16:54
    mais c'est quoi qui defile
    Contenu sponsorisé
    Aujourd'hui à 5:37

      La date/heure actuelle est Sam 3 Déc 2016 - 5:37