..:: Testo e immagini scorrevoli verso l'alto ::..

Box con testo che scrolla verso l'alto
Realizzato con classi css e animazione @keyframes
Molto semplice da personalizzare e si può
scrivere tutto il testo di cui si ha bisogno, anche dei link
il testo si blocca al passaggio del mouse... Penelope ♥

<style type="text/css">
  /* Elemento contenitore base */
  .box {
  display: inline-block;
  width: 400px;
  height: 120px;
  overflow: hidden; /* Nasconde il testo fuori dal box */
  border: 5px solid #909753;
  background-color:#faffce;
  font-family: 'Georgia', serif; 
  font-size: 16px; 
  color : #6c7238; 
  padding: 10px;
}
/* Elemento contenitore testo */
.text {
  display: block;
  line-height: 1.5em; /* spazio righe testo */
  transform: translateY(100%); /* posizione iniziale */
  animation: scroll-up 8s linear infinite; /* durata regolabile */
}
/* Animazione verticale */
@keyframes scroll-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  5% {
    opacity: 1; /* rende più fluido il movimento */
  }
  100% {
    transform: translateY(-100%);
    opacity: 1;
  }
}
/* Pausa al passaggio del mouse */
.box:hover .text {
  animation-play-state: paused;
}
</style>

<div class="box">
  <div class="text">
    Spazio scrivi testo....<br>
    scrivi testo....<br>
    scrivi testo....<br>
    scrivi testo....<br>
    scrivi link
    <a target="_blank" href="url-pagina">nome</a>
  </div>

Dai un giudizio a questo tutorial... Grazie ^_^

💻 ✨ Apprezzato 100% Voti totali: 1 Rating... 5

Commentario...

Nickname

Home page

B I U URL

Invia commento