Szukam efektu jak podstawowy na tej stronie https://sendgrid.com/ Strona przedstawia zdanie skoncentrowane, słowo zostanie wymienione, części zdania w lewo i prawo do słowa, płynnie ...

-2
pluto9800 20 marzec 2021, 18:12

1 odpowiedź

Najlepsza odpowiedź
document.addEventListener('DOMContentLoaded',()=>{
const stringsCont = document.querySelector('#strings-cont');
const strings = [...stringsCont.querySelectorAll('.string')];
let active = 0;
next = () =>{
strings.forEach((s,i) => i===active?s.classList.add('active'):s.classList.remove('active'));
  stringsCont.style.width = strings[active].offsetWidth+'px';
  active = (active+1)%strings.length;
}
setInterval(next, 3000);
setTimeout(next,0)
});
h1 {
  font-family: sans-serif;
  font-size: 16px;
  text-align: center;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
#strings-cont{
  position: relative;
  display: inline-flex;
  transition: width .3s ease;
  justify-content: center;
}
.string {
  font-weight: bold;
  transition: opacity .3s ease, top .3s ease;
  position: absolute;
  opacity:0;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.string:before {
  content: '';
  position: absolute;
  top: 100%;
  left:0;
  height: 3px;
  width: 0;
  background-color: violet;
}
.string.active {
  transition: opacity .3s ease;
  opacity:1;
  position: static;
  transform: translateX(0);
  left:0;
  top:0;
}
.string.active:before {
  width: 100%;
  transition: all 2.7s ease;
  transition-delay: .3s;
}
<h1>
Send Email&nbsp;
<span id="strings-cont" style="width:0">
<span class="string">Lorem Ipsum</span>
<span class="string">Dolor Sit Ammet</span>
<span class="string">Consectetur Adipiscing Elit</span>
<span class="string">Sed Do Eiusmod</span>
</span> 
&nbsp;With Confidence
</h1>
1
Yosef Tukachinsky 20 marzec 2021, 16:12