AccueilRechercherS'enregistrerConnexion

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.


    Animer un personnage au scroll (javascript)

    MARLEY SMITH.
    MARLEY SMITH.
    FémininAge : 25Messages : 156

    le Ven 11 Oct 2019 - 22:14

    Bonjour/bonsoir :gentleman:
    Je viens vous voir parce que jusqu'ici j'ai souvent eu réponse à mes questions sur Never Utopia question code :coeur: Pour mon cours, je me suis lancée dans un projet personnel qui mélange langage informatique (javascript/css/html) et design.
    Donc, le scroll de mon projet se fait horizontalement. Je cherche à animer mon personnage au scroll. Alors, j'ai trouvé une stratégie que je n'arrive pas à écrire en javascript. :ordi:
    J'aimerais qu'au scroll de mon body, une image s'anime (donc mon personnage qui bouge), mais quand j'arrête le scroll, une autre image s'active (celle où mon personnage arrête de marcher).
    https://scontent-cdt1-1.xx.fbcdn.net/v/t1.15752-9/71878588_1161506040725315_1383079134028103680_n.png?_nc_cat=103&_nc_oc=AQkUOY_6mRk5GzpVEkGRHKKs1UmuP6XkAaESykKk0bIAM7feeW99kV1M8kJoTSOfSPZSAUpZ0HnGinjkh899LHbE&_nc_ht=scontent-cdt1-1.xx&oh=9b64997bc8fa3b2eb60185b745ad1db5&oe=5E1C0796

    (Ceci n'est pas le code entier de mon projet, j'ai ouvert une autre feuille pour faire des essais par rapport à ce code)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <html>
    <head>
    <STYLE type="text/css">
    body {padding:0;
    margin:0;
    overflow-x: auto;
    overflow-y: hidden;width:4000px;
    height:800px;}

    #character {position:fixed;margin:auto;}</style>
      </head>
      <body>
        <img id="character" src="https://images2.imgbox.com/93/b1/PS2ERPwE_o.gif"/>
           
            <script>document.getElementById("body").onscroll = function() {
        function character() {
            var i = true;
            if(i) {
              document.getElementById("character").src = "https://images2.imgbox.com/93/b1/PS2ERPwE_o.gif";

            } else {
              document.getElementById("character").src = "https://images2.imgbox.com/63/83/cawxrxTu_o.gif";}
          }
        </script>
      </body>
      </html>

    Merci à la personne ou aux personnes qui me viendront en aide :lovebomb:

      La date/heure actuelle est Mar 22 Oct 2019 - 18:20