jQuery的CSS不同背景的部分之間的平滑滾動

我試圖做我的頁面部分之間的平滑滾動。基本上我的目標是有這樣的效果：http://diablomedia.com/ 到目前爲止：我有菜單，不同的背景，我可以導航，從這裏得到光滑的滾動：http://css-tricks.com/snippets/jquery/smooth-scrolling/但背景是問題...它只是.. 。不順暢，我不能explaint更清楚，所以我只是貼上我的一些代碼：jQuery的CSS不同背景的部分之間的平滑滾動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxx</title> 

<style type="text/css"> 
html { 
    background: #1d1d1d; 
} 

body { 
    margin: 0; 
    padding: 0; 
    font: 10px normal Verdana, Arial, Helvetica, sans-serif; 
    background: #1d1d1d; 
} 

h1 { 
    font: 4.7em normal Georgia, 'Times New Roman', Times, serif; 
    color: #fff; 
    margin: 0; 
    text-align: center; 
    padding: 5px 0; 
} 

h1 small { 
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
    letter-spacing: 1.4em; 
    display: block; 
    color: #ccc; 
} 

.container { 
    width: 100%; 
    height: 80px; 
    position: fixed; 
    margin: 0 0 0 0; 
    overflow: hidden; 
    top: 0px; 
    background: rgba(29, 29, 29, 0.85); 
    z-index: 100; 
} 

.main_content1 { 
    width: 100%; 
    height: 1200px; 
    display: block; 
    position: relative; 
    background: 
     url("http://www.mega-tapety.info/resize/sztuka-tapety3d-1600-1200-3422.jpg") 
     no-repeat fixed 50% 0 #FFFFFF; 
    position: relative; 
    display: block; 
} 

.main_content2 { 
    width: 100%; 
    height: 1200px; 
    display: block; 
    position: relative; 
    background: 
     url("http://www.tapety.nja.pl/images/wallpapers/26335506/Widoki/Niebo/17.jpg") 
     no-repeat fixed 50% 0 #FFFFFF; 
    position: relative; 
} 

.main_content3 { 
    width: 100%; 
    height: 1200px; 
    display: block; 
    position: relative; 
    background: 
     url("http://i.pinger.pl/pgr496/a03b8c70001f8f5d490da42f/pobrano-z-tapety.pinger.pl-29.jpg") 
     no-repeat fixed 50% 0 #FFFFFF; 
    position: relative; 
} 

.main_content4 { 
    width: 100%; 
    height: 1200px; 
    display: block; 
    position: relative; 
    background: 
     url("http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/390_4500_3.jpg") 
     no-repeat fixed 50% 0 #FFFFFF; 
    position: relative; 
} 

.main_content5 { 
    width: 100%; 
    height: 1200px; 
    display: block; 
    position: relative; 
    background: 
     url("http://i.pinger.pl/pgr448/ca9845940015a295490d848a/pobrano-z-tapety.pinger.pl-1D.jpg") 
     no-repeat fixed 50% 0 #FFFFFF; 
    position: relative; 
} 

.main_content6 { 
    width: 100%; 
    height: 1200px; 
    display: block; 
    position: relative; 
    background: 
     url("http://i.pinger.pl/pgr188/5b715190002669eb490d8488/pobrano-z-tapety.pinger.pl-1C.jpg") 
     no-repeat fixed 50% 0 #FFFFFF; 
    position: relative; 
} 

.main_content7 { 
    width: 100%; 
    height: 1200px; 
    display: block; 
    position: relative; 
    background: url("http://skkf.net/pulpity/7tapeta.jpg") no-repeat fixed 
     50% 0 #FFFFFF; 
    position: relative; 
} 

.main_content8 { 
    width: 100%; 
    height: 1200px; 
    display: block; 
    position: relative; 
    background: 
     url("http://zdjecia-fotografia.com/wp-content/uploads/2011/01/tapety-na-pulpit-samochody3.jpg") 
     no-repeat fixed 50% 0 #FFFFFF; 
} 

.text_container { 
    width: 80%; 
    position: absolute; 
    margin-left: 10%; 
    margin-top: 80px; 
} 

img { 
    border: none; 
} 

ul#topnav { 
    margin: 0 0 0 18%; 
    padding: 0; 
    list-style: none; 
    font-size: 1.1em; 
    clear: both; 
    float: left; 
    width: 60%; 
    padding: 0; 
} 

ul#topnav li { 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    float: left; 
    height: 40px; 
} 

ul#topnav a,ul#topnav span { 
    padding: 10px 20px; 
    float: left; 
    text-decoration: none; 
    color: #fff; 
    text-transform: uppercase; 
    clear: both; 
    height: 20px; 
    line-height: 20px; 
} 

ul#topnav a { 
    color: #7bc441; 
} 

ul#topnav span { 
    display: none; 
} 
</style> 
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document) 
      .ready(
        function() { 

         $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag 

         $("#topnav li").each(function() { //For each list item... 
          var linkText = $(this).find("a").html(); //Find the text inside of the a tag 
          $(this).find("span").show().html(linkText); //Add the text in the span tag 
         }); 

         $("#topnav li").hover(function() { //On hover... 
          $(this).find("span").stop().animate({ 
           marginTop : "-40" //Find the span tag and move it up 40 pixels 
          }, 250); 
         }, function() { //On hover out... 
          $(this).find("span").stop().animate({ 
           marginTop : "0" //Move the span back to its original state (0px) 
          }, 250); 
         }); 

         function filterPath(string) { 
          return string.replace(/^\//, '').replace(
            /(index|default).[a-zA-Z]{3,4}$/, '') 
            .replace(/\/$/, ''); 
         } 
         var locationPath = filterPath(location.pathname); 
         var scrollElem = scrollableElement('html', 'body'); 

         $('a[href*=#]') 
           .each(
             function() { 
              var thisPath = filterPath(this.pathname) 
                || locationPath; 
              if (locationPath == thisPath 
                && (location.hostname == this.hostname || !this.hostname) 
                && this.hash.replace(/#/, 
                  '')) { 
               var $target = $(this.hash), target = this.hash; 
               if (target) { 
                var targetOffset = $target 
                  .offset().top; 
                $(this) 
                  .click(
                    function(
                      event) { 
                     event 
                       .preventDefault(); 
                     $(
                       scrollElem) 
                       .animate(
                         { 
                          scrollTop : targetOffset 
                         }, 
                         1000, 
                         function() { 
                          location.hash = target; 
                         }); 
                    }); 
               } 
              } 
             }); 

         // use the first element that is "scrollable" 
         function scrollableElement(els) { 
          for (var i = 0, argLength = arguments.length; i < argLength; i++) { 
           var el = arguments[i], $scrollElement = $(el); 
           if ($scrollElement.scrollTop() > 0) { 
            return el; 
           } else { 
            $scrollElement.scrollTop(1); 
            var isScrollable = $scrollElement 
              .scrollTop() > 0; 
            $scrollElement.scrollTop(0); 
            if (isScrollable) { 
             return el; 
            } 
           } 
          } 
          return []; 
         } 
        }); 
</script> 
</head> 

<body> 

    <div class="container"> 
     <h1> 
      <small>Navatar.pl</small> 
     </h1> 
     <br /> 
     <ul id="topnav"> 
      <li><a href="#1">Dojedź szybciej</a> 
      </li> 
      <li><a href="#2">mCB</a> 
      </li> 
      <li><a href="#3">Pogadaj ze znajomymi</a> 
      </li> 
      <li><a href="#4">Check-in</a> 
      </li> 
      <li><a href="#5">Xplore</a> 
      </li> 
      <li><a href="#6">About</a> 
      </li> 
      <li><a href="#7">Cos</a> 
      </li> 
      <li><a href="#8">Jeszcze</a> 
      </li> 
     </ul> 
    </div> 
    <div class="main_content1" id="1"></div> 
    <div class="main_content2" id="2"></div> 
    <div class="main_content3" id="3"></div> 
    <div class="main_content4" id="4"></div> 
    <div class="main_content5" id="5"></div> 
    <div class="main_content6" id="6"></div> 
    <div class="main_content7" id="7"></div> 
    <div class="main_content8" id="8"></div> 
</body> 
</html>

我知道它看起來可怕，但我仍然在學習:)

來源

2011-09-06 kamil

我冒昧地將你的代碼添加到jsfiddle中（隨意將它添加到你的問題中）http://jsfiddle.net/YJXrX/ 你能解釋什麼不能像你想要的那樣運行嗎？我有一種感覺，這些處理器沉重的動畫可能是問題，它只是看起來不像你想在不同的機器/瀏覽器 – Sander

好吧，我明白了，但你能告訴我到底你想要改變什麼..在我的系統上，相當快速的筆記本電腦，使用Windows 7並使用Chrome進行測試，似乎很順利您的解決方案問題到底是什麼？ – Sander

好的事情是：打開我的頁面和暗黑媒體頁面......當你向下滾動我的時候，一個背景被另一個背景覆蓋，而在他們的網站上，一個背景，比方說，移動到被覆蓋的 – kamil

好東西是：打開我的頁面和暗黑媒體頁面......當你向下滾動我的一個背景時，另一個背景被覆蓋，而在他們的網站一個背景，讓說，向上移動的覆蓋insted的

這是因爲diablomedia.com使用視差滾動效果，它允許不同的背景以不同的速度滾動，從中你是錯覺談論。

這裏是一個教程鏈接和更多信息，關於這個視差滾動技術：One page website, vertical parallax

我希望這更多的是你所期待的。

來源

2011-11-21 13:53:06 asalvo1

這正是我一直在尋找:)我認爲實現它到我的頁面 – kamil

jQuery的CSS不同背景的部分之間的平滑滾動

回答

相關問題