Animation au scroll

canvas -  
 canvas -
Bonjour,

je souhaite insérer sur mon site des animation au scroll de la souris. En effet je souhaiterais que le texte arrive de la droite ou de la gauche lors du défilement; idem pour certaines images.
J'ai trouvé ce site mais je n'arrive pas à insérer le code (https://jackonthe.net/css3animateit/)
merci pour vos lumières
ps: j'en avais trouvé un sur codepen mais le js était dans le html ( c'est pas terrible)
canvas

Configuration: Windows / Firefox 68.0

8 réponses

  1.
    SioGabx Messages postés 260 Date d'inscription   Statut Membre Dernière intervention   100
     
    Fait en 5 minutes, c'est pas le best mais au moins c'est pas trop lourd pour des transitions au scroll.
    N'oublie pas de cliquer sur merci et de mettre en résolu.

    Pose moi des questions si tu as des problèmes avec.

    Page de test codepen : https://codepen.io/SioGabx/full/xxKdYPO 

    <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemple</title>
    <!--    On inclus jquery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style>
        div {
            /*            Style pour l'exemple*/
            width: 80%;
            height: 50vh;
            background-color: beige;
        }


        .animation {
            /*            Gestion de la durée des animations 3s = 3 secondes*/
            transition: all 3s;
        }
        body{overflow-X:hidden;max-width:100%;}

        /*        Left to right*/
        [data-scrollanim~="lefttoright"] {
            transform: translateX(-200vw);
        }

        /*        Right to left*/

        [data-scrollanim~="righttoleft"] {
            transform: translateX(200vw);
        }

        /*        Opacity*/
        [data-scrollanim~="lefttoright_opacity"] {
            opacity: 0;
            transform: translateX(-20vw);
        }

    </style>
</head>

<body>
    <div class="animation" data-scrollanim="lefttoright">I'm a special div, scroll !</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>

    <div class="animation" data-scrollanim="righttoleft">I'm a special div, j'arrive de la droite vers la gauche !</div>
    <!--   On peux culmuler deux effets ou + -->
    <div class="animation" data-scrollanim="lefttoright_opacity">Je suis une div avec deux effet opacity + left to right moving</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>
    <div>I'm a div</div>


    <script>
        //        Au scroll :
        window.onscroll = function() {
            //            Quand Jquery est load
            $(document).ready(function() {
                //                    Pour tout les element avec un effect
                $("[data-scrollanim]").each(function() {
                    if ($(this).offset().top < ($(window).scrollTop() + $(window).height())) {
                        $(this).removeAttr('data-scrollanim');
                    }
                })
            });
        }

    </script>
<!-- Made by SioGabx :3-->
</body>

</html>

    1

Discussions similaires

Dessiner un trajet sur une carte pour faire une video
Marnix1346 -
Marnix1346 -

2 réponses
Transition 'Rideau' modifier couleur
JL00700 -
Ludo -

2 réponses
powerpoint diaporama avec effet page tournée
KLOD34 -
klod34 -

4 réponses
Problème d'animation dans une présentation avec PowerPoint2016
saya2 -
saya2 -

6 réponses
Présentation Impress pour effectuer un diaporama
Petronille337 -
Raymond PENTIER -

7 réponses
Impression PDF avec animation
DJBJ -
Raymond PENTIER -

5 réponses