kostenloser Webspace werbefrei: lima-city

Design, bei dem sich Seiteninhalt schneller als Bg. bewewgt

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   w*********************e

   14:11, 15.10.2010

   Hallo,
   wie würdet ihr das programmieren?:
   Der Hintergrund der Seite soll sich beim runterscrollen nicht so schnell bewegen wie der Seiteninhalt bzw.
   der Seiteninhalt soll sich beim runterscrollen nicht schneller bewegen als der Hintergrund. (wie z.B. bei http://www.cloud-green.de)
   Danke!
   
   Beitrag zuletzt geändert: 15.10.2010 15:25:04 von tct

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. sonok

   Moderator

   sonok hat kostenlosen Webspace.

   14:16, 15.10.2010

   Guck doch mal in den Quelltext rein - da steht doch alles da. Wird mit JavaScript realisiert.
4. Autor dieses Themas

   w*********************e

   15:35, 15.10.2010

   Ich finds irgendwie nicht

5. zwigge-racing-team

   zwigge-racing-team hat kostenlosen Webspace.

   15:46, 15.10.2010

   ich kenn mich in JS zwar nicht aus, gehe aber davon aus, dass die Funktion in folgendem Abschnitt liegt:
   

   <script type="text/javascript">
   function calcParallax(tileheight, speedratio, scrollposition) {
   
     return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
   }
   
   window.onload = function() {
     window.onscroll = function() {
       var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
       var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
       
       var ground = document.getElementById('ground');
       var groundparallax = calcParallax(300, 8, posY);
       ground.style.backgroundPosition = "0 " + groundparallax + "px"; 
     }
     document.getElementById('javascriptcode').onscroll = function() {
       var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
       var j = calcParallax(300, 16, posX);
       console.log('scroll js: '+ j);
       document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
     }
   }
   </script>

   
   
   das ist aus meiner sicht das einzig sinvolle...

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?