Probleme animate en fonction du scrolltop

Fermé

david - 3 juin 2016 à 16:41
david - 6 juin 2016 à 11:27

Bonjour,

J'ai un souci avec la fonction animate:

J'ai une image placée en dehors de l'écran via le css.
Quand je scroll, lorsque scrolltop est supérieur à 300, je fais apparaitre mon image avec la fonction animate. ça ça marche!
Par contre quand mon scrolltop est supérieur à 500 je veux faire bouger à nouveau mon image avec la fonction animate et là ça marche pas, je comprend pas pourquoi.
Je peux faire bouger une autre image mais pas plusieurs fois la même...
auriez vous une idée?

Voilà mon code:


$(document).ready(function () {
		$(window).scroll(function() { 

			var scrollTop = parseInt($(window).scrollTop());
			
			if (scrollTop>300 && scrollTop<500){
				$('#mario').animate({left:'40%',top:'140%'},600);
			}
			if (scrollTop>500){
				$('#mario').animate({left:'50%',top:'150%'},600);
			}
			if (scrollTop>500){
				$('#luigi').animate({left:'35%',top:'122%'},600);
			}
		});
})

Merci infiniment!!!

A voir également:

Probleme animate en fonction du scrolltop
Fonction si et - Guide
Fonction somme excel - Guide
Fonction moyenne excel - Guide
Fonctionnement du protocole http - Guide
Animate me - Télécharger - Animation

3 réponses

Réponse 1 / 3

dovrak
3 juin 2016 à 21:32

Salut,
curieux en effet.
Peut être en remettant l'élément à ses dimensions originales avant d'appliquer animate() , à tester.

Réponse 2 / 3

david
6 juin 2016 à 10:58

J'ai essayer de remplacer les % par des px mais ça change rien, j'ai simplifié mon code au max et pas mieux.
En fait le deuxième déplacement fonctionne mais après une dizaine de secondes...
J'y comprend rien...

Réponse 3 / 3

david
6 juin 2016 à 11:27

C'est bon j'ai trouvé, en fait apparement ça lançait plusieurs animations en même temps. Au cas ou ça pourrait aider quelqu'un voila mon nouveau code.

sinon on peut juste mettre un .stop() avant le animate mais je trouve que l'effet est moins fluide.


$(document).ready(function () {
		var animScroll;

		$(window).scroll(function() { 
			if (animScroll) return;
			
			var myHeight = $(window).height();
			$('#test3').text(myHeight);

		    function taillescroll(val) {
				return ((val*myHeight)/923);
			}
			var scrollTop = parseInt($(window).scrollTop());
			$('#test2').text(scrollTop);
			
			if (scrollTop>taillescroll(300) && scrollTop<taillescroll(1100)){
				animScroll = true;
				$('#mario').animate({left:'40%',top:'140%'},600, function()
				{
					animScroll = false;
				});
			}
			if (scrollTop>taillescroll(1100)){
				animScroll = true;
				$('#mario').animate({left:'-20%',top:'50%'},600, function()
				{
					animScroll = false;
				});
			}
			if (scrollTop>taillescroll(500)){
				animScroll = true;
				$('#luigi').animate({left:'35%',top:'122%'},600, function()
				{
					animScroll = false;
				});
			}
		});
})

Discussions similaires

comment contourner la fonction FILTRE

Excel:récupérer le contenu d'une cellule en fonction d'une autre

Remplir une cellule (texte) en fonction d'une autre (texte).

je veut créer des codes

Message "cette fonction n'est pas disponible actuellement"

Discussions similaires

Newsletters