11523 sujets

JavaScript, DOM et API Web HTML5

Configuration sur script JS.

Bonjour à tous,
J'avais posté une question sur le un forum anglais qui concerne un script JS pour lancer un gif quand le scroll arrive à sa hauteur.
Seulement je n'ai pas tout saisi, petit souci de comprehension de JS =(

Pourriez vous m'éclairer s'il vous plait.

L'image que je souhaite faire apparaitre au scroll s'apelle "title-nos.gif" et celle qui sera au début "white.jpg"

Voici le code :

<script type="text/javascript">
      if(document.images){
        img1 = new Image();
        img1.src = "images/image.gif";
      }

  // for mouse wheel functionality

    $(document).on('mousewheel', function() {
        if (eventt.deltaY == -1) {
           //user scolls down 
          $('img .gif-load').attr('src','gif-image-path');
        }
        if (eventt.deltaY == 1) {
             //user scolls up
        }
    }
});
</script>


La personne qui m'a repondu m'a également parlé de rajouter le plugin js : jquery.mousewheel.js (chose que j'ai faite mais bon rien ne marche).

Une autre personne m'a également écrit en me marquant ça : use object.addEventListener('scroll', function);

Merci par avance....

Le lien du site en question : http://www.agence-n.com/
Les gif que je souhaite faire apparaitre sont les bouts de titre de section.

Ps : il y a plusieurs titres du coup si une autres solution "plus simple" que de copier 10 fois ce code, je suis preneur.
Modifié par pier17 (23 Feb 2015 - 14:32)
J'ai trouvé une autre solution mais quand je scrolle ca se masque/affiche.masque/affiche. Etrange, alors que ca fonctionne correctement sur http://jsfiddle.net/ovq0u0L5/8/

<img class="gif-load1" src="<?php bloginfo('template_directory'); ?>/img/nos-services-title.gif" data-small="<?php bloginfo('template_directory'); ?>/img/white-service.jpg" />



<script type="text/javascript">             
var largeImage = $('.gif-load1').attr('src');
            var smallImage = $('.gif-load1').attr('data-small');

            $(window).bind('scroll', function() {
                if ($(window).scrollTop() > 300) {
                    $('.gif-load1').attr('src', smallImage);

                } else {
                    $('.gif-load1').attr('src', largeImage);

                }
            });
</script>
Bien que je fasse un monologue je continue...

j'ai trouvé une nouvelle solution :

En revanche le hic c'est que j'ai plusieurs animation du même type sur ce site et il y a juste la premiere qui se lance, les autres non (pour le moment juste une seule pour m'éviter de taper du code pour rien).

Auriez vous une solution par hasard? Smiley ohwell
Merci d'avance.

Voici le site en question : www.groupensci.com/agencen/

				var serviceshide = $('.gif-service').attr('src');
				var servicesdisplay = $('.gif-service').attr('data-service');

				$(window).bind('scroll', function() {
	                if ($(window).scrollTop() > 500) {
	                  if($('.gif-service').attr('src')!=servicesdisplay) 
	                    $('.gif-service').attr('src', servicesdisplay);
	                } else {
	                   if($('.gif-service').attr('src')!=serviceshide)
	                    $('.gif-service').attr('src', serviceshide);
	                }
	            });

				var projetshide = $('.gif-projets').attr('src');
				var projetsdisplay = $('.gif-projets').attr('data-projets');

				$(window).bind('scroll', function() {
	                if ($(window).scrollTop() > 500) {
	                  if($('.gif-projets').attr('src')!=projetsdisplay) 
	                    $('.gif-projets').attr('src', projetsdisplay);
	                } else {
	                   if($('.gif-projets').attr('src')!=projetshide)
	                    $('.gif-projets').attr('src', projetshide);
	                }
	            });
pier17 a écrit :
Bien que je fasse un monologue je continue...

Mais arrête de te parler tout seul, c'est malsain ! Smiley lol

Deux choses :
- Il faut que tu colles tout ton code dans le même bind('scroll') (et pas dans plusieurs, ça simplifiera également ton code)
- Pense à sauvegarder tes objets jQuery que tu utilises plusieurs fois dans des variables (le code sera plus performant, sinon jQuery devant à chaque fois aller rechercher ton élément), e.g. :
var $gifService = $('.gif-service'), // On préférera préfixer les variables "jQuery" par un $
    serviceshide = $gifService.attr('src'),
    servicesdisplay = $gifService.data('service'); // Utilisation méthode data() de jQuery
...

Modifié par SolidSnake (27 Feb 2015 - 12:19)
SolidSnake a écrit :

Mais arrête de te parler tout seul, c'est malsain ! Smiley lol

Deux choses :
- Il faut que tu colles tout ton code dans le même bind('scroll') (et pas dans plusieurs, ça simplifiera également ton code)
- Pense à sauvegarder tes objets jQuery que tu utilises plusieurs fois dans des variables (le code sera plus performant, sinon jQuery devant à chaque fois aller rechercher ton élément), e.g. :
var $gifService = $('.gif-service'), // On préférera préfixer les variables "jQuery" par un $
    serviceshide = $gifService.attr('src'),
    servicesdisplay = $gifService.data('service'); // Utilisation méthode data() de jQuery
...


Merci mon capitaine mais comment dire... je suis une grosse m*** et je ne comprend pas grand chose au JS. =/

Aurais tu 2 minutes à m'accorder en me montrant le full code de cette opération? (si c'est pas trop long bien sur...)

Désolé de te déranger. Smiley confus

Merci par avance.
En gros un truc du genre :
var $gifService = $('.gif-service'),
    serviceshide = $gifService.attr('src'),
    servicesdisplay = $gifService.data('service'),
    $gifProjet = $('.gif-projets'),
    projetshide = $gifProjet.attr('src'),
    projetsdisplay = $gifProjet.data('projets');

$(window).bind('scroll', function() {
    if ($(window).scrollTop() > 500) {
      if($gifService.attr('src')!=servicesdisplay)  $gifService.attr('src', servicesdisplay);
      if($gifProjet.attr('src')!=projetsdisplay)    $gifProjet.attr('src', projetsdisplay);
    } else {
      if($gifService.attr('src')!=serviceshide)    $gifService.attr('src', serviceshide);
      if($gifProjet.attr('src')!=projetshide)      $gifProjet.attr('src', projetshide);
    }
});
SolidSnake a écrit :
En gros un truc du genre :
var $gifService = $('.gif-service'),
    serviceshide = $gifService.attr('src'),
    servicesdisplay = $gifService.data('service'),
    $gifProjet = $('.gif-projets'),
    projetshide = $gifProjet.attr('src'),
    projetsdisplay = $gifProjet.data('projets');

$(window).bind('scroll', function() {
    if ($(window).scrollTop() &gt; 500) {
      if($gifService.attr('src')!=servicesdisplay)  $gifService.attr('src', servicesdisplay);
      if($gifProjet.attr('src')!=projetsdisplay)    $gifProjet.attr('src', projetsdisplay);
    } else {
      if($gifService.attr('src')!=serviceshide)    $gifService.attr('src', serviceshide);
      if($gifProjet.attr('src')!=projetshide)      $gifProjet.attr('src', projetshide);
    }
});


J'ai suivi tous tes conseils mais malheureusement il n'y a que le premier gif qui se lance.
Je pense que je suis une cause perdue. Lol.

Smiley decu
Sujet clos
Aller à