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);
})
}
j'ai donc voulu inclure ce code directement dans la partie
if(userPosition >= prezPosition){...}
mais cela fait buguer le texte en question. Quel son donc les solutions pour que celui-ci se lance avec les même conditions ? Merci
PS : remplacer on-scroll par onscroll dans le premier code (erreur volontaire pour poster mon code)
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. ).
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:
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.
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é
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:
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
Peut être que le délai et trop court pour javascript assure de les exécuté dans le bon ordre..
suggestion de présentation.
Lancement d'un script au scroll
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.