1. 首頁
  2. 問答
  3. 如何在使用CSS滾動時平滑過渡和更改背景色？

如何在使用CSS滾動時平滑過渡和更改背景色？

2017-02-09 67 views
-1

我希望在滾動的同時平滑過渡和更改背景色，最好只使用CSS，並且遇到以下示例：https://minimill.co/如何在使用CSS滾動時平滑過渡和更改背景色？

如何在更改背景顏色時實現平滑過渡？還有，當導航欄上的按鈕被點擊時，導航到該頁面的特定部分？我試圖檢查源代碼，但沒有任何幫助。整個源代碼在1行中。

謝謝你，一定會投票並接受答案。

來源

2017-02-09 Dan Me

+1

一個很好的例子就是如何在滾動時更改背景顏色的鏈接：[https://codepen.io/Funsella/pen/yLfAG](https://codepen.io/Funsella/pen/ yLfAG），或者這個鏈接的第二個版本[http://codepen.io/Funsella/pen/dpRPYZ](http://codepen.io/Funsella/pen/dpRPYZ） – Thanasis

+0

@Thanasis哇非常感謝你但它使用的是框架/插件？如果不使用CSS，會有替代方案嗎？ –

+0

你的意思是不使用JavaScript？因爲在這個問題上你說「最好只使用CSS」。 – Thanasis

回答

0

無額外的插件

如果你只想使用JavaScript的，那麼你可以去這個解。

在下面的代碼中，我有3個div，每個都有data-color的屬性，其中包含用戶在該div上時我們想要在背景上顯示的顏色。我做到了，不僅當div位於頁面頂部，而且當我們在previus div的2/3之後，顏色也會發生變化。

當用戶滾動時，調用document.onscroll = function() {以下的函數。此函數遍歷所有div（信用：https://stackoverflow.com/a/11291363/7053344），如果（if (scrollTop > curDiv.offsetTop - heightBefore){）滾動頂部大於div的頂部（curDiv.offsetTop）減去前一個div的高度的1/3（heightBefore），則背景根據div的data-color屬性進行更改。背景顏色變化的平滑過渡通過以下線段實現：在CSS上的transition: background 1.5s;。

下面還包括你想要的跳躍。從第一個div有一個鏈接，將您發送到第二個div等。您可以修改它們以適合您的導航欄。爲了更好地理解跳躍，你可以看看here。

的jsfiddle：https://jsfiddle.net/0pe5n97z/2/

var test = document.getElementById("test"); 
 

 
document.onscroll = function() { 
 

 
    scrollTop = document.documentElement.scrollTop; 
 
    test.innerHTML = scrollTop; 
 
    
 
    allDivs = document.getElementsByTagName('div'); 
 

 
    for(i=0; i< allDivs.length; i++) 
 
    { 
 
    \t \t curDiv = allDivs[i]; 
 
     
 
     
 
     // The code below makes the background color change when the 
 
     // scroll top passes the 2/3 of the previous div. 
 
     
 
     heightBefore = 0;  
 
     if (i > 0){ 
 
     \t \t heightBefore = allDivs[i-1].offsetHeight/3; 
 
     } 
 
     
 
     if (scrollTop > curDiv.offsetTop - heightBefore){ 
 
     \t \t color = curDiv.getAttribute("data-color"); 
 
      \t document.body.style.background = color; 
 
     } 
 
       
 
    } 
 
};
body { 
 
    background: green; 
 
    transition: background 1.5s; 
 
}
<body> 
 
<div style="position:fixed" id="test"></div> 
 

 
<center> 
 
<div id="div1" data-color="green"> 
 
    <p>Title goes Here</p> 
 
    <a name="green"> 
 
     <p>Green area</p> 
 
     Go To <a href="#red" style="color:red">Red area</a> 
 
    </a> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div> 
 

 
<div id="div2" data-color="red"> 
 
    <a name="red"> 
 
     <p>Red area</p> 
 
     Go To <a href="#blue" style="color:blue">Blue area</a> 
 
    </a> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div> 
 

 
<div id="div3" data-color="blue"> 
 
    <a name="blue"> 
 
     <p>Blue area</p> 
 
     Return To <a href="#green" style="color:green">Green area</a> 
 
    </a> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div> 
 

 
</center> 
 

 
</body>

UPDATE

爲了使其在不同的瀏覽器上工作過，你必須在CSS中添加這些行：

-webkit-transition: background 1.5s; 
-moz-transition: background 1.5s; 
-ms-transition: background 1.5s; 
-o-transition: background 1.5s; 
transition: background 1.5s;

然後從這個改變在JavaScript中scrollTop的初始化：

scrollTop = document.documentElement.scrollTop;

這樣：

scrollTop = window.pageYOffset;

您可以在此更新JSFiddle測試。

來源本次更新：

與額外的插件

至於你的問題：

順利過渡和轉變的背景顏色，而滾動

正如我在評論中寫道，這些來源是非常有幫助的：

的例子在這些鏈接中使用javascript，jquery和其他插件，我認爲它是必要的。

至於你的問題：

當按鈕被點擊導航欄上，瀏覽網頁

此鏈接解釋了它很好的特定部分：

下面有你想要什麼一個小例子，這是通過使用從上面的鏈接將內容發佈：

$(window).ready(function() { 
 
    
 
    var wHeight = $(window).height(); 
 

 
    $('.slide') 
 
     .height(wHeight) 
 
     .scrollie({ 
 
     scrollOffset : -50, 
 
     scrollingInView : function(elem) { 
 
        
 
      var bgColor = elem.data('background'); 
 
      
 
      $('body').css('background-color', bgColor); 
 
      
 
     } 
 
     }); 
 

 
    });
* { box-sizing: border-box } 
 

 
body { 
 
    font-family: 'Coming Soon', cursive; 
 
    transition: background 1s ease; 
 
    background: #3498db; 
 
} 
 

 
p { 
 
    color: #ecf0f1; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    
 
} 
 

 
a { 
 
    text-decoration: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script> 
 

 
<div class="main-wrapper"> 
 
    
 
    <div class="slide slide-one" data-background="#3498db"> 
 
    <p>Title</p> 
 
    <center>Go To <a href="#green" style="color:green">Green</a>.</center> 
 
    </div> 
 
    
 
    <div class="slide slide-two" data-background="#27ae60"> 
 
     <a name="green"> 
 
     <p>Green area</p> 
 
     <center>Go To <a href="#red" style="color:red">Red</a>.</center> 
 
     </a> 
 
    </div> 
 
    
 
    <div class="slide slide-three" data-background="#e74c3c"> 
 
     <a name="red"> 
 
     <p>Red area</p> 
 
     <center>Page over. Hope that was helpful :)</center> 
 
     </a> 
 
    </div> 
 
    
 
    
 
</div>

其他方法：

來源

2017-02-09 21:43:58 Thanasis

+0

非常感謝您的回覆。在我接受答案並投票之前，只需清理幾件事。你能解釋在哪裏使用javascript，查詢或插件嗎？他們如何運作？那麼'過渡：背景1緩解;'和'數據背景=「＃3498db」'和'* {盒子大小：邊框 - 框}'是做什麼的？ –

+0

一般而言，JavaScript用於動態更改內容。在這個例子中，使用jquery和jquery-scrollie（javascript庫）是爲了使顏色更改變得更加簡單，換句話說就是使用這一行代碼：'$（'。slide'）。height （wHeight）.scrollie（{...'，其中包括一些選項設置（'scrollOffset：-50'，這意味着每個像素顏色將會改變，'scrollingInView：function'在其中我們說我們想要做的 - 在我們的例子中改變背景顏色 - 等等） – Thanasis

+0

'transition：background 1s ease;'命令意味着當背景從一種顏色改變到另一種顏色時，它不會立即發生，但會在1秒後順利改變（更多信息[this]（http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp））。'data-background =「＃3498db」'命令設置每個div的顏色。在這個例子中， 3格，綠色和紅色都是藍色，所以對於每一格都設置顏色應該是什麼樣的。* * {box-sizing：border-box}'命令是這不是非常必要的，但你可以看看[這裏]（https://css-tricks.com/box-sizing/）。 – Thanasis

相關問題

 相關問題