Smooth transition of background-color

Question

I have a problem with the color transition on my site.

Basically, I want to transition from a black background-color to white but I want it to go like on this site https://bullmade.dk/ - smooth (check the inspect when you scroll or the video below). https://streamable.com/w3uso2

I tried it like this but it doesn't work smoothly on mobile...

body {
  background-color:rgba(0,0,0);
  -webkit-transition: background-color .3s linear;
    -ms-transition: background-color .3s linear;
    transition: background-color .3s linear;
  will-change: background-color;
}

I really appreciate any help you can provide.

FYI: The CSS transition property is standard and has been for several years now. Vendor prefixes are not needed. — Scott Marcus, Jun 21 '22 at 21:05
@ScottMarcus But will it on old browers? Say from 5 years ago or more? — Lexus de Vinco, Jun 21 '22 at 21:10
Please could you put a runnable snippet into your question so we can see the problem for ourselves? See https://stackoverflow.com/help/minimal-reproducible-example for help with doing this. — A Haworth, Jun 21 '22 at 21:15
check this [link](https://stackoverflow.com/questions/55669561/is-it-possible-to-change-this-div-color-on-scroll-using-purely-css) they are suggesting that it is not possible to approach onScroll with pure CSS, you need some Javascript + CSS to do that :) — Omar Dieh, Jun 21 '22 at 21:26
CSS 3 was standardized over 5 years ago. Vendor prefixes aren’t meant to be in use forever. — Scott Marcus, Jun 21 '22 at 23:17

score 1 · Answer 1 · answered Jun 21 '22 at 21:51

Here is my code, but it's not working smoothly like on the example it just changes from black to white not step by step and I get some lag on mobile.

I got elementor sections with data-color attribute I use CSS body and JS to make the transition based on scroll position.

jQuery(document).ready(function( jQuery ) {
    jQuery(window).on('scroll touchmove', function() {

        if (jQuery(document).scrollTop() >= jQuery('#one').position().top) {
            jQuery('body').css('background-color', jQuery('#one').attr('data-color'));
        }

        if (jQuery(document).scrollTop() > jQuery('#two').position().top-50) {
            jQuery('body').css('background-color', jQuery('#two').attr('data-color'));
        }

    });
})

body {
  background-color:rgb(0,0,0);
  -webkit-transition: background-color .3s linear;
    -ms-transition: background-color .3s linear;
    transition: background-color .3s linear;
  will-change: background-color;
}
h1
{
font-family:'Arial', sans-serif;
font-weight:800;
font-size:35px;
}
section
{
  height:100vh;
  color:#fff;
  margin: auto;
  width:100%;
  text-align:center;
}
section h1
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#two h1
{
color:#000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section id="one" data-color="rgb(0,0,0)">
<h1>Example</h1>
</section>
<section id="two" data-color="rgb(255,255,255)">
<h1>Example</h1>
</section>

score 0 · Answer 2 · answered Jun 21 '22 at 21:48

0

Something like this maybe?

body {
  background-color: rgba(0,0,0);
  animation: backgroundFade .3s;
}

@keyframes backgroundFade {
  0%   {background-color: rgba(255,255,255);}
  100%   {background-color: rgba(0,0,0);}
}

<body></body>

answered Jun 21 '22 at 21:48

Eric Breyer

720
1
10

Might work but how can i implement animation in my case. I need to have the color changed by the JS, basically, JS code needs to check what data attributes the HTML element holds and change the color to that attribute. – Goran Taskov Jun 21 '22 at 21:55

score 0 · Answer 3 · answered Jun 24 '22 at 14:33

The answer was GSAP ScrollTrigger, and here is how

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.section').forEach((section, i) => {
  
  if(section.getAttribute('data-color') !== null) {
    
    var colorAttr = section.getAttribute('data-color')
    
    gsap.to('body', {
      backgroundColor: colorAttr === "dark" ? gsap.getProperty("html", "--dark") : gsap.getProperty("html", "--light"),
      immediateRender: false,
      scrollTrigger: {
        trigger: section,
        scrub: true,
        start:'top bottom',
        end: '+=100%'
      }
    });

  }
  
});

:root {
    --light: #fff;
    --dark: #000;
}

body{
  background:var(--dark);
}
section
{
height:100vh;
text-align:center;
padding:50px;
}
.txt-1
{
color:#fff;
}
.txt-2
{
color:#000;
}

<section class="section" data-color="dark">
<h1 class="txt-1">EXAMPLE</h1>
</section>
<section class="section" data-color="light">
<h1 class="txt-2">EXAMPLE</h1>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

Smooth transition of background-color

3 Answers3