javascript - How to smoothly transition and change background color while scrolling using CSS? - Stack Overflow

admin管理员组

文章数量:1317909

I wanted to smoothly transition and change background color while scrolling, preferably using just CSS, and came across the following as a good example: /

How can I achieve the smooth transition in changing the background color? And also when a button is clicked on the navigation bar, navigate to that particular section of the page? I attempted to check the source code but wasn't any help. The whole source code is in 1 line.

Thank you and will be sure to vote up and accept answer.

I wanted to smoothly transition and change background color while scrolling, preferably using just CSS, and came across the following as a good example: https://minimill.co/

How can I achieve the smooth transition in changing the background color? And also when a button is clicked on the navigation bar, navigate to that particular section of the page? I attempted to check the source code but wasn't any help. The whole source code is in 1 line.

Thank you and will be sure to vote up and accept answer.

• javascript
• html
• css
• css-animations

Share Improve this question Follow asked Feb 9, 2017 at 20:39 Dan MeDan Me 2,16344 gold badges2121 silver badges1919 bronze badges 4

• 1 A good example on how to change the background color while scrolling is on this link: https://codepen.io/Funsella/pen/yLfAG, or the second version of this in this link http://codepen.io/Funsella/pen/dpRPYZ – Thanasis1101 Commented Feb 9, 2017 at 20:44
• @Thanasis Wow thank you so much but it is using a framework/plugin? And would there be an alternative to achieving it without using CSS? – Dan Me Commented Feb 9, 2017 at 20:48
• Do you mean without using javascript? Because on the question you say "preferably using just CSS". – Thanasis1101 Commented Feb 9, 2017 at 20:52
• The first link uses the scrollie jQuery Plugin. The second link uses the in-view plugin. And they both use jQuery. In general you can see which plugins are used by clicking the little settings button left from the title JS. – Thanasis1101 Commented Feb 9, 2017 at 21:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

WITHOUT EXTRA PLUGINS

If you want to use only JavaScript then you can go about this solution.

In the code below I have 3 divs and each one has the attribute data-color which contains the color that we want to have on the background when the user is over that div. I made it so the color changes not just when the div is on top of the page but when we are after the 2/3 of the previus div.

When the user scrolls, the function below document.onscroll = function() { is called. This function loops through all the divs (credits: https://stackoverflow./a/11291363/7053344) and if (if (scrollTop > curDiv.offsetTop - heightBefore){) the scroll top is bigger than the top of a div (curDiv.offsetTop) minus the 1/3 of the hight of the previous div (heightBefore), then the background is changed according to the div's data-color attribute. The smooth transition for the change of the background color is achieved by this line: transition: background 1.5s; on the CSS.

Also included below are the jumps that you wanted. From the first div there is a link that sends you to the second div etc. You can modify them to fit your navigation bar. In order to understand jumps better you can look here.

JSFiddle: https://jsfiddle/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>

UPDATE

In order to make it work on different browsers too, you must add these lines in the 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;

and then change the scrollTop initialization in javascript from this:

scrollTop = document.documentElement.scrollTop;

to this:

scrollTop = window.pageYOffset;

You can test it in this updated JSFiddle.

Sources for this update:

• css3 background-size transition animation in Webkit doesn't work... Bug? Or wrong syntax?
• document.documentElement.scrollTop return value differs in Chrome

---

WITH EXTRA PLUGINS

As for your question:

smoothly transition and change background color while scrolling

as I wrote in the ment these sources are very helpful:

• https://codepen.io/Funsella/pen/yLfAG
• http://codepen.io/Funsella/pen/dpRPYZ

The examples in these links use javascript, jquery and other plugins, which I think are neccesary.

As for your question:

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

this link explains it very well:

• http://www.myhtmltutorials./jump.html

Below there is a small example of what you want, that was created by using and bining content from the links above:

$( 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws./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>

Other approaches:

• jquery change background color user scroll
• http://jsfiddle/cgspicer/V4qh9/
• How To Change A Page’s Background As The User Scrolls

Try this css:

 -webkit-transition: background-color 1000ms linear; 

see my fiddle i did quickly: https://jsfiddle/kreza/4jfy1rhg/2/

本文标签： javascriptHow to smoothly transition and change background color while scrolling using CSSStack Overflow