Question 229058 in Html Question posted in
Some basic documentation can be found here.

Html – Automatic background change with JavaScript and CSS

I have used mixed colors for the background of a page of my site.

Now I want to add new combination colors and change these colors automatically every 5 seconds.
I don’t know exactly where to start and I just put the code I used to change the color of the element once again for the background of the page and it didn’t work at all.

const Border_Main = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        const Content = entry.target.querySelector('#background');

        if (entry.isIntersecting) {
            Content.classList.add('background-body');
            return;
        }
        Content.classList.remove('background-body');
    });
});

Border_Main.observe(document.querySelector('body'));
html,body{
    width: 100%;
    overflow-x: hidden !important;
    height: 100%;
    overflow-y: hidden !important;
}

#background{
    width: 100%;
    height: 100%;
    background: #39c787;
    background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab));
    transition: all 5s ease;
    -webkit-transition: all 5s ease;
    -moz-transition: all 5s ease;
    -o-transition: all 5s ease;
    -ms-transition: all 5s ease;
}

.background-body{
    background: #e0922d !important;
    background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !important;
    transition: all 5s ease;
    -webkit-transition: all 5s ease;
    -moz-transition: all 5s ease;
    -o-transition: all 5s ease;
    -ms-transition: all 5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="background">


</body>
Tags:

2

Answers


  1. 0

    I don’t think that an IntersectionObserver is needed here. Similar to your attempt, here is one example where background-body is added or removed every five seconds from the classList.

    var i = 0;
function changeBackgroundColor() {
  var background = document.getElementById("background");

  if (i % 2 === 0) {
    background.classList.remove("background-body");
  } else {
    background.classList.add("background-body");
  }
  i = i + 1;
}
setInterval(changeBackgroundColor, 5 * 1000);
    html,body{
  width: 100%;
  overflow-x: hidden !important;
  height: 100%;
  overflow-y: hidden !important;
}

#background{
  width: 100%;
  height: 100%;
  background: #39c787;
  background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#ca83ddc4), to(#7874e3f3), color-stop(70%, #dfa450ab));
  transition: all 5s ease;
  -webkit-transition: all 5s ease;
  -moz-transition: all 5s ease;
  -o-transition: all 5s ease;
  -ms-transition: all 5s ease;
}

.background-body{
  background: #e0922d !important;
  background-image: -webkit-gradient(linear, 15% 0%, 75% 84%, from(#9283ddc4), to(#22ff12d1), color-stop(70%, #c550dfab)) !important;
  transition: all 5s ease;
  -webkit-transition: all 5s ease;
  -moz-transition: all 5s ease;
  -o-transition: all 5s ease;
  -ms-transition: all 5s ease;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="background"></body>
    Login or Signup to reply.
  2. 0

    why don’t you use setTimeout() method in js and set 5000ms for the time then you can change the color every 5 second

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search