1. 首页
  2. 问答
  3. 如何在使用CSS滚动时平滑过渡和更改背景色？

如何在使用CSS滚动时平滑过渡和更改背景色？

2017-02-09 63 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

相关问题

 相关问题