个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 09:10:36 37 4
gpt4 key购买 nike

我想在滚动时平滑地过渡和更改背景颜色，最好只使用 CSS，并且遇到了以下例子:https://minimill.co/

如何实现背景颜色变化的平滑过渡？还有当单击导航栏上的按钮时，导航到页面的特定部分？我试图检查源代码但没有任何帮助。整个源代码在 1 行中。

谢谢您，一定会投票并接受答案。

最佳答案

没有额外的插件

如果您只想使用 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改变背景> 属性。背景颜色变化的平滑过渡是通过以下行实现的:transition: background 1.5s; 在 CSS 上。

下面还包括您想要的跳跃。从第一个 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++ )
    {
    		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){
        		heightBefore = allDivs[i-1].offsetHeight / 3;
        }
        
        if (scrollTop > curDiv.offsetTop - heightBefore){
        		color = curDiv.getAttribute("data-color");
          	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>

更新

为了使其也适用于不同的浏览器，您必须在 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 中对其进行测试.

本次更新的来源:

带有额外的插件

关于你的问题:

smoothly transition and change background color while scrolling

正如我在评论中所写，这些资源非常有用:

这些链接中的示例使用了javascript、jquery和其他插件，我认为这是必要的。

关于你的问题:

when a button is clicked on the navigation bar, navigate to that particular section of the page

这个链接解释得很好:

下面是您想要的一个小示例，它是通过使用和组合上面链接中的内容创建的:

$( 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>

其他方法:

关于javascript - 如何在使用 CSS 滚动时平滑过渡和更改背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42146414/

37 4 0
文章推荐： 使用单词列表的 Python 字符串比较
文章推荐： java - 根据字符串移动 Recyclerview 项目位置
文章推荐： Javafx/FXML : conflict between initialize() method and FXML Loader:Initialize: NullPointerException, FXML.LoadException
文章推荐： linux - 为什么 echo `cat file` 会丢失所有格式？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com