Animation au scroll

Fermé
canvas - 20 août 2019 à 11:50
 canvas - 3 sept. 2019 à 11:32
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

SioGabx Messages postés 262 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 97
27 août 2019 à 21:58
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