nicht angemeldet
Showcase?
0 Parallaxe-Scrolling
0 0
Showcase?
Hallo zusammen!
Ich sage es schonmal im vorraus: ich bin noch nicht der große Programmierer.
Aber ihr könnt mir dabei helfen einer zu werden ;-). Ich habe auf der Seite www.kostenlose-javascripts.de eine Art interaktive Grafik gefunden (ganz oben hinter dem Schriftzug www.kostenlose-javascripts.de). Im Quelltext bezeichnen sie das als Showcase. Ich glaube das hat irgendwas mit dem CSS-Stylesheet zu tun. Kann ich das irgendwie nachbauen, ohne gleich die ganzen Stylesheets zu übernehmen?
Thx für eure Antworten!
-
Das dazu notwendige Script selbst ist relativ einfach nachgebaut (auch wenn die Seite, die Du als Beispiel genannt hast, wesentlich kompliziertere Scripte dazu verwendet):
document.body.onmousemove = function(evt) { var e = evt || window.event; document.getElementById('parallax1').style.left = (e.clientX * 1.5 - 1000) + 'px'; document.getElementById('parallax2').style.left = (e.clientX * 0.5 - 1000) + 'px'; }#parallax1 und 2 sind einfach absolut positionierte, horizontal wiederholbare Bilder mit sehr hoher Breite und entsprechender Transparenz. Du kannst ggf. noch mit Math.max und Math.min entsprechende Grenzen setzen. Übrigens: "document.body" ist im Quirks-Mode nicht verfügbar - wenn Dir deswegen ein Fehler auffallen sollte, informiere Dich über die Möglichkeiten von Harakiri und Seppukku.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
okay danke!
wenn ich das richtig verstanden hab dann sind parallax1 und parallax2 (geht auch parallax3?) die bilder die ich scrollen kann. aber wie bekomme ich die bilder da rein?-
Hi, Masterofdesaster!
Nimm' am Besten so viele Elemente wie Du benötigst (zu viele werden langsam, ansonsten gibt es keine Probleme), die Du unter der Headline absolut positionierst und die mit Hintergrundgrafiken mit repeat-x befüllt sind.
So sähe die Struktur in HTML5 aus (Du kannst natürlich auch jeden anderen Doctype verwenden, musst dann aber auf header- und nav-Nodes verzichten, wenn Du validen Code haben willst):
<header> <ul id="parallax"> <li id="parallax1"></li> <li id="parallax2"></li> <li id="parallax3"></li> </ul> <h1><span>Headline</span></h1> <nav>...</nav> </header>Und im CSS machst Du dann
#parallax { position: absolute; } #parallax li { position: absolute; top: 0px; display: block; left: -1000px; background-repeat: repeat-x; height: 200px; width: 50000px;} #parallax1 { background-image: url(...); } #parallax2 { background-image: url(...); } #parallax3 { background-image: url(...); }Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
-
-
Tut mir leid aber ich verstehe das noch nicht recht. muss ich den script dann in den head einbetten und wie bekomm ich die bilder da rein?
-
Das Script schreibst Du am Besten direkt unter die entsprechenden #parallax-Nodes (also unter das schließende ul-Tag), damit stellst Du sicher, dass auch alle benötigten Objekte verfügbar sind.
Alternativ kannst Du auch das onload-Event verwenden, wobei darauf zu achten ist, dass vorhanden onload-Funktionen nicht überschrieben werden; dazu suche nach "JavaScript Closure" und mache Dich schlau. Für den Anfang reicht aber die einfache Lösung.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
-
-
-
okay das müsste doch dann eigentlich so aussehen oder?
<html> <head> <style type="text/css"> #parallax { position: absolute; } #parallax li { position: absolute; top: 0px; display: block; left: -1000px; background-repeat: repeat-x; height: 200px; width: 50000px;} #parallax1 { background-image: url(http://dl.dropbox.com/u/3456054/layer1.png); } #parallax2 { background-image: url(http://dl.dropbox.com/u/3456054/layer2.png); } #parallax3 { background-image: url(http://dl.dropbox.com/u/3456054/layer3.png); } </style> <script type="text/javascript"> document.body.onmousemove = function(evt) { var e = evt || window.event; document.getElementById('parallax1').style.left = (e.clientX * 1.5 - 1000) + 'px'; document.getElementById('parallax2').style.left = (e.clientX * 0.5 - 1000) + 'px'; } </script> </head> <body> <header> <ul id="parallax"> <li id="parallax1"></li> <li id="parallax2"></li> <li id="parallax3"></li> </ul> <h1><span>Headline</span></h1> <nav>...</nav> </header> </body> </html>die bilder hab ich nur so schnell erstellt
das funktioniert aber irgendwie nicht. mozillas fehlerkonsole sagt: document.body is nullwas soll ich machen?
-
Hi,
LX schrieb:
Übrigens: "document.body" ist im Quirks-Mode nicht verfügbar - wenn Dir deswegen ein Fehler auffallen sollte, informiere Dich über die Möglichkeiten von Harakiri und Seppukku.-
danke dave!
aber was ist das? harakiri = selbstmord art aus japan. aber ich denke das hat ernicht gemeint....-
Doch, habe ich. Seppukku ist übrigens auch eine Art des rituellen Selbstmords.
Den Quirksmode sollte man überhaupt nur noch dann verwenden, wenn man einen sehr, sehr, sehr guten Grund dafür hat - und "ich kann mir diese ganzen komplizierten DOCTYPE-Zeilen nie merken" ist keiner (insbesondere nicht mehr seit HTML5)!
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
-
-
achso verstehe das sollte ein witz sein! hahaha
-
-
-
Hab jetzt was gefunden: http://webdev.stephband.info/parallax.html
Trotzdem danke für eure Hilfe.