CODEWITHSUNDEEP
htmlcss
user14844870
user14844870

Reputation:

how to fix the Color change in my website

I am making a Christmas website but the color of my website is changing as I scroll it doesn't look as I expect because I want the same color of the background when I scroll. It is turning blue from some kind of combination of red. Is there an HTML error or CSS error. Please tell!!!!

enter image description here

@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
*
{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courgette', cursive;
}
body
{
    background: #f00;
    height: 200vh;
}
section
{
    position:fixed;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
section:after
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f00;
    mix-blend-mode: color-dodge;
}
section img#bg
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
section img#moon
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   
}
section img#cloud1
{
    position: absolute;
    top: 100px;
    left: 50px;
    max-width: 600px;
    z-index: 2;
}
section img#cloud2
{
    position: absolute;
    top: 200px;
    right: 50px;
    max-width: 600px;
    z-index: 2;
}
section img#santa
{
    position: absolute;
    bottom: 50px;
    left: -600;
    z-index: 1;
    max-width: 600px;
    transform: scale(0.5);
}
section #tree
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 266px;
    background: url(tree.png);
    background-position-y: 266px;
    z-index: 10;
}
section #text
{
    position: absolute;
    bottom: -400px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 6em;
     z-index: 9;
}
 <!DOCTYPE html>
<html lang="en">
<head>
    <title>Happy Christmas</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
      <img src="bg.jpg" id="bg">
      <img src="moon.png" id="moon">
      <img src="cloud1.png" id="cloud1">
      <img src="cloud2.png" id="cloud2">
      <img src="santa.png" id="santa">
      <div id="tree"></div>
      <h2 id="text">Happy Christmas</h2>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
    <script>
        gsap.to('#moon',{
          scrollTrigger: {
            scrub: 1
          },  
          scale: 1.5,
        })
    </script>
</body>
</html>

Upvotes: 0

Views: 65

Answers (1)

Rojo
Rojo

Reputation: 2869

Remove mix-blend-mode: color-dodge; from section:after

section:after
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f00;
}

mix-blend-mode Changes the color of your elements.

Upvotes: 1

Related Questions