Bonjour j'ai un petit souci avec un script que j'aimerais lancer au scroll, j'aimerais que celui-ci se déclenche quand l'utilisateur est à un endroit précis de la page.

J'ai déjà un script qui fonctionne très bien pour cette méthode :

window.on-scroll=function(){
  var animtxt = document.querySelectorAll('.ffanim');
  var anim = document.querySelectorAll('.progress__bar');
  var cr = document.querySelectorAll('.cr');
  var compe = document.getElementById('compe');
  var pres = document.getElementById('pres');
  var prezPosition = pres.offsetTop - 60;
  var compePosition = compe.offsetTop - 60;
  var userPosition = document.querySelector("html").scrollTop;

  for(leti=0; i<anim.length; i++){
    if(userPosition >= compePosition){
      anim[i].style.animationPlayState = 'running';
    }
  }
  for(leti=0; i<animtxt.length; i++){
    if(userPosition >= prezPosition){
      animtxt[i].classList.toggle('is-in-viewport');
    }
  }
  for(leti=0; i<cr.length; i++){
    if(userPosition >= prezPosition){
      cr[i].style.animationPlayState = 'running';
    }
  }
}

 Ici il s'agit de 3 animations scss qui se lancent parfaitement à l'endroit voulu. Le souci c'est que j'ai une autre animation entièrement en JS que je voulais inclure directement de ce code :

setTimeout(animate_text, 5000);
            function animate_text(){
                let delay = 11;
                let del_start = 0;
                let contents;
                let letters;
                let elem = document.querySelector('.ff__5__area__txt');
                contents = elem.textContent.trim();
                elem.textContent = "";
                letters = contents.split("");
                elem.style.visibility = 'visible';

                letters.forEach(function(letter, index1){
                    setTimeout(function(){
                        elem.textContent += letter;
                    }, 
                    del_start + delay * index1);

                })
                
            }

if(userPosition >= prezPosition){...}

-
Edité par d3LTa7 15 octobre 2021 à 12:23:23

Pour pouvoir poster un bloc code javascript, il faut faire une "erreur volontaire" sur les propriétés liées aux eventListeners ( onclick, onscroll, etc. ).

Ex: remplacer "onscroll" par "on-scroll".

Bonjour je ne suis pas bien sûr de comprendre le comportement exact du bug visuel, mais le code de dernière animation, celle qui pose problème,

ajoute des lettres avec délaie dans un élément du document, l'élément change de dimension (sur la largeur) au fur et à mesure que les lettres y sont inséré, si des éléments existe à droite du texte animé, un "pseudo écart" s'ajoute au fur et à mesure que les lettres sont ajouté, se qui peut créé un genre de bug visuel car tous le contenue de droite et décalé de la taille de la lettre (de la dimension que la lettre ajoute au conteneur de lettres soit .ff__5__area__txt), si ces ce beug que tu veut réglé je pense que tu peut mettre chaque lettre dans une balise span du genre:

<p class="ff__5__area__txt">
    <span>H</span>
    <span>E</span>
    <span>L</span>
    <span>L</span>
    <span>O</span>
</p>

Mettre en visibility hidden toutes les lettres pour quelle ne soit pas visible (mais quelle conserve leurs dimension, grace à visibility hidden)

Et dans l'animation faire passé tour à tour les lettres de visibility hidden vers visibility visible

    function animate_text(){
        let delay = 11;
        let del_start = 0;
        let contents;
        let letters = document.querySelectorAll('.ff__5__area__txt span');

        letters.forEach(function(letter, index1){
            setTimeout(function(){
                letter.visibility = "visible";
            }, del_start + delay * index1);

        })

    }

Si le texte dans le document et toujours le même tu peut peut-être simplifié le problème en utilisant les animations CSS qui sont plus simple à mettre en place que des animation avec Javascript.

Il y à même un mini cours openclassrooms sur animations avec CSS

-
Edité par SamuelGaborieau3 19 octobre 2021 à 4:34:48

Merci de ta réponse... En faite il s'agit d'un d'un texte area qui doit se remplir :

https://codepen.io/OliveSept/pen/KKqWaap

j'aurais ptet du commencer par ça...

 Comme tu peux le voir il y a différents champs qui se remplissent avec de l'animation sass mais il y a une partie que je n'arrivais pas à faire en sass : le textarea. Du coup je l'ai fait en JS... Mais pour gérer l'animation au scroll ça devient compliqué

J'ai deja suivi le cours de OCR sur les anim

Rebonjour, de mon côté le bug se fait au niveau de l'ajout des lettres qui ne sont pas fait dans le bon ordres ce qui donnes un texte aléatoire (qui ressemble à du lorem ipsum) au lieu du texte original dans le HTML. En donnant un délai plus grand au setTimeout les lettres sont ajouté dans le bon ordres:

                letters.forEach(function(letter, index1){
                    setTimeout(function(){
                        elem.textContent += letter;
                    }, 
                    2000 + delay * index1);

                }) 

Je ne c'est pas exactement de quoi cela vient mais le délai original était vraiment court 0 milli secondes pour la première et 11 mili pour la la 2 iem lettre

let delay = 11;
let del_start = 0;

del_start + delay * index1
0 + 11 * 0 == 0
0 + 11 * 1 == 11
0 + 11 * 2 == 22

Peut être que le délai et trop court pour javascript assure de les exécuté dans le bon ordre..