我想添加一些純粹的CSS視差滾動功能到我的網站，但我試過的一切似乎並沒有工作。我也在這裏搜索了答案，但沒有回答我的問題。有沒有人知道我可以如何使用此代碼：http://wolfleader116.github.io/ （對不起，Doctype聲明不像實際文件中那樣縮進。）並添加純CSS視差滾動功能，以便背景以半速滾動？謝謝！如何添加純CSS視差滾動

來源

2014-09-02 Josh

歡迎堆棧溢出。請告訴我們你有什麼到目前爲止已經試過這樣的人可以幫助你，無論你已經找到了路障 – Devin 2014-09-02 03:18:28

嗯...所有的代碼是在http://wolfleader116.github.io/ – Josh 2014-09-02 03:28:53

你應該嘗試至少做到這一點，在某處放置一個測試頁面，或者嘗試在jsfiddle或codepen中重新創建它。然後鏈接到... – 2014-09-02 03:33:34

這是我做了我的網站（WIP）與parralax滾動（http://www.ideathhead.co.uk）：

HTML：

添加使用下面的屬性部分的標籤。（每個部分代表一個幻燈片）

<section name="home" id="home" data-type="background" data-speed="10"> 
      <p class="buzz-out" id="Welcome"></p>      
     </section>

CSS：

這將確保在整個頁面的背景圖片跨越，並調整它的大小爲每分辨率！

#home { 
background: url(img/slide1.png) 50% 0 repeat fixed; 
min-height: 100%; 
background-size: cover; 
margin: 0 auto; 
}

這是字面上的，視差滾動的基本知識，無論如何，如果你對interwebs進一步挖掘，你可以做一些玩弄一些涼的效果，請記住，谷歌是你的朋友！

_________________________________________________________________

下面是可選的，如果你願意用JS的位！

_________________________________________________________________

而且，一個技巧是，如果你想在以後添加按鈕上的滾動順利的某些頁面，然後將它添加到一個JavaScript文件：

JS：

該腳本使頁面滾動更平滑，因此它不會跳轉到頁面的一部分

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

然後，在您的HTML中，在標記中，將href設置爲要滾動到的節的ID，並且它也會順利地執行！作爲一個例子， 這是部分：

<section name="home" id="home" data-type="background" data-speed="10"> 
      <p class="buzz-out" id="Welcome"></p> 
     </section>

這是按鈕：

<a href="#home">CLICK</a>

請記住，這是該ID不是名字，因爲我得到了在第一困惑接着就，隨即！

我很高興幫助:)

來源

2014-09-02 03:30:32 HowToGaming

JS根本就不是純粹的CSS – Devin 2014-09-02 03:34:40

這是可選的，如果您使用的是導航欄，那麼只需點擊一下即可，並且也不會改變效果。 – HowToGaming 2014-09-02 03:36:15

這是在製品;只要確保在iPhone上進行測試。目前無法使用。但是WIP所以你可能已經有了計劃。 – allen1 2014-09-02 04:13:55

你可以試試這個教程。 Tutorial Link 1 Tutorial Link 2

body { 
margin:0; 
padding:0; 
perspective: 1px; 
transform-style: preserve-3d; 
height: 100%; 
overflow-y: scroll; 
overflow-x: hidden; 
font-family: Nunito; 
}

來源

2014-09-02 03:34:37 anik4e

** Someone **懂得_pure_ js的含義;） – mijopabe 2014-09-02 04:02:38

可以使用background-attachment: fixed CSS樣式以創建CSS只視差滾動。這使用了固定的background-image的概念，其餘內容隨頁面一起滾動。

.parallax div{ 
    background-attachment: fixed; 
    height: 50vh; 
    text-indent : -9999px; 
    position : relative; 
    background-position : center center; 
    background-size  : cover; 
     &:nth-child(2n) { 
     box-shadow : inset 0 0 1em #111; 
    } 
}

DEMO

來源

2014-09-02 04:05:35

如何在使用此方法後更改背景圖像的滾動速度（滾動偏移量）？我讀過它與'transform：'屬性有關，但我仍然無法確定如何使用此方法調整速度（使用上面的代碼，在頁面滾動時，視差保持完全靜止，而是希望視差背景以非常緩慢的速度滾動，因爲用戶正在向上/向下滾動，僅使用CSS）。 – 2017-01-01 15:24:51

，同時尋找HTML/CSS代碼庫，我可以用它來創建客戶網站上發現了這個問題。這裏有兩個選項，一個非常簡單，另一個更復雜。兩者似乎都適用於手機和平板電腦。 CSS可能不適用於舊瀏覽器，但這可能不是問題。

下面是簡單的解決方案，很容易理解/使用：

https://bit.ly/1JDl5Wg

這裏是更復雜，但更多的功能例如（向下滾動，使用WebKit修復演示代碼）：

http://keithclark.co.uk/articles/pure-css-parallax-websites/

兩種解決方案都從基思·克拉克。這些對我來說是非常有用的起點。希望他們會幫助任何對此主題感興趣的人。

來源

2015-05-12 01:36:51 FredHead

如何添加純CSS視差滾動

回答

下面是可選的，如果你願意用JS的位！

相關問題