Turn on and off background content with animation

Question

Turn on and off background content with animation

Navigation

#1 by (1 votes)

0

I wanted to make an effect with animation or transition of CSS3 that when the red square passes, the background appears (the yellow background with the texts) followed as the red square finished passing.

Below is the most I could do, I could not finish this effect at all. It is possible? Thank you!

I put an effect on the background using the mouse hover event, I want this same effect, but not with the mouse but with the red square passing.

<!doctype html>
<html>
<head>  
    <style>
	#yellow {
        	background-color: yellow;
        }
    
        #shadow {
          background-color: black;
          width: 100%;
          height: 2048px;
          position:absolute; 
          left:1px; 
          top:1px;
          transition: all 3s ease;
        }

        #shadow:hover {
          opacity: 0;
        }

        #square {
          margin-top: 10px;
          width: 20px;
          height: 20px;
          background: red;
          position: relative;
          -webkit-animation: mymove 10s infinite; 
      	}

        @-webkit-keyframes mymove {
            from {left: 0px;}
            to {left: 600px;}
        }
    </style>
</head>
<body id="yellow">
	<h1>Estou aqui!</h1><br><br>
    <h4>Texto teste</h4>
	
    <div id="shadow"></div>
    <div id="square"></div>
</body>
</html>

javascript jquery html5 css3

asked by anonymous 16.09.2017 / 04:08

1 answer

How to use functions that are in a different file? - Python Alternative Flow in Use Case Alternative Flow Can?

score 1 · Accepted Answer

I did an example, but I do not know the intensity or the time you will want, so to regulate as you wish, you need to regulate only these values:

ease - The animation time

normal - When the animation will start

fadein - Intensity of fade effect

animation:10s ease 0s normal forwards 25 fadein;

-webkit-animation:10s ease 0s normal forwards 25 fadein;

Here it starts with 100% of the opacity animation, in the middle it gets 0% and in the end 100% again, and as the total animation time is 10 seconds (10s ease), which is the same time as square then the animation happens in the way you explained it.

0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }

<!doctype html>
<html>
  <head>  
    <style>
      #yellow {
        background-color: yellow;
      }
      #shadow {
        background-color: black;
        width: 100%;
        height: 2048px;
        position:absolute; 
        left:1px; 
        top:1px;
        opacity:1;
      }
      #shadow {
        animation:10s ease 0s normal forwards 25 fadein;
        -webkit-animation:10s ease 0s normal forwards 25 fadein;
      }
      @keyframes fadein{from{opacity:0}
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
      }    
      @-webkit-keyframes fadein{from{opacity:0}
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
      }
      #square {
        margin-top: 10px;
        width: 20px;
        height: 20px;
        background: red;
        position: relative;
        -webkit-animation: mymove 10s infinite; 
      }
      @-webkit-keyframes mymove {
        from {left: 0px;}
        to {left: 600px;}
      }
    </style>
  </head>
  <body id="yellow">
    <h1>Estou aqui!</h1><br><br>
    <h4>Texto teste</h4>

    <div id="shadow"></div>
    <div id="square"></div>
  </body>
</html>