0

Estoy trabajando en una página de un juego de terror en la cual la capa de fondo es una imagen de terror, pero la capa de frente es de color negro.

Lo que quiero lograr es un efecto en el cual se vea una imagen negra con letras y que en determinado momento el fondo negro haga un parpadeo (estilo flashes) y se vea la imagen de fondo. El estilo es como en los vídeos en el cuales está el cuarto oscuro y la luz hace flashes y se ve un fondo terrorífico.

El efecto funciona bien, pero el problema es que la primer capa no la toma pero si hacen el efecto las letras, lo cual no es necesario hacerlo y no puedo resolverlo.

body {
background-image: url(https://memeworld.funnyjunk.com/pictures/A+chernobyl+horror+story+by+stefan+koidl_27d56d_7079691.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}


.flicker-4 {
    background-color: #000;
    color: #fff;
	-webkit-animation: flicker-4 8s linear infinite both;
	        animation: flicker-4 8s linear infinite both;
}

@-webkit-keyframes flicker-4 {
    0%,
    100% {
      opacity: 1;
    }
    31.98% {
      opacity: 1;
    }
    32% {
      opacity: 0;
    }
    32.8% {
      opacity: 0;
    }
    32.82% {
      opacity: 1;
    }
    34.98% {
      opacity: 1;
    }
    35% {
      opacity: 0;
    }
    35.7% {
      opacity: 0;
    }
    35.72% {
      opacity: 1;
    }
    36.98% {
      opacity: 1;
    }
    37% {
      opacity: 0;
    }
    37.6% {
      opacity: 0;
    }
    37.62% {
      opacity: 1;
    }
    67.98% {
      opacity: 1;
    }
    68% {
      opacity: 0;
    }
    68.4% {
      opacity: 0;
    }
    68.42% {
      opacity: 1;
    }
    95.98% {
      opacity: 1;
    }
    96% {
      opacity: 0;
    }
    96.7% {
      opacity: 0;
    }
    96.72% {
      opacity: 1;
    }
    98.98% {
      opacity: 1;
    }
    99% {
      opacity: 0;
    }
    99.6% {
      opacity: 0;
    }
    99.62% {
      opacity: 1;
    }
  }
@keyframes flicker-4 {
    0%,
    100% {
      opacity: 1;
    }
    31.98% {
      opacity: 1;
    }
    32% {
      opacity: 0;
    }
    32.8% {
      opacity: 0;
    }
    32.82% {
      opacity: 1;
    }
    34.98% {
      opacity: 1;
    }
    35% {
      opacity: 0;
    }
    35.7% {
      opacity: 0;
    }
    35.72% {
      opacity: 1;
    }
    36.98% {
      opacity: 1;
    }
    37% {
      opacity: 0;
    }
    37.6% {
      opacity: 0;
    }
    37.62% {
      opacity: 1;
    }
    67.98% {
      opacity: 1;
    }
    68% {
      opacity: 0;
    }
    68.4% {
      opacity: 0;
    }
    68.42% {
      opacity: 1;
    }
    95.98% {
      opacity: 1;
    }
    96% {
      opacity: 0;
    }
    96.7% {
      opacity: 0;
    }
    96.72% {
      opacity: 1;
    }
    98.98% {
      opacity: 1;
    }
    99% {
      opacity: 0;
    }
    99.6% {
      opacity: 0;
    }
    99.62% {
      opacity: 1;
    }
  }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Terror Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/06494d4185.js" crossorigin="anonymous"></script>
</head>
<body class="flicker-4">
<div class="container">
<h1 class="text-center pt-5">Terror Site</h1>


</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>


Codigo actualizado

body {
background-image: url(https://memeworld.funnyjunk.com/pictures/A+chernobyl+horror+story+by+stefan+koidl_27d56d_7079691.jpg);
background-size: cover;
margin: 0;
}



.flicker-4 {
background-color: #000;
color: #fff;
height: 100vh;
-webkit-animation: flicker-4 6s linear infinite both;
animation: flicker-4 6s linear infinite both;
}

@keyframes flicker-4 {
    0%,
    100% {
      opacity: 1;
    }
    31.98% {
      opacity: 1;
    }
    32% {
      opacity: 0;
    }
    32.8% {
      opacity: 0;
    }
    32.82% {
      opacity: 1;
    }
    34.98% {
      opacity: 1;
    }
    35% {
      opacity: 0;
    }
    35.7% {
      opacity: 0;
    }
    35.72% {
      opacity: 1;
    }
    36.98% {
      opacity: 1;
    }
    37% {
      opacity: 0;
    }
    37.6% {
      opacity: 0;
    }
    37.62% {
      opacity: 1;
    }
    67.98% {
      opacity: 1;
    }
    68% {
      opacity: 0;
    }
    68.4% {
      opacity: 0;
    }
    68.42% {
      opacity: 1;
    }
    95.98% {
      opacity: 1;
    }
    96% {
      opacity: 0;
    }
    96.7% {
      opacity: 0;
    }
    96.72% {
      opacity: 1;
    }
    98.98% {
      opacity: 1;
    }
    99% {
      opacity: 0;
    }
    99.6% {
      opacity: 0;
    }
    99.62% {
      opacity: 1;
    }
  }
  
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Terror Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/06494d4185.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="flicker-4">
<div class="container">
<h1 class="text-center pt-5">Terror Site</h1>

</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

2
  • Disculpa no termino de entender el problema, ¿podrías ser mas claro?
    – user128299
    el 6 ene. 2020 a las 20:35
  • Ya actualice la publicacion!
    – user101604
    el 6 ene. 2020 a las 20:43

1 respuesta 1

2

Lo siguiente en razón de que:

  • El body permanezca independiente con un solo color de fondo
  • La aparición y desaparición del div sobre el body sea la que de el efecto buscado
  • Para el caso del texto, perfectamente lo puedes colocar dentro del div incluso dentro de una etiqueta p y así aplicarle estilos de manera simple

Procedimiento

  • El body permanezca independiente con un solo color de fondo
  • Al body le pondría un color de fondo inicial black
  • Posterior cargo un div con la clase .fake al cual le agregaré lo siguiente:
    • La imagen de fondo
    • Le establezco un alto de 100vh para que sea del alto completo del viewport y así logremos cubrir el body visible
    • Al body le quito los márgenes que pudiera tener para que el div cubra todo el espacio visible
    • Yo agregaría el valor en la animación de alternate para poder invertir la secuencia de pasos que sigue la misma cuando acaba

Quedando así la propuesta

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        body{
          background: black;
          margin: 0;
        }
        .fake {
          background: url(https://memeworld.funnyjunk.com/pictures/A+chernobyl+horror+story+by+stefan+koidl_27d56d_7079691.jpg);
          background-size: cover;
          height: 100vh;
          animation: image-generated 2s alternate infinite;
        }
        
        @keyframes image-generated
        {
          0% {
            opacity: 0;
          }
          10% {
            opacity: 1;
          }
          15% {
            opacity: 1;
          }
          20% {
            opacity: 0;
          }
          23% {
            opacity: 1;
          }
          30% {
            opacity: 1;
          }
          40% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
          60% {
            opacity: 1;
          }
          70% {
            opacity: 0;
          }
          80% {
            opacity: 1;
          }
          90% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }
      </style>
    </head>
    <body>
    <div class="fake"></div>
    </body>
    </html>

1
  • Bueno, pude arreglarlo tratando de dejar el body independiente de y agregue el height: 100vh; en el contenido del color de fondo. Pero igualmente tuve que colocar la imagen dentro del body. Gracias por ayuda!
    – user101604
    el 7 ene. 2020 a las 0:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.