The overwhelm algorithm

Open In Editor Publish Your Code

<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>

CSS

* {
  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%;
  }
}

The overwhelm algorithm

Recommended

Animated Weather Card

Discover the message of the love letter

weather app

HTML

CSS

JS

Recommended

Animated Weather Card

Discover the message of the love letter

weather app

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS