Wie macht man sowas?

[martin65]

Hallo liebes Forum,

ich möchte mich dem Thema Website selber erstellen nähern… ich möchte etwas ähnliches machen wie das hier : http://www.william-cohn.com … wie macht man sowas? Die Site ist mit webacapella erstellt. Kann mir jemand einen Tipp geben, wie ich das vorgehen muss?

Vielen Dank und Grüße
Martin

 

[Scotch]

JavaScript & jQuery lernen.

 

[Bananenbieger]

"das hier" nennt sich übrigens Parallax Scrolling. Kann man, wie schon von Scotch gesagt, prima mit jQuery realisieren.

 

[commune10]

Das ist ganz einfach, dafür gibt es ein fertiges Bootstrap-Template: http://startbootstrap.com/templates/stylish-portfolio

 

[Slashwalker]

Oder man macht es wie die "Designer" der verlinkten Seite und kauft ein fertiges Theme:
http://teothemes.com/wp/scrn/

 

[martin65]

jquery, parallax scrolling, bootstrap-template, theme,… jede Menge Antworten… vielen Dank dafür. Ich glaube ich habe erstmal genug Hausaufgaben…

 

[zilVerGFX]

Moin,

ich bin grad zufällig auf diesen Thread gestoßen und wollte meine Vorredner einmal kurz korrigieren
Das hier ist kein Parallax-Scrolling und kann fast ausschließlich mit CSS realisiert werden. Das Einzige was hier Javascript ist, ist die Navi welche oben hängen bleibt und nicht weiter mit hochscrollt, und eben das automatische Scrollen.

Parallax-Scrolling ist was völlig anderes und sehr viel aufwändiger als diese Seite hier. Für den Hintergrund-"Effekt" schau mal hier:
http://www.w3schools.com/cssref/pr_background-attachment.asp

...und für das automatische scrollen (jQuery):

$( 'html, body' ).animate({

    // #container wäre in dem fall die ID des Containers zu dem gescrollt werden soll
    scrollTop: $( '#container' ).offset().top

}, 'slow');

Viel Spaß

 

[Bananenbieger]

Stimmt. Da hatte ich mich verguckt. Nichtsdestotrotz ist bereits simples Parallax-Scrolling schöner als ein Sticky Background.