Animation au scroll

- - Dernière réponse :  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
Afficher la suite 

8 réponses

Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52
0
Merci
Comment ça dans le html ? Dans des balises <script> c'est facile de l'extraire. A tu essayer ? Envoi le lien du codepen
Commenter la réponse de SioGabx
0
Merci
Bonjour,

Merci pour votre réponse.
J'avais trouvé celui ci https://codepen.io/MCarlson8198/pen/mmqGrg mais le script était dans le html. et lorsque je séparais les deux pour mettre le script dans ma feuille de script , l'effet ne fonctionnait plus.
Commenter la réponse de canvas
0
Merci
Bonjour,
J'ai trouvé ce site mais je ne parviens pas à insérer cet effet sur mon site https://wowjs.uk

voilà mon test: https://codepen.io/noviscanvas/pen/yLBMVpN
Je ne comprends pas du tout ce qui ne va pas ni comment insérer ces codes et scripts. Pouvez vous m'aider?
Merci d'avance pour votre aide
canvas
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 -
Je te le fait ce soir
Ha! Super sympa! Merci beaucoup ????
Commenter la réponse de canvas
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52
0
Merci
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>


Commenter la réponse de SioGabx
0
Merci
Bonjour SioGabx,

Lorsque j'insère le code sur ma page, (tel qu'il est là) mon hébergeur me dit que la page est trop longue. De plus, je pense que le css a une incidence sur mon menu et mon pied de page car tout est décalé. Il faut que je rajoute une div spécifique non?
Par ailleurs,
J'ai donc modifié en prenant les 2 éléments qui m'intéressaient pour alléger et le problème persiste. Je vous montre le html inséré:
<!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>
.animation {
/* Gestion de la durée des animations 3s = 3 secondes*/
transition: all 3s;
}

body{
/*Ne pas toucher*/
overflow-X:hidden;
max-width:100%;
}

/*GESTION DES ANIMATIONS*/
/* 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);
}
/*FIN GESTION DES ANIMATIONS*/
</style>
</head>

<body>

<table align="center" border="1" cellpadding="1" cellspacing="1" style="width:100%;">
<tbody>
<tr>
<td><div class="animation" data-scrollanim="lefttoright"><h1><br />
<br />
<br />
Practice with animated scrolling</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore possimus a qui, tenetur, maiores modi iste at dolore vero est laboriosam, alias voluptates id! Incidunt amet quis sunt dolorum qui.</p></div></td>
<td><div class="animation" data-scrollanim="righttoleft"><img src="https://media-cdn.tripadvisor.com/media/photo-s/13/55/83/4a/photo0jpg.jpg" /></div></td>
</tr>
</tbody>
</table>


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

</html>


