Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Scrollspeed für Hintergrundbild anpassen
#1
Hallo,
ich mache grade eine Seite und möchte gerne die Scrollgeschwindigkeit für das Hintergrundbild folgendermaßen anpassen:

Ich möchte dass das Hintergrundbild so schnell gescrollt wird, dass wenn man am Ende des Seiteninhalts angekommen ist (bis zum Anschlag heruntergesollt hat), auch das untere Ende des Bildes erreicht ist. (egal, wie lang der Inhalt ist.)


Wichtig:

-unwichtig- Das Bild ist vertikal (etwa Handy format) (Höhe ist auf jeden Fall groß genug, dass die gesamte Bildschirmhöhe bedeckt, ist wenn es auf "width: 100%;" gesetzt wird)

- Soll auf 100% der breite der Seite sein. (background-attachment: cover;)
- Scrollgeschwindigkeit des Inhalts (text,etc.) soll normal sein (unverändert).
- Scrollgeschwindigkeit des Hintergrundbilds soll automatisch (nach Inhaltsumfang/(Bedarf)) erhöht/verringert werden.


Grobe struktur:

<html>

<body> 
<div>(Hintergrundbild)

  <div>(Inhalt)

  </div>

</div>
</body>

</html>


Lösungsansatz/Idee:

- Bildhöhe  /(geteilt durch)  Inhalt-Div_height

- Hintergrundbild-Scrollgeschwindigkeit  =  Ergebnis_von_oben  *(multipliziert mit)  Standartscrollgeschwindigkeit


Danke für eure Bemühungen.. weiss nämlich nicht wie ich den Lösungsansatz umsetzen soll (bin nicht sehr vertraut mit Javascript)

Vielen Dank,
Josmeete!
Zitieren
#2
Beispiele:

hier funktioniert es (grob/ohne flexibel werte): https://jsfiddle.net/k91roos5/

hier nicht mehr (flexibel Werte): https://jsfiddle.net/p5npqe7b/

weiss jemand wo der Fehler liegt?
Zitieren
#3
Du hattest ein paar typos in der Variablen Deklarierung.

.width()

.height()

Dann lief das auch.

Hier nochmal im Detail:


(function() {

var documentEl = $(document),
parallaxBg = $('div.parallax-bg');

var numA = $('div.content').width() / 600;
var numB = 900 * numA;
var differenz = numB / $('div.content').height();




documentEl.on('scroll', function() {
var currScrollPos = documentEl.scrollTop();
parallaxBg.css('background-position', '0 ' + ( -currScrollPos * differenz ) + 'px');
});



})();
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste