2016-07-21 20 views
-1

Also ich versuche, ein Bild zu bekommen, um einen Parallax-Scroll-Effekt zu haben, aber es funktioniert nicht. Haben Sie eine Idee, warum es nicht funktioniert?Parallax Image Scrolling funktioniert nicht

$(function() { 

// Cache the Window object 
var $window = $(window); 

// Parallax Backgrounds 
// Tutorial: http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641 



$('section[data-type="background"]').each(function(){ 
     var $bgobj = $(this); // assigning the object 

     $(window).scroll(function() { 

      // Scroll the background at var speed 
      // the yPos is a negative value because we're scrolling it UP!        
      var yPos = -($window.scrollTop()/$bgobj.data('speed')); 

      // Put together our final background position 
      var coords = '50% '+ yPos + 'px'; 

      // Move the background 
      $bgobj.css({ backgroundPosition: coords }); 

     }); // end window scroll 
    }); 

}); 

https://jsfiddle.net/0382k30q/

+0

Was bedeutet "nicht funktioniert"? Welche Fehler bekommst du? Was sollte passieren, ist das nicht? Eine Sache, die ich bemerkte, ist, dass Sie vergaß, jQuery in Ihre Geige zu integrieren – j08691

+0

Das Bild im Hintergrund soll mit einer anderen Geschwindigkeit und Ihrem Browser scrollen, um den Effekt zu erzielen, dass es auf einer Entfernung ist. Im Grunde bewegt sich das Bild nicht. –

+0

* Fragen, die Debugging-Hilfe suchen ("Warum funktioniert dieser Code nicht?") Müssen das gewünschte Verhalten, ein bestimmtes Problem oder einen Fehler und den kürzesten Code enthalten, der für die Reproduktion in der Frage erforderlich ist. Fragen ohne eine klare Problemstellung sind für andere Leser nicht nützlich. Siehe: Erstellen eines [mcve]. * In diesem Beitrag ist nicht genügend Code vorhanden, um das Problem zu reproduzieren. Der Code in deiner Geige muss auch in der Frage sein. – BSMP

Antwort

0

Sie müssen dies ändern:

$('section[data-type="background"]').each(function(){... 

dazu:

$('div[data-type="background"]').each(function(){... 

Die Hintergründe sind nicht auf das Profilelement angewandt. Sie werden auf ein div-Element angewendet.

Vergessen Sie auch nicht, JQuery/JQuery UI in Ihre Fiddle zu integrieren.

Aktualisiert Fiddle: https://jsfiddle.net/0382k30q/7/