L'algoritmo di sopraffazione

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

20 June 2025

Modello di pagina di accesso HTML

27 June 2025

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

L'algoritmo di sopraffazione

Consigliato

Modulo di accesso turco HTML

Modello di pagina di accesso HTML

Un codice di Mete

HTML

CSS

JS

Consigliato

Modulo di accesso turco HTML

Modello di pagina di accesso HTML

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS