Jens99: Bewegung nach Scrollen

Hi,
wonach muss ich suchen, wenn sich eine Grafik oder ein DIV nach links oder rechts bewegen soll, wenn man die Scrollbar benutzt?

Quasi als Bsp: Man scrollt nach unten, DIV bewegt sich von links nach rechts.

Vielen Dank!

  1. Hi,

    wonach muss ich suchen, wenn sich eine Grafik oder ein DIV nach links oder rechts bewegen soll, wenn man die Scrollbar benutzt?

    so etwas nennt man Paralax-Effekt. Das kann man selber machen oder eine der unzähligen Frameworks/Libraries nutzen.

    DerBademeister

    1. @@DerBademeister:

      nuqneH

      wonach muss ich suchen, wenn sich eine Grafik oder ein DIV nach links oder rechts bewegen soll, wenn man die Scrollbar benutzt?

      so etwas nennt man Paralax-Effekt.

      Nein, glaub ich nicht.

      Ein Paralax-Effekt wäre, wenn sich Hintergrund und Vordergrund mit unterschiedlicher Geschwindigkeit in dieselbe Richtung bewegten.

      Hier hört es sich so an, als solle beim Hoch-/Runterscrollen etwas nach rechts/links bewegt werden.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. @@DerBademeister:
        Hier hört es sich so an, als solle beim Hoch-/Runterscrollen etwas nach rechts/links bewegt werden.

        Qapla'

        Genau, vielen Dank!

        Ich habe das hier gefunden: http://jsfiddle.net/zG3aC/

        Ich hätte dazu eine Frage: Ich will den "Effekt" erzielen, dass ein Auto (img) beim herunterscrollen von A nach B (links nach rechts) fährt. Ich sehe die ganze Technik gerade das erste Mal und blicke noch nicht richtig durch - ist das überhaupt möglich, also das links nach rechts fahren auf "einer Linie"?

        1. Hallo,

          Ich will den "Effekt" erzielen, dass ein Auto (img) beim herunterscrollen von A nach B (links nach rechts) fährt.

          das hattest du schon gesagt - bis auf das irrelevante Detail, dass es um ein img-Element geht, das ein Auto darstellt.

          ist das überhaupt möglich, also das links nach rechts fahren auf "einer Linie"?

          Natürlich. Aber wohl nicht mit CSS allein, da wird der Einsatz von Javascript unabdingbar sein. Mit dem Eventhandler onscroll reagierst du überhaupt mal auf die Tatsache, dass gescrollt wird. Dann kannst du scrollTop des body-Elements abfragen, zu scrollHeight ins Verhältnis setzen, und daraus die x-Koordinate für dein img-Element ermitteln. Das könnte seinerseits 'fixed' auf die gewünschte y-Koordinate positioniert sein, damit es nicht vertikal mitscrollt, und die x-Koordinate veränderst du dynamisch.

          Wenn du sowohl die x- als auch die y-Koordinate nach einer bestimmten Gesetzmäßigkeit veränderst, kann das Objekt sogar beliebige Kurven im Browserfenster abfahren.

          So long,
           Martin

          --
          Das einzige Problem beim Nichtstun: Man weiß nie, wann man damit fertig ist.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. Danke!

            Ist der Ansatz, den ich geposted habe, denn richtig? Ich bin absoluter Neuling, habe ein paar Wörter gegoogelt und stehe jetzt mit Deinen Begriffen vor böhmischen Dörfern.

            1. Ist der Ansatz, den ich geposted habe, denn richtig?

              Kein Problem, meine Mutter ist aus Böhmen ;-)

              Ich habe einmal ein Beispiel erstellt, welches css Animation, gif Animation und Javascript kombiniert.

              Die Animation wird nicht „beim“ scrollen, sondern gestartet, wenn du nach unten gescrollt hast.

              gruesse qx

              1. Ist der Ansatz, den ich geposted habe, denn richtig?

                Kein Problem, meine Mutter ist aus Böhmen ;-)

                Ich habe einmal ein Beispiel erstellt, welches css Animation, gif Animation und Javascript kombiniert.

                Das ist sehr nett, vielen Dank!

                Leider ist es nicht das, was ich vor habe :-)

                Das Auto soll nur über einen Bereich von ca. 500px scrollen - eben dann, wenn der Bereich im Monitor angezeigt wird. Nach 500px soll es wieder stoppen.

                Mein Hauptproblem ist, dass ich mit der Positionierung nicht hinkomme und mein Auto in den seltesten Fällen "gerade" fährt, sondern mit dem Textverlauf diagonal nach unten. So fährt kein Auto, so fällt es höchstens einen Hang hinunter :-)

                Aber dennoch erst einmal vielen Dank für die Animation!

                1. Hi,

                  der grundlegende Effekt funktioniert, was nicht funktioniert, ist die Positionierung. Ich verstehe schon gar nicht, wie man das richtig positioniert.

                    
                  <!DOCTYPE html>  
                  <html>  
                  <head>  
                  	<meta charset="utf-8" />  
                  	<title>jInvertScroll Demo Page</title>  
                      <style type="text/css">  
                  	html,  
                  body  
                  {  
                    padding: 0;  
                    margin: 0;  
                    font-family: Arial, sans-serif;  
                  }  
                    
                  /* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */  
                  body  
                  {  
                    overflow-x: hidden;  
                    background: url('../images/bg.jpg') repeat top left;  
                  }  
                    
                  h1  
                  {  
                    font-size: 20px;  
                    font-weight: normal;  
                    color: #2e6e80;  
                  }  
                    
                  /**  
                    * important: keep position fixed, you can however use top:0 instead of bottom:0  
                    * if you want to make it stick to the top of the browser  
                    */  
                  .scroll  
                  {  
                    position: fixed;  
                    bottom: 0;  
                    left: 0;  
                  }  
                    
                  /**  
                    * z-index ordering of the different layers, do this for your layers,  
                    * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)  
                    */  
                  .horizon  
                  {  
                    z-index: 1;  
                    width: 3000px;  
                  }  
                    
                  .middle  
                  {  
                    z-index: 500;  
                    width: 4000px;  
                  }  
                    
                  .front  
                  {  
                    z-index: 1000;  
                    width: 6000px;  
                  }  
                  	</style>  
                  </head>  
                  <body>  
                      <h1>jInvertScroll Example</h1>  
                    
                      <div class="horizon scroll">  
                          <img src="images/bus.jpg" alt="" />  
                      </div>  
                    
                    
                      <script type="text/javascript" src="../libs/jquery.min.js"></script>  
                      <script type="text/javascript" src="../dist/js/jquery.jInvertScroll.js"></script>  
                      <script type="text/javascript">  
                      (function($) {  
                  		$.jInvertScroll(['.scroll']);  
                  	}(jQuery));  
                  	  
                  	$(document).ready(function(){  
                  		$('html, body').animate({scrollTop: 0}, 20);  
                  	});  
                      </script>  
                  </body>  
                  </html>  
                  
                  

                  Mit diesem Script: http://www.pixxelfactory.net/jInvertScroll/

                  Der Bus fährt schön am unteren oder oberen Bildrand, aber sobald es in die Positionierung (sprich die Einbindung in die Seite) geht, ist's vorbei mit der Herrlichkeit. Ich habe den Eindruck, dass die ganzen relativen, absoluten und fixen Positionierungen ad absurdum geführt werden.

                  1. 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.

                    1. Hola,

                      vielleicht schaust du dir zuerst ein Beispiel für das parallax scrolling an, das nur mittels CSS funktioniert &&|| zeigst uns deine bisherigen Ergebnisse online, damit wir nicht eine Seite nachbauen müssen (html, css, script, Bilder) die eh nicht funktioniert.

                      gruesse qx

                      1. Angesehen habe ich mir so ziemlich alles, was es zu dem Thema gibt.

                        Das Problem ist, dass es "Standalone" meistens funktioniert, sobald es aber in ein fertiges Gerüst mit relativer und absoluter Positionierung geht, spielt alles verrückt.

                        Daher jetzt der andere Ansatz...
                        Hier ist die Demo

                        Bewegung soll von links nach rechts statt horizontal.

                        Danke!!

                        1. Angesehen habe ich mir so ziemlich alles, was es zu dem Thema gibt. (glaube ich nicht)

                          hat aber wohl nichts gebracht? Den solange du mit style.fontSize rummachts wird das nichts; denke dir fehlen die Grundlagen.

                          Daher jetzt der andere Ansatz...
                          Hier ist die Demo

                          Bewegung soll von links nach rechts statt horizontal.

                          Hier macht es das, doch das ist nur ein Gerüst, nix fertiges.

                          mfg gx

      2. @@DerBademeister:

        so etwas nennt man Paralax-Effekt.

        Nein, glaub ich nicht.

        Ein Paralax-Effekt wäre, wenn sich Hintergrund und Vordergrund mit unterschiedlicher Geschwindigkeit in dieselbe Richtung bewegten.

        Hier hört es sich so an, als solle beim Hoch-/Runterscrollen etwas nach rechts/links bewegt werden.

        Ähhhmmm, rechts, links, runter, hoch, völlig Latte! Das macht keinen Unterschied. Es bleibt ein Parallax-Effekt.

        DerBademeister

        1. Om nah hoo pez nyeetz, DerBademeister!

          Ähhhmmm, rechts, links, runter, hoch, völlig Latte! Das macht keinen Unterschied. Es bleibt ein Parallax-Effekt.

          Siehe http://t3n.de/news/parallax-scrolling-beispiele-423046/ und dort etwa http://ala.ch/

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Otto und Ottomane.

          1. @@Matthias Apsel:

            nuqneH

            Das heutige Google-Doodle für Leo Tolstoi hat auch einen Parallax-Effekt – einen horizontalen.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. @@DerBademeister:

          nuqneH

          Ähhhmmm, rechts, links, runter, hoch, völlig Latte! Das macht keinen Unterschied. Es bleibt ein Parallax-Effekt.

          Nein, tut es nicht.

          Bei der Bewegungsparallaxe bewegt sich alles (scheinbar) in _dieselbe_ Richtung – je nach Entfernung mit unterschiedlicher Geschwindigkeit.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)