Webleb - Code-Snippets - Der Überwältigungsalgorithmus

<body>

<div class="animation-container">
    <div class="notification-container">
      <div class="notification" style="animation-delay: 0s; left:-230px">Notificação 1</div>
      <div class="notification" style="animation-delay: 2s;left:-200px">Notificação 2</div>
      <div class="notification" style="animation-delay: 4s;left:-190px">Notificação 3 </div>
      <div class="notification" style="animation-delay: 6s;left:-165px">Notificação 4</div>
      <div class="notification" style="animation-delay: 8s;left:-150px">Notificação 5 </div>
      <div class="notification" style="animation-delay: 10s;left:-130px">Notificação 6</div>
      <div class="notification" style="animation-delay: 12s;left:-110px">Notificação 7 </div>
      <div class="notification" style="animation-delay: 14s;left:-90px"> Notificação 8 </div>
      <div class="notification" style="animation-delay: 16s;left:-70px">Notificação 9</div>
      <div class="notification" style="animation-delay: 18s;left:-50px">Notificação 10</div>
      <div class="notification" style="animation-delay: 20s;left:-30px">Notificação 11</div>
      <div class="notification" style="animation-delay: 22s;left:-10px">Notificação 12</div>

</div> 
  </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.animation-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: #000;
}

.notification {
  position: absolute; 
  width: 100px; 
  height: 100px; 
  border-radius: 10px;
  background-color: #fff;
  color: #333; 
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.animation-container .notification-container { /* Container para as notificações.*/
  position: relative; /* Garante que as notificações sejam posicionadas corretamente*/
  display: flex; /* Permite que as notificações sejam dispostas em linha*/
  gap: 10px; /* Espaçamento entre as notificações*/
  /* Animação para criar o efeito de repetição infinita e preenchimento do espaço*/
  animation: notification-loop 20s linear infinite;
}

.notification-container .notification { /* Styles para as notificações individuais*/
  margin-left: 50px;
  /* Cria um deslocamento inesperado para emular a sensação de scroll infinito*/
}

.notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #f00;
    animation: expand-red 2s linear infinite;
}

@keyframes notification-loop {
  0% {
    transform: translateX(0); /*  Posição inicial das notificações*/
  }
  20% {
    transform: translateX(100%); /*  Animação para deslocar as notificações*/
    opacity: 0.8; /* Diminui a opacidade para criar o efeito de sobreposição*/ 
  }
  40% {
    transform: translateX(200%);
    opacity: 0.8; 
  }
  60% {
    transform: translateX(300%); /*  Animação para continuar o deslocamento */
    opacity: 0.6; 
  }
  80% {
    transform: translateX(400%); 
    opacity: 0;
  }
  100% {
    transform: translateX(500%); 
    opacity: 0;  /* Redução da opacidade para desaparecer*/ 
  }
}

@keyframes expand-red {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

Validating your code, please wait...

HTML

CSS

<body>

</div> 
  </div>

.notification-container .notification { /* Styles para as notificações individuais*/
  margin-left: 50px;
  /* Cria um deslocamento inesperado para emular a sensação de scroll infinito*/
}

.notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #f00;
    animation: expand-red 2s linear infinite;
}

@keyframes expand-red {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}