Merci pour votre aide
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 > SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
-
En solution, serait de moderniser ton code html, après je sais pas combien de page tu as et combien de temps ça va te prendre...
Si tu veux le code ci-dessus je peux te le moderniser
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 > canvas -
De plus, une page trop longue xD ? Je remet pas en cause ce que tu dis mais tu es chez quel hébergeur ?
Merci SioGabx,
Et bien en fait j'ai surtout une page principale où je souhaite y insérer ces éléments d'animation.
Oui cela m'étonne aussi que ma page soit trop longue car vraiment il n'y a pas grand chose en code et en script... Mon hébergeur est wifeo (créateur de site pour débutant) et comme je souhaite personnaliser mon site au maximum, j'ajoute des effets css et js. Mais là je bloque...
Je veux bien un coup de main pour moderniser.
Sinon j'ai testé un autre code pour voir niveau "poids" (https://jsfiddle.net/k13aeqtc/) si ma page est trop longue et là il ne me dit rien. Par contre je ne parviens pas à mettre l'effet en action. Pourtant j'ai bien fait les pont entre mon html et le css et js. J'y ai également insérer les bibliothèques (peut-être l'erreur vient de là):
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
J'ai peut-être fait une erreur de retranscription?!
En tout cas merci de votre aide
Canvas
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 -
Si j'ai bien compris, wifeo te propose des template que tu peux customiser c'est ca ?
Si c'est le cas, c'est mal parti pour moderniser la page en entier.

La page que je t'ai passé et que tu as allégé donne elle aussi l'erreur comme quoi la page est trop longue ou c'est juste le css et le contenu qui bug ?
Marche t'elle quand tu enlève tes éléments à toi (genre colle la sans y faire de modification) ?

Pour le jsfiddle que tu m'as passer je peux pas regarder maintenant, je suis sur téléphone.

Je pense que c'est certainement ton hébergeur qui te joue des tour, peut être n'accepte t'il pas jquery..

Tu peux me donner l'url de ton site ou pas ?
Même quand j insère le code que vous m avez donner sans rien toucher... Cela bug.

Je cherche encore... A force je vais bien finir par trouver.
J ai demandé conseil sur le forum de mon hébergeur. On verra si j ai une réponse.
Commenter la réponse de canvas
0
Merci
Même en insérant le code sans y toucher ... Il bug et me dit que la page est trop longue, alors qu' il n y a rien d autre dessus.

Je continue de chercher. Là j ai demandé sur le forum vidéo pour voir si il y a une solution. J attend une réponse... En attendant, je continue de chercher ... Je vais bien finir par y arriver!
Commenter la réponse de Canvas
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52
0
Merci
Tient je te passe la V2 du code vu ci-dessus (grosse amélioration)
J'ai notamment enlever la librairie JQUERY pour la faire 100% en vanilla.
Essaye d'insérer le code sans y touche et dis moi si ça marche !

Lien du codepen : https://codepen.io/SioGabx/full/JjPJGOz

Code complet :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Scroll animation sans JQUERY</title>
<!--    Projet d'animation au scroll sans JQUERY fait par SioGabx-->
    <style>
        div {
            /*            Style pour l'exemple*/
            width: 80%;
            height: 50vh;
            background-color: beige;
        }


        body{
            max-width: 100%;
            overflow-x: hidden;
        }
        [data-scrollanim] {
            /*            Gestion de la durée des animations 3s = 3 secondes*/
            transition: all 3s;
        }

/*------------------------------------------Exemple d'animation------------------------------------------*/
        /*        Left to right*/
        .animation[data-scrollanim="lefttoright"] {
            transform: translateX(-200vw);
        }

        /*        Right to left*/

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

        /*        Opacity*/
        .animation[data-scrollanim="lefttoright_opacity"] {
            opacity: 0;
            transform: translateX(-20vw);
        }
        
/*        Transition de la couleur rouge à la couleur bleu à la fin*/
        .animation[data-scrollanim="color_red_to_blue"] {
            background-color: red;
        }
        .animation-end[data-scrollanim="color_red_to_blue"] {
           background-color: blue; 
        }
/*------------------------------------------FIN Exemple d'animation------------------------------------------*/

    </style>
</head>

<body>
<!--   Block d'exemple 1-->
    <div class="animation" data-scrollanim="lefttoright">Je viens de la gauche vers la droite</div>
    <div class="animation" data-scrollanim="righttoleft">Je viens de la droite vers la gauche</div>
    <div class="animation" data-scrollanim="lefttoright_opacity">Je suis une div avec deux effet opacity + je viens de la gauche vers la droite</div>
    <div class="animation" data-scrollanim="color_red_to_blue" >A la base je suis rouge puis je devient bleu</div>
    
    <!--   Block d'exemple 2-->
    <div class="animation" data-scrollanim="lefttoright">Je viens de la gauche vers la droite</div>
    <div class="animation" data-scrollanim="righttoleft">Je viens de la droite vers la gauche</div>
    <div class="animation" data-scrollanim="lefttoright_opacity">Je suis une div avec deux effet opacity + je viens de la gauche vers la droite</div>
    <div class="animation" data-scrollanim="color_red_to_blue" >A la base je suis rouge puis je devient bleu</div>

    <!--   Block d'exemple 3-->
    <div class="animation" data-scrollanim="lefttoright">Je viens de la gauche vers la droite</div>
    <div class="animation" data-scrollanim="righttoleft">Je viens de la droite vers la gauche</div>
    <div class="animation" data-scrollanim="lefttoright_opacity">Je suis une div avec deux effet opacity + je viens de la gauche vers la droite</div>
    <div class="animation" data-scrollanim="color_red_to_blue" >A la base je suis rouge puis je devient bleu</div>



    <script>
              //Initialisation
        animate();
        window.onscroll = function() {
            animate();
        }
        
        
        function animate(){
            const objects = document.getElementsByClassName("animation");
            Actualiseranimation();
            
        function getvh(vhequvalentinpx) {
        // On verifie si la fonction vh() de getvh() est prête
        if (document.getElementById("vh_referent") == null) {
        //On la crée
        createdivreference();
        }
        //Puis on tente de lancer l'operation ! Et on return le resulat
        return vh(vhequvalentinpx);


        function vh(numberofvh) {
        //Cette fonction converti les vh en px
        vh_referent.style.display = "block";
        let onevhheightinpx = vh_referent.offsetHeight;
        vh_referent.style.display = "none";
        let px = onevhheightinpx * numberofvh;
        return px;
        }

        function createdivreference() {
        //Cette fonction crée les elements necessaire à vh()
        const vh_referent = document.createElement("div");
        vh_referent.id = "vh_referent";
        vh_referent.style.display = "none";
        vh_referent.style.height = "1vh";
        vh_referent.style.position = "absolute";
        document.body.appendChild(vh_referent);
        return;
        }
        }

        function Actualiseranimation(){
        //On gere les animations, à l'actualisation de la page et au scroll
        Array.from(objects).map((item) => {
        var topheight = item.offsetTop;

        //On recupere la position de l'objet dans la page (equivalent à .offset().top en jquery)
        while (item == item.offsetParent) {
        topheight += item.offsetTop;
        }
        //90 ici est la partie de l'ecran au dessus de laquelle l'animation est joué, donc quand l'element rendre dans + de 10% de la hauteur de l'ecran.
        //Si tu souhaite que l'element soit completement dans l'ecran, remple getvh(90) par : item.offsetHeight
        if (window.scrollY > (topheight - getvh(90))) {
        //On defini que l'animation est en cours.
        item.classList.remove("animation");
        item.classList.add("animation-end");
        }
        });
        }
            return;
        }
    </script>
</body>
</html>




SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 -
Du coup, le petit html que tu m'as donner tout à l'heure, une fois modernisé ça donne ça :

codepen -> https://codepen.io/SioGabx/full/YzKQqNN

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Scroll animation sans JQUERY</title>
<!--    Projet d'animation au scroll sans JQUERY fait par SioGabx-->
    <style>
        body{
            max-width: 100%;
            overflow-x: hidden;
        }
        [data-scrollanim] {
            /*            Gestion de la durée des animations 3s = 3 secondes*/
            transition: all 3s;
        }

/*------------------------------------------Exemple d'animation------------------------------------------*/
        /*        Left to right*/
        .animation[data-scrollanim="lefttoright"] {
            transform: translateX(-100vw);
        }

        /*        Right to left*/

        .animation[data-scrollanim="righttoleft"] {
            transform: translateX(100vw);
        }

        /*        Opacity + left to right*/
        .animation[data-scrollanim="lefttoright_opacity"] {
            opacity: 0;
            transform: translateX(-20vw);
        }
        
        /*        Opacity*/
        .animation[data-scrollanim="opacity"] {
            opacity: 0;
        }
        [data-scrollanim="opacity"]{
            transition-duration: 2s;
                transition-delay: 2s
        }
        
/*        Transition de la couleur rouge à la couleur bleu à la fin*/
        .animation[data-scrollanim="color_red_to_blue"] {
            background-color: red;
        }
        .animation-end[data-scrollanim="color_red_to_blue"] {
           background-color: blue; 
        }
/*------------------------------------------FIN Exemple d'animation------------------------------------------*/

        
        #MAIN_DIV{ width :100%; margin-top: 5%;}
        #IMAGE{float:right;}
    </style>
</head>

<body>

<div id="MAIN_DIV">
<div>
<div id="IMAGE" class="animation" data-scrollanim="righttoleft">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/13/55/83/4a/photo0jpg.jpg">
</div>
<h1 class="animation" data-scrollanim="lefttoright">Practice with animated scrolling</h1><br>
<p class="animation" data-scrollanim="opacity">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore possimus a qui, tenetur, maiores modi iste at dolore vero est laboriosam, alias voluptates id! Incidunt amet quis sunt dolorum qui.
</p>
</div>
</div>

    <script>
        //Initialisation
        animate();
        window.onscroll = function() {
            animate();
        }
        
        
        function animate(){
            const objects = document.getElementsByClassName("animation");
            Actualiseranimation();
            
        function getvh(vhequvalentinpx) {
        // On verifie si la fonction vh() de getvh() est prête
        if (document.getElementById("vh_referent") == null) {
        //On la crée
        createdivreference();
        }
        //Puis on tente de lancer l'operation ! Et on return le resulat
        return vh(vhequvalentinpx);


        function vh(numberofvh) {
        //Cette fonction converti les vh en px
        vh_referent.style.display = "block";
        let onevhheightinpx = vh_referent.offsetHeight;
        vh_referent.style.display = "none";
        let px = onevhheightinpx * numberofvh;
        return px;
        }

        function createdivreference() {
        //Cette fonction crée les elements necessaire à vh()
        const vh_referent = document.createElement("div");
        vh_referent.id = "vh_referent";
        vh_referent.style.display = "none";
        vh_referent.style.height = "1vh";
        vh_referent.style.position = "absolute";
        document.body.appendChild(vh_referent);
        return;
        }
        }

        function Actualiseranimation(){
        //On gere les animations, à l'actualisation de la page et au scroll
        Array.from(objects).map((item) => {
        var topheight = item.offsetTop;

        //On recupere la position de l'objet dans la page (equivalent à .offset().top en jquery)
        while (item == item.offsetParent) {
        topheight += item.offsetTop;
        }
        //90 ici est la partie de l'ecran au dessus de laquelle l'animation est joué, donc quand l'element rendre dans + de 10% de la hauteur de l'ecran.
        //Si tu souhaite que l'element soit completement dans l'ecran, remple getvh(90) par : item.offsetHeight
        if (window.scrollY > (topheight - getvh(90))) {
        //On defini que l'animation est en cours.
        item.classList.remove("animation");
        item.classList.add("animation-end");
        }
        });
        }
            return;
        }
    </script>
</body>
</html>

Bonjour,
En ce qui concerne le 1er code, wifeo me dit toujours que la page est trop lourde. Donc je laisse tomber de ce coté là.
Par contre pour le 2eme code, je n'ai pas de problème de longueur de page mais le code crée un décalage avec mon menu et le footer. Il ne se met pas en action. Alors je vous décris comment je l'ai inséré:

cette partie dans le head
<meta charset="UTF-8">
<title>Scroll animation sans JQUERY Exemple</title>
<!-- Projet d'animation au scroll sans JQUERY fait par SioGabx-->
<style>
body{
max-width: 100%;
overflow-x: hidden;
}
[data-scrollanim] {
/* Gestion de la durée des animations 3s = 3 secondes*/
transition: all 3s;
}

/*------------------------------------------Exemple d'animation------------------------------------------*/
/* Left to right*/
.animation[data-scrollanim="lefttoright"] {
transform: translateX(-100vw);
}

/* Right to left*/

.animation[data-scrollanim="righttoleft"] {
transform: translateX(100vw);
}

/* Opacity + left to right*/
.animation[data-scrollanim="lefttoright_opacity"] {
opacity: 0;
transform: translateX(-20vw);
}

/* Opacity*/
.animation[data-scrollanim="opacity"] {
opacity: 0;
}
[data-scrollanim="opacity"]{
transition-duration: 2s;
transition-delay: 2s
}

/* Transition de la couleur rouge à la couleur bleu à la fin*/
.animation[data-scrollanim="color_red_to_blue"] {
background-color: red;
}
.animation-end[data-scrollanim="color_red_to_blue"] {
background-color: blue;
}
/*------------------------------------------FIN Exemple d'animation------------------------------------------*/


.MAIN_DIV{ clear: both;width :100%; margin-top: 5vh;margin-bottom: 5vh;}
.IMAGE img{float:right; width:30%;}
hr{clear:both;}
</style>


celle la dans le body:
<div class="MAIN_DIV">
<div>
<div class="IMAGE animation" data-scrollanim="righttoleft">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/13/55/83/4a/photo0jpg.jpg">
</div>
<h1 class="animation" data-scrollanim="lefttoright">Practice with animated scrolling</h1><br>
<p class="animation" data-scrollanim="opacity">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore possimus a qui, tenetur, maiores modi iste at dolore vero est laboriosam, alias voluptates id! Incidunt amet quis sunt dolorum qui.
</p>

</div>
  <hr>
  <div class="MAIN_DIV">
<div>
<div class="IMAGE animation" data-scrollanim="righttoleft">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/13/55/83/4a/photo0jpg.jpg">
</div>
<h1 class="animation" data-scrollanim="lefttoright">Practice with animated scrolling</h1><br>
<p class="animation" data-scrollanim="opacity">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore possimus a qui, tenetur, maiores modi iste at dolore vero est laboriosam, alias voluptates id! Incidunt amet quis sunt dolorum qui.
</p>
</div>
    
      <hr>
  <div class="MAIN_DIV">
<div>
<div class="IMAGE animation" data-scrollanim="righttoleft">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/13/55/83/4a/photo0jpg.jpg">
</div>
<h1 class="animation" data-scrollanim="lefttoright">Practice with animated scrolling</h1><br>
<p class="animation" data-scrollanim="opacity">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore possimus a qui, tenetur, maiores modi iste at dolore vero est laboriosam, alias voluptates id! Incidunt amet quis sunt dolorum qui.
</p>
</div>
    
      <hr>
  <div class="MAIN_DIV">
<div>
<div class="IMAGE animation" data-scrollanim="righttoleft">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/13/55/83/4a/photo0jpg.jpg">
</div>
<h1 class="animation" data-scrollanim="lefttoright">Practice with animated scrolling</h1><br>
<p class="animation" data-scrollanim="opacity">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore possimus a qui, tenetur, maiores modi iste at dolore vero est laboriosam, alias voluptates id! Incidunt amet quis sunt dolorum qui.
</p>
</div>


et celle la dans une feuille de script avec un lien fait vers cette feuille dans le html:
//Initialisation
        animate();
        window.onscroll = function() {
            animate();
        }
        
        
        function animate(){
            const objects = document.getElementsByClassName("animation");
            Actualiseranimation();
            
        function getvh(vhequvalentinpx) {
        // On verifie si la fonction vh() de getvh() est prête
        if (document.getElementById("vh_referent") == null) {
        //On la crée
        createdivreference();
        }
        //Puis on tente de lancer l'operation ! Et on return le resulat
        return vh(vhequvalentinpx);


        function vh(numberofvh) {
        //Cette fonction converti les vh en px
        vh_referent.style.display = "block";
        let onevhheightinpx = vh_referent.offsetHeight;
        vh_referent.style.display = "none";
        let px = onevhheightinpx * numberofvh;
        return px;
        }

        function createdivreference() {
        //Cette fonction crée les elements necessaire à vh()
        const vh_referent = document.createElement("div");
        vh_referent.id = "vh_referent";
        vh_referent.style.display = "none";
        vh_referent.style.height = "1vh";
        vh_referent.style.position = "absolute";
        document.body.appendChild(vh_referent);
        return;
        }
        }

        function Actualiseranimation(){
        //On gere les animations, à l'actualisation de la page et au scroll
        Array.from(objects).map((item) => {
        var topheight = item.offsetTop;

        //On recupere la position de l'objet dans la page (equivalent à .offset().top en jquery)
        while (item == item.offsetParent) {
        topheight += item.offsetTop;
        }
        //90 ici est la partie de l'ecran au dessus de laquelle l'animation est joué, donc quand l'element rendre dans + de 10% de la hauteur de l'ecran.
        //Si tu souhaite que l'element soit completement dans l'ecran, remple getvh(90) par : item.offsetHeight
        if (window.scrollY > (topheight - getvh(95))) {
        //On defini que l'animation est en cours.
        item.classList.remove("animation");
        item.classList.add("animation-end");
        }
        });
        }
            return;
        }


Ai je fait une erreur?
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 > canvas -
Re- tu pourrais m'envoyer le code complet (css, html, javascript) de la page que tu souhaites animé avec le menu, footer...pour que je regarde ce qui ne vas pas ?
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 > SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
-
Par contre c'est vraiment du foutage de gueule le truc de page trop longue 0.o

Edit : en cherchant sur google j'ai trouvé ceci :

http://www.wifeo.com/nouveautes.php

Il explique ici que il "t'aide" en évitant les page trop longue (pff)

Sinon, il explique aussi comment animé des elements avec LEUR système..
Du coup, je t'invite plutôt à regarder ça.
http://demonstration.wifeo.com/avec-des-animations.php

Je t'invite donc à suivre leurs tuto.

Le sujets étant résolu, je t'invite à le clore (et n'hésite pas à cliquer sur "merci" ;) )

Bonjour SioGabx,
Alors, j'aurai adoré utiliser ces effets directement sur le site de wifeo mais la démo qu'ils ont faite n'est pas encore active. Elle correspond au "nouveau wifeo" , il n'est donc pas encore possible de l utiliser...
Je vais continuer de chercher...
Commenter la réponse de SioGabx
0
Merci
Bonjour,
Après avoir retourner le problème dans tous les sens,
Je souhaite effectuer un dernier test : https://codepen.io/noviscanvas/pen/gOYxZRV

Pouvez vous me dire ce qui ne fonctionne pas?
Merci beaucoup

Je testerai par la suite sur mon site mais après je me verrai abandonner (ça m'enerve de ne pas comprendre ce qu il ne va pas... mais bon...)

Merci beaucoup pour cette aide

canvas
SioGabx
Messages postés
248
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
8 septembre 2019
52 -
Déjà tu as mis du html dans le css. J'ai pas de pc je peux pas t'en dire plus...
Oui j'ai vu... j'ai modifié...
Vous pouvez vérifier : https://codepen.io/noviscanvas/pen/gOYxZRV

ce qui pourrait bloquer c'est ce que j'ai mis dans le <head>, sur codepen, il affiche erreur...
merci pour vos lumières
Commenter la réponse de canvas