Supertopic » Forum » Webentwicklung » Javascript » Parallax Scrolling
Seite 1

Parallax Scrolling

Tags:

javascript

 


juno
Gast

15.06.07
12:24 Uhr
Editiert: 15.06.07, 14:50 Uhr
Hallo ihr,
danke schonmal für eure Hilfe.

andere frage, auch java script. daran verzweifel uch wirklich und such mich seit tagen tot.
ich suche einen script, der zwei übereinanderliegende layer unterschiedlich schnell scrollen lässt ähnlich wie hier mit dem hintergrund. das muss doch möglich sein, oder?
http://inner.geek.nz/javascript/parallax/

Folgendes. Ich habe einen Textbereich der nicht groß genug für den Text ist, deshalb möchte ich den per div-Layer austauschen.

Text 1 (Button weiter) → Text 2 (Button weiter) → Text 3

das es mit visibility hidden, visible laufen muss ist klar. bloß irgendwie hab ich da ne blockade. wie geht man da weiter vor, ich bekomm es nur hin, dass ich einen text gegen einen anderen austauschen kann aber nichts weiter. und nun merke ich gerade, dass mein geklauter script dafür nicht geeignet ist ouw

vllt. erbarmt sich jemand D
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
phloo
Veteran

15.06.07
12:26 Uhr
Du stehst offenbar auf der Leitung ouw

Text 1 anzeigen mit Link zu Text 2
Bei Klick auf den Link Text 1 ausblenden, Text 2 rein der in seinem verborgenen ebenfalls einen Link enthält zu Text 1 und Text 3

Wie du die jeweiligen divs ein und ausblendest ist klar, oder?
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
juno
Gast

15.06.07
12:43 Uhr
harhar. ähm. ich pendel hier gerad zwischen ein paar jobs hin und her und versteh irgendwie bei allen javascript nur bahnhof ouw
obwohl ich es eigentlich schon ein paarmal gemacht habe. ist ja eigentlich nicht mehr als zu sagen

bei klick setze visibility „text1“ auf hidden. visibility „text2“ auf visible. bei „text2“ das gleiche spielt und so weiter hammer

ich muss mal eben nachdenken ouw
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
phloo
Veteran

15.06.07
12:47 Uhr
display:none und display:block

div1: text mit link am ende zu div1 ausblenden/div2 einblenden

div2: text mit link am ende zu div2 ausblenden/div1 und div3 einblenden

div3: text mit link am ende zu div3 ausblenden/div2 einblenden
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
stese
Moderator

15.06.07
13:17 Uhr
wichtig ist noch bei layern die standardmäßig display:none sind, dass diese eigenschaft nicht in einem externen css gesetzt werden sondern als style-attribute im div. danach gehts wie phloo sagte
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
kero
Gast

15.06.07
13:31 Uhr
sicher? ich glaub, ich hab das immer so gemacht.
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
stese
Moderator

15.06.07
13:38 Uhr
ganz sicher. selbst die prototype.js doc weist auf diese besonderheit hin
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
Logan
Überläufer

15.06.07
14:03 Uhr
kannst auch eine funktion machen , die alle ausblendet:
  1. function alleausblenden () {
  2. document.getElementById("horst").style.display="none";
  3. document.getElementById("hugo").style.display="none";
  4. document.getElementById("egon").style.display="none";
  5. }
Quelltext in Zwischenablage kopieren
und dann eine zeigefunktion, die erst alle ausblendet und dann ein bestimmtes element einblendet:
  1. function zeige(objekt) {
  2. alleausblenden();
  3. document.getElementById(objekt).style.display="block";
  4. }
Quelltext in Zwischenablage kopieren
onload dann das erste einblenden:
  1. <body onload="zeige('horst');">
Quelltext in Zwischenablage kopieren
zum wechseln bei einem link die zeigefunktion aufrufen mit:
  1. <a href="alternativezujavascript" onclick="zeige('horst'); return false;">link</a>
Quelltext in Zwischenablage kopieren
das klappt natürlich nur, wenn immer nur ein objekt zu sehen sein soll. ich persönlich finde durchklicken nicht so toll, ich hätte dann gerne noch eine funktion alleeinblenden() ;-)

(ungetestet)
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
juno
Gast

15.06.07
14:50 Uhr
holy. yes.
funktioniert, danke. habs einfach dazugeschrieben.

andere frage, auch java script. daran verzweifel uch wirklich und such mich seit tagen tot.
ich suche einen script, der zwei übereinanderliegende layer unterschiedlich schnell scrollen lässt ähnlich wie hier mit dem hintergrund. das muss doch möglich sein, oder?
http://inner.geek.nz/javascript/parallax/
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
Logan
Überläufer

15.06.07
15:41 Uhr
möglich ist es bestimmt, eventuell so(?):

css:
  1. #horst, #hugo { position: absolute; }
Quelltext in Zwischenablage kopieren
javascript:
  1. geschwindigkeit=10;
  2. function scrollen() {
  3. document.getElementById("hugo").style.top += geschwindigkeit;
  4. document.getElementById("horst").style.top += geschwindigkeit/2;
  5. setTimeout("scrollen()", 100);
  6. }
Quelltext in Zwischenablage kopieren
und per events geschwindigkeit manipulieren (z.b. 10, -10, 0)

(ungetestet)
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
juno
Gast

15.06.07
16:54 Uhr
klingt gut, soweit ich das mit meinem nichtprogrammiererwissen und daher nur verständnissystem sagen kann. aber was sind events? und wie funktioniert sowas?
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
Toni
Veteran

15.06.07
19:05 Uhr
juno schrieb am 15.06.07, 16:54 Uhr:

klingt gut, soweit ich das mit meinem nichtprogrammiererwissen und daher nur verständnissystem sagen kann. aber was sind events? und wie funktioniert sowas?

Google hilft eek

Naja, alles was so passiert. Mausklick, mouseover, onload, unload... (diesmal hilft google wirklich)
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
juno
Gast

20.06.07
12:17 Uhr
Editiert: 20.06.07, 13:17 Uhr
okay, update. es funktioniert, aber hakt noch etwas. vllt weiß jemand, wie man dies optimieren könnte.

  1. <script type="text/javascript">
  2.  
  3. //define universal reference to "staticcontent"
  4. var crossobj=document.all? document.all.staticcontent : document.getElementById("staticcontent")
  5.  
  6. //define reference to the body object in IE
  7. var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body
  8.  
  9. function positionit(){
  10. //define universal dsoc top point
  11. var dsoctop=document.all? iebody.scrollTop : pageYOffset
  12.  
  13. //if the user is using IE 4+ or Firefox/ NS6+
  14. if (document.all||document.getElementById){
  15. crossobj.style.top=dsoctop*0.5+"px"
  16. }
  17. }
  18. setInterval("positionit()",10000000)
  19. </script>
Quelltext in Zwischenablage kopieren
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
Toni
Veteran

21.06.07
09:52 Uhr
Poste mal bitte einen Link. Kann ja auch sein, dass es an der Rendering-Engine der Browser liegt, dann kannste wenig machen.
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
Feng
Gast

21.06.07
19:06 Uhr
Editiert: 24.10.07, 22:13 Uhr
Dieser Beitrag wurde vom Mitglied gelöscht.
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
Erik Hehrmann
Veteran

15.12.11
21:42 Uhr
Dachte, ich poste das hier mal, da es ein extrem gelungenes Beispiel ist: http://www.newzealand.com/us/
Beitrag als ir/relevant markieren Link zu diesem Beitrag in die Zwischenablage kopieren
 
Supertopic » Forum » Webentwicklung » Javascript » Parallax Scrolling
Seite 1 · nach oben
#