[jQuery] Parallax steuern

[mitstreiter]

Hab nen Parallaxtutorial gefunden, welches ich für meine Website verwenden möchte. Das klappt auch alles wunderbar, nur scrollt es leider zuviel.

Hier mal das Tutorial:


Ich möchte, dass die Elemente erst scrollen, wenn ich einen bestimmen Container erreicht habe/zu sehen ist. Im Moment wird ja das komplette Fenster angesprochen, also alle Container.

Hier mal mein aktuelles Script:

        $(window).bind('scroll',function(e){
            parallaxScroll();
        });

        function parallaxScroll(){
            var scrolled = $(window).scrollTop();
            $('.about .aboutStage01 div h1.a').css('top',(00-(scrolled*.5))+'px');
        }

Jemand nen Plan wie ich das am besten angehen kann? Also dass er erst ab dem Container ".about" scrollt.

Danke schonmal!

 

[Duddle]

AW: [jQuery] Parallax steuern

Die Variable scrolled legt ja fest, wie weit die einzelnen Ebenen verschoben werden. Ist scrolled 0, dann gibt es keinen Effekt. Also müssen wir scrolled so lange 0 halten, bis das gewünschte Element sichtbar ist und erst dann erhöhen.

function parallaxScroll(){
	var scrolled = $(window).scrollTop();
	var section4Top =  $('#about').offset().top - (($(document).height() - $('#about').offset().top) / 2);

	scrolled = Math.max(scrolled-section4Top, 0);

	$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
	$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
	$('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}

Für #about gibt es schon eine Zeile, die die obere Grenze als Pixelwert erkennt, also klaue ich die einfach. Dann ein einfaches Subtrahieren von der tatsächlichen Scrollposition, schon hast du deinen gewünschten Effekt.


Duddle

 

[mitstreiter]

AW: [jQuery] Parallax steuern

Hm,

passiert irgendwie garnichts, auch nicht im Firebug. Hab die Klassen und IDs soweit angepasst, dass sie richtig angesprochen werden, aber geht nichts.

 

[Duddle]

AW: [jQuery] Parallax steuern

"Geht nicht" ist keine Fehlerbeschreibung. Entweder haust du den Code hier rein oder linkst auf ihn. Bei mir, mit angepasster Demo, funktioniert es.


Duddle

 

[mitstreiter]

AW: [jQuery] Parallax steuern

hi, hier mal der code

function parallaxScroll(){
            var scrolled = $(window).scrollTop();
            var section4Top =  $('#chapter-3').offset().top - (($(document).height() - $('#chapter-3').offset().top) / 2);

            scrolled = Math.max(scrolled-section4Top, 0);

            $('.aboutStage01 h1.a').css('top',(0-(scrolled*.75))+'px');
        }

#chapter-3 ist der Container wo das zu scrollende Zeugs drinnen ist, hierbei soll die h1 verschoben werden.

 

[Duddle]

AW: [jQuery] Parallax steuern

Das reicht nicht. Es könnten sich so viele Fehler in den Rest des Codes geschlichen haben.

Probier es erstmal manuell. Wenn du das betreffende Element nicht mit statischen CSS-Anweisungen korrekt positionieren kannst, hilft JS auch nicht.
Sobald das funktioniert, schau dir schrittweise den Inhalt der Variablen an, die der Code erzeugt und wie sie die Elemente beeinflussen.


Duddle

 

[mitstreiter]

AW: [jQuery] Parallax steuern

So, hab jetzt mal schnell ne Demo gebaut. Kannst ja mal rüber schauen .

http://www.underground-germany.de/sonstiges/parallaxdemo/

Im 3. Container ist eine Headline die sich bewegen sollte.

Finde den Fehler nicht. Danke schonmal!

 

[Duddle]

AW: [jQuery] Parallax steuern

Du rufst die Funktion nie auf, sondern definierst sie nur. In deinem ersten Post hast du den notwendigen Code schon gehabt:

$(window).bind('scroll',function(e){
            parallaxScroll();
        });

Duddle

 

[mitstreiter]

Ja, irgendwie war ich blind . Habs jetzt hin bekommen! Die Demo hab ich aktualisiert. Kannst es dir ja mal ansehen. Da es mir zu weit oben gestartet ist, hab ich einen Wert verändert.

$('h1.scrollMe').css('top',(350-(scrolled*.20))+'px');

Habe aus der "0", eine "350 gemacht".

Vielen Dank nochmal!

Hab mal noch eine Frage bzgl. Animation erst abspielen, wenn Container zu sehen ist. Wie muss ich den Code schreiben, dass z.B. ein Element, nehmen wir eine H1 erst eingefadet wird, wenn ich den Container sehe?

Fadein, nur was muss für eine Funktion rum, wenn ich z.B Container03 zu sehen ist?

     $("h1").fadeIn(500);

Doppelposting zusammengetackert. Bitte zukünftig den »Bearbeiten«-Button verwenden.

Wex