Discussion :

[Noctisphénix]

Bonjour à tous,
D'abord, je tiens à m'excuse si je ne suis pas dans la bonne section.
Je suis confronté à un petit soucis, je suis actuellement sur la création d'un site internet en utilisant fullpage.js que je trouve vraiment sympa.
Jusque là aucun soucis, par contre j'essaie de rajouter un effet sur l'une des sections de la page. Au défilement de celle-ci, arrivée sur une div précise, un effet de changement de couleur fond/texte doit se produire.

Le problème: il doit y avoir un conflit avec fullpage.js car mon effet ne se produit pas, par contre si je supprime l'appel de fullpage.js, mon effet fonctionne.
Etant nul dans le js, je ne sais pas comment régler le souci malgré mes différentes recherches sur le net ou différentes solutions alternatives essayées.

Je vous met mon code js de l'effet (effet visible sur codepen https://codepen.io/FFOrigine/pen/dyypQZZ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
	<script id="rendered-js">
		$(window).scroll(function () {
			$('.darktemplate').each(function () {
				if (isScrolledIntoView($(this))) {
					$(".test").addClass('darkbody');
				} else {
					$(".test").removeClass('darkbody');
				}
			});
		});
 
		function isScrolledIntoView(elem) {
			var $elem = $(elem);
			var $window = $(window);
 
			var docViewTop = $window.scrollTop();
			var docViewBottom = docViewTop + $window.height();
 
			var elemTop = $elem.offset().top;
			var elemBottom = elemTop + $elem.height();
 
			if (elemTop <= docViewBottom && elemBottom >= docViewTop) {
				return true;
			}
		}
	</script>

Je vous joint aussi le code de fullpage.js sur codepen car trop long pour le coller : https://codepen.io/FFOrigine/pen/qBBqjYm

Je vous remercie beaucoup par avance pour votre aide et vous souhaite bonne soirée

[mathieu]

quand je rajoute fullpage.js dans le codepen, je vois bien l'effet avec le fond noir.
faites un codepen avec le code complet qui ne fonctionne pas pour qu'on puisse tester.

[Noctisphénix]

Bonjour Mathieu et merci beaucoup pour la réponse,
Voici pour mon codepen :https://codepen.io/FFOrigine/pen/XWWNqYV

J'espère qu'il y a ce qu'il faut.
Comme dit dans mon premier message, si l'on supprime l'appel de fullpage.js mon effet fonctionne.
Après avoir continué mes recherches je suis tomber sur un début de piste avec une histoire de afterLoad ou onLeave.
Par contre je ne sais pas si cela est utile ou non et surtout comment l'adapter à mon histoire ^^'

Encore merci pour votre aide

[mathieu]

j'ai fait quelques tests mais j'ai n'ai pas trouvé comment régler le soucis.

voilà ce que j'ai testé si ça peux mettre quelqu'un d'autre sur la piste :
à partir du moment ou "new fullpage(" est appelé, la fonction définie dans "$(window).scroll(function ..." n'est plus appelée pendant le scroll.
en utilisant setTimeout pour lancer "$(window).scroll(function" 10 secondes après pour être sur que tout est chargé, on a le même résultat.
et si c'est l'appel à "new fullpage(" qui est lancé 10 secondes après, tout se passe bien jusqu'à cet appel et ensuite l'affichage est reset et la fonction n'est plus appelée pendant le scroll.


P.S. j'ai trouvé le soucis expliqué dans la documentation de fullPage.js :
https://github.com/alvarotrigo/fullP...nt-doesnt-work
une solution serait de ne pas faire le changement de couleur dans "$(window).scroll(function ..." mais dans un évènement géré par fullPage.js.

[Noctisphénix]

Merci de votre aide

J'ai trouvé ça mais je ne sais pas si cela peut aider : https://codepen.io/alvarotrigo/pen/XbPNQv

J'ai aussi essayé d'utiliser l'option de fullpage "scrollBar: true", cela active la scroll barre pour la totalité des sections et l'effet ce produit mais si on scroll le site complet et non dans la section concerné.