背景圖像的視差滾動教程

Question

花了幾天的時間弄清楚為什么我似乎無法使視差滾動在我正在工作的網站上為一張圖片工作，然后終於在這里發布了。 所以到目前為止，我有這段代碼：

HTML：

<div class="intro">
[a bunch of stuff here]
</div>

CSS：

.intro {
   background: url(../images/IMG_100.png) 50% 0 fixed; 
   background-position: center;
   margin: 0 auto; 
   width: 100%;
   box-shadow: 0 0 50px rgba(0,0,0,0.8);
   padding: 100px 0;
}

我已經嘗試了所有教程來實現簡單的視差滾動效果，但是就我的情況來看，它們似乎並不起作用。 對我而言，最有前途的是使用skrollr.js插件-我嘗試在div標簽中添加以下內容：

<div id="intro" class="intro"
        data-bottom="opacity:1;background-position: 0px -50px;"
        data-center="opacity:1;background-position: 0px 0px;"
        data-top="opacity:1;background-position: 0px 50px;">

然后，我在html的末尾初始化了skrollr：

<script type="text/javascript" src="js/skrollr.js"></script>
<script>
    window.onload = function() {
        skrollr.init();            
    }
</script>

...不起作用。 我對此還很陌生，因此任何幫助將不勝感激！

Answer 1

我認為您的主要div的id應該等於skrollr-body而不是intro 。

第一次編輯

實際上，我看到有些情況下不需要將主id命名為scrollr-body 。 由於我找不到任何官方文檔，因此本教程也許可以幫助您達到不同的效果。

檢查問題中摘錄的小提琴 。

第二次編輯

我將您的html代碼更改為此

<section id="skrollr-body">
    <div class="intro"
        data-bottom="opacity:1;background-position: 0px -50px;"
        data-center="opacity:1;background-position: 0px 0px;"
        data-top="opacity:1;background-position: 0px 50px;">
        <h1>Content in here</h1>
        <p>first big text block</p>
        <p>second huge text block</p>
    </div> 
</section>

我也將.info類的background屬性更改為此

background: url('bg-image.jpg') no-repeat fixed center;

但隨時可以嘗試價值觀。 檢查工作提琴