"Masking" animation inside a div

Question

I've made a nice film grain animation that im putting over a webpage to make a nice 4:3 old movie type look, however, I cant work out how to confine the animation to the div. I'm using Bootstrap if it effects it. Basically, I only want the grain to be inside the div so that it creates a black bar look outside. Many thanks! Code as follows:

#titleName {
  font-family: 'Abril Fatface', cursive;
  font-size: 4vw;
  text-align: center;
  white-space: nowrap;
  background-color: rgb(68, 68, 68);
  color: rgb(255, 255, 255);
  margin-top: 0px;
}

#titleName:after {
  animation: grain 2s steps(3) infinite;
  background-image: url("http://creativeloads.com/foto/seamless-film-grain-294.jpg");
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.1;
  position: fixed;
  top: -100%;
  width: 300%;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0)
  }
  10% {
    transform: translate(-5%, -10%)
  }
  20% {
    transform: translate(-15%, 5%)
  }
  30% {
    transform: translate(7%, -25%)
  }
  40% {
    transform: translate(-5%, 25%)
  }
  50% {
    transform: translate(-15%, 10%)
  }
  60% {
    transform: translate(15%, 0%)
  }
  70% {
    transform: translate(0%, 15%)
  }
  80% {
    transform: translate(-15%, 5%)
  }
  90% {
    transform: translate(-10%, 10%)
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF=8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="scss/custom.scss">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
  <title>Home</title>
</head>

<body style="background-color:rgb(0, 0, 0);">
  <script src="https://unpkg.com/@popperjs/core@2.4.0/dist/umd/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <header>
    <!-- Nav Bar -->
  </header>
  <main>
    <!--- Content -->
    <div id="titleName" class="container">
      TITLE
      <div class="noise"></div>
    </div>
  </main>
  <footer>
    <!--- Footer  -->
  </footer>
</body>

</html>

Related: [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) — Sercan, Dec 30 '21 at 20:47

score 0 · Answer 1 · answered Dec 31 '21 at 10:26

From what I gathered regarding your code it seems like you have no set width or height to your container, if you want to limit your child element you can set its parent width and let your grain be width: 100%;

Another solution is to create an svg rectangle and use it as a clip-path to your div.

{I’ll add the code once I’m on my laptop}

"Masking" animation inside a div

1 Answers1