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

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/

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

Share Improve this question asked Feb 9, 2017 at 20:39 Dan Me 2,1634 gold badges21 silver badges19 bronze badges

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/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

2 Answers 2

与本文相关的文章

评论列表(0)