Light and delete background content with Animation

Asked

Viewed 103 times

0

I wanted to do an effect with the Animation or Transition CSS3 that when the red square passes, the background appears (the yellow background with the texts) and then erases immediately after the red square has finished passing.

Below is as much as I could do, I could not finish this effect at all. Is that possible? Thanks in advance!

I put an effect in the background using the mouse event Hover, 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

1 answer

1


I made an example, but I don’t know the intensity or the time you will want, so to regulate the way you want, you need to regulate only these values:

Ease - The time of animation

normal - When the excitement begins

fadein - Intensity of the 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 the animation, in the middle it gets 0% and in the end 100% again, and as the total time of the animation and 10 seconds (10s Ease), which is the same time of the square then the animation happens 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>

  • Okay, a question, if it was an infinite loop and that square was rotating in circles with a certain circumference, or even in an infinite line, would it be possible to make it fade away where it went and illuminate only where it is? Thank you for now, that’s about it, I didn’t express myself correctly.

  • You should be able to make this circle effect with some image, see this answer, I believe it will help a lot: https://stackoverflow.com/questions/8286550/transparent-hollow-or-cut-out-circle

  • 1

    I managed to find a way here. Thank you!

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.