[FRAGE] Video beim Scrollen animieren

[taiBsu]

Hallo liebes JSWelt-Forum,
ich bin neu hier.

Ich würde gern wissen, ob und wenn ja wie ich mittels Javascript ein Video, welches ich als Hintergrundbild per CSS rein laden würde, beim Scrollen nach unten , optimalerweise in Scrollgeschwindigkeit, abspielen lassen kann - also nur, solange ich scrolle. Alternativ würde ich das Video durch 5 teilen und dann immer bei einer bestimmten Position auf der Seite das nächste Video / den nächsten Part abspielen lassen.

Ich hoffe, ich habe mich nicht zu unverständlich ausgedrückt. Ich bin zwar Programmierer, habe aber mit JavaScript / jQuery leider keine großen Erfahrungen.

Vielen Dank für die Hilfe!

VG taiBsu

 

[kkapsner]

ein Video, welches ich als Hintergrundbild per CSS rein laden würde

Wie hast du das genau geplant? Abhängig davon, muss man weiter sehen, wie man das realisiert.

 

[taiBsu]

Wie hast du das genau geplant?

Ich habe ein Video (momentan mp4) mit einem Tintentropfen, der sich langsam im Wasser auflöst. Dies würde ich gern als Hintergrund nehmen - ich habe eine One-Page Seite, bei der dann beim runter scrollen der Tintenfleck langsam mit nach unten wandern soll - entweder phasenweise oder fließend. Ich hoffe, das ist einigermaßen verständlich.

- - - Aktualisiert - - -

Mit der EDIT-Funktion konnte ich nachträglich keinen Code einbinden, deshalb noch mal so - das Video würde ich wie folgt einbinden:

<style>
video#bgvid {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: url(video.jpg) no-repeat;
	background-size: cover;
}
</style>
<video autoplay loop poster="video.jpg" id="bgvid">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>

 

[kkapsner]

OK - das ist nicht weiter schwer:

window.onscroll = function(){
	var docEl = document.documentElement;
	var video = document.getElementById("bgvid");
	video.currentTime = docEl.scrollTop/(docEl.scrollHeight - docEl.clientHeight)*video.duration;
};

 

[taiBsu]

Klappt fast, aber nicht ganz. scrollHeight und clientHeight ändern sich bei mir leider nicht.

 

[kkapsner]

Die sollen sich ja auch nicht ändern - das ist einfach der Referenzwert, wie weit überhaupt gescrollt werden kann.

Es ändert sich beim Scrollen nur scrollTop.

 

[taiBsu]

EDIT: Super, vielen Dank, habe nur noch eine Klammerung um alles unterm Bruchstrich setzen müssen! Vielen Dank für die Hilfe!

- - - Aktualisiert - - -

Ich habe gerade das Script auf einen anderen Server umgezogen, auf einmal sind scrollHeight und clientHeight gleichgroß. Daraus resultiert, dass eine Null-Division ausgeführt wird und das Script natürlich abstürzt. Woran kann es liegen, dass beide gleichgroß sind und wie kann ich das Problem beheben, gibt es da Erfahrungen?

 

[mikdoe]

zeig mal den aktuellen code

 

[kkapsner]

docEl muss immer das Element sein, das auch gescrollt wird. Hast du bei der anderen Seite ein anderes Layout?