Unterstützung mit Design (Hintergrundbild) - soll speziell scrollen

[fralix]

Edit:

Problem behoben, Parallax Scrolling hieß das Zauberwort.

---


Hallo,

ich arbeite gerade an einer Homepage für unsere schuleigene Schülerzeitung.

Leider habe ich von Webdesign wenig Ahnung, ich arbeite sehr gerne im Frontend. Gester saß ich 5 Stunden (!) an der Navigation (SpongeBob möge es bestätigen :-)) und bevor ich jetzt eine Woche an meinem Problem sitze, dachte ich, ich frage hier mal schnell nach - vermutlich braucht ein erfahrener Webentwickler da ein paar Minuten zu.


Worum geht es: Die Seite verwendet ein Hintergrundbild welches in der Regel senkrecht ist, da wir immer das aktuelle Titelbild der Ausgabe nehmen, welche in A4 gedruckt wird.
Jetzt soll dieses aber beim Runterscrollen sich mit bewegen, und zwar so, dass wenn man ganz oben auf der Seite ist, man auch ganz oben beim Bild ist.
(So, als ob das Bild einfach von oben nach unten eingebunden wird).

Wenn man jetzt aber nach unten scrollt, soll sich das Bild mit der Geschwindigkeit mitbewegen, sodass man, wenn man unten auf der Seite ist, auch unten das Bild sieht.
Wenn man also eine Seite mit viel Inhalt hat, dann scrollt das Bild ganz langsam runter, damit das Bild auch für die gesamte Seite "reicht". Es darf also keinerlei repeat oder so geben.

Ich hoffe, dass war verständlich genug, hier die Seite, mit der ich mich so abmühe (Keine Sorge, wir wollen uns noch eine TLD besorgen, das ist nur ein Testserver): (Entfernt)

[Silbereisen]

Hey du,

habs leider nur kurz überflogen. Wenn ich es richtig verstehe, sollte das:


background: #D7484E url('/media/file/bg.png') top no-repeat;
background-attachment: scroll;
background-size: cover;

dein Problem lösen ;)

[x21]

Parallax.js | Simple Parallax Scrolling Effect with jQuery (http://pixelcog.github.io/parallax.js/)

Ist glaube ich das was du suchst.

Um dir die Arbeit zu erleichtern, hast du schon versucht auf Frameworks wie Materialize oder Bootstrap auszuweichen ?

[fralix]

@Silbereisen: Sieht gut aus, leider ist es nicht ganz das, was ich brauche. Es sieht so aus, als ob es lediglich anpasst, ich brauche aber etwas, was "dynamisch" scrollt.

@x21: Ich teste das gleich aus.
Warum kein Bootstrap / fertiges Design: Ich nutze so etwas für sehr viele Projekte. Leider ist von der Schülerzeitung das Design mehr oder weniger vorgeschrieben, wir haben für unsere Zeitung bei jeder Ausgabe ein Facebook Design gewählt, welches sich auch auf der Homepage (eigentlich 1:1 :D) wiederspiegeln sollte.

- - - - - - - - - - Beitrag nachträglich erweitert - - - - - - - - - -

das Parallax Scrolling ist eigl. genau das, was ich gesucht habe.

Nur noch ein kleines Problem:
Wie schaffe ich es, die data-speed dynamisch an die Länge meiner Seite anzupassen? Es ist zwar nicht schlimm, dass global zu setzen, es wäre aber cooler, wenn das auf jeder Seite individuell bestimmt wird.