nicht angemeldet
Da das mit der fixen, absoluten und fixen Positionierung meinen Geist zerstört hat :-), habe ich einen anderen Ansatz gewählt:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
#parallax { width: 800px; height: 600px; }
div#parallax {
background-image: url(blurred-background-small.jpg);
overflow: hidden; position: relative;
font-size: .1em; }
div#parallax * { position: absolute; }
#candles { left: 5%; bottom: 22em; }
</style>
<script>
window.onscroll = function emParallax() {
if (window.pageYOffset > 0) { document.getElementById("parallax").style.fontSize = (window.pageYOffset/10)*.1+"em"; } }
</script>
</head>
<body>
<div style="height: 300px;">
huhu
</div>
<div align="center">
<div id="parallax">
<img src="candles.jpg" alt id=candles>
</div></div>
<div style="height: 3000px;">
huhu
</div>
</body>
</html>
Basierend auf dieser Seite.
Ich hätte die Bewegung aber gerne von links nach rechts und nicht von oben nach unten. Ich habe mit meinen begrenzten JS-Kenntnissen so viel an X-und Y-Koordinaten herumgeschraubt wie früher an der heißen Steffi aus der Parallelklasse, war aber weder bei Steffi noch bei der Sache erfolgreich.
Ich wäre für die Lösung soooo dankbar - Steffi hat sich ja irgendwann auch geklärt.
Gunnar Bittersmann
Der Martin
Matthias Apsel