Animation beim scrollen

[ldb]

Hallo liebe JavaScriptler und HTML-Profis,
Ich habe auf einer Seite eine schöne Animation entdeckt, die ich gerne auch auf einer eigenen Seite einbauen würde.

Hier ist der Link zur Vorlage:Hero

Es geht mir um die animierte Schrift und das Bild im Hintergrund, wenn man nach unten scrollt.

Wie kann man so etwas am einfachsten realisieren? Gibt es dafür ein JQuery-Plugin? Wenn nein: Könntet ihr mir helfen, so etwas zu coden? Ich habe von JavaScript leider überhaupt keine Ahnung, ich kann gerade mal Inhalt dynamisch laden und das war's...

Ich danke euch schon jetzt herzlich für eure hilfreichen Antworten!

Liebe Grüsse aus der Schweiz,

Lukas

 

[Sempervivum]

Scheint relativ einfach zu sein. Wie's funktioniert, kann man aus dem Quelltext der Seite ablesen:
Javascript:

///////////////////////////////
// Parallax
///////////////////////////////

// Calcualte the home banner parallax scrolling
  function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('#bannerText').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });
	
    //Scroll the background of the banner
    jQuery('#homeBanner').css({
      'background-position' : 'center ' + (-scrollPos/8)+"px"
    });    
  }

HTML:

		<div id="homeBanner">			
			<div id="bannerText">
				<h2>CLEAN &amp; RESPONSIVE</h2>
				<p>A Minimal Portfolio WordPress Theme</p>
			</div>		
		</div>

CSS:

#bannerText { top: 250px; }
	#homeBanner {
		background-color: #132b2b;
	}	

	#homeBanner {
		background-image: url(http://themetrust.com/demos/hero/wp-content/uploads/home_banner_mountains_2.jpg);		
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-position:center top;			
	}

 

[ldb]

Vielen, vielen Dank! Ich habe den Quelltext abgegrast, bi aber aus unerfindlichen Gründen nicht fündig geworden. Dass du die wichtigen Stellen auch noch so schön zusammengefasst hast, ist wirklich nett!
Um das ganze auf eine eigene Seite anzuwenden, müsste ich bloss JQuery einbinden, den JavaScript-Code in ein .js-File sichern und einbinden und die Elemente im HTML und CSS so formatieren wie in der VOrlage, oder? Dann sollte das laufen, oder muss ich sonst noch etwas beachten?

Du hast dir jedenfalls ein "Danke" verdient!

Gruss und "Mersi" ;)