<style>
* {
  margin: 0;
  padding: 0;
}
 
body {
  height: 100vh;
  overflow: hidden;
  background-color: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
 
  & p {
    width: 80%;
    max-width: 800px;
    font-size: 1.6em;
    color: #fff;
    letter-spacing: 2px;
    padding: 20px 40px;
 
    & span {
      position: relative;
      cursor: pointer;
      display: inline-block;
      user-select: none;
 
      &.active {
        animation: Smoke 3s linear forwards;
        transform-origin: top right;
      }
    }
  }
}
 
@keyframes Smoke {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
 
  30% {
    opacity: 1;
    pointer-events: none;
  }
 
  100% {
    opacity: 0;
    filter: blur(20px);
    transform: translate(400px, -400px) rotate(3turn) scale(3.5);
  }
}
  
</style>
<p>
<font color="DimGray"> Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig.
    <br><br>
    Wir haben einige geschützte Bereiche - wie z.B. • Private Foto-Galerie für Mitglieder.
    <br><br>
    Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden.
    <br><br>
    Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will.
    <br><br>
    Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. 
    <br>
 
    Danke!
    <br><br>
    Viel Spaß</font>
</p><br><br>
    <center><img style="width: 300px; max-width: 1420px;" src="//files.homepagemodules.de/b916726/a_26_0b9bef5e.png"></center><br><br>
<br>
<script>
const p = document.querySelectorAll("p");
p.forEach((text) => {
  text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>");
});
 
const letters = document.querySelectorAll("span");
for (let i = 0; i < letters.length; i++) {
  letters[i].addEventListener("mouseover", () => {
    letters[i].classList.add("active");
  });
}
  
</script>  
 

<style>
.rauchCon {
  padding: 150px 10px 10px 10px;
  overflow: hidden;
  background-color: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
 
  & .rauchTe {
    width: 80%;
    max-width: 800px;
    font-size: 1.6em;
    color: #fff;
    letter-spacing: 2px;
    padding: 20px 40px;
 
    & span {
      position: relative;
      cursor: pointer;
      display: inline-block;
      user-select: none;
 
      &.active {
        animation: Rauch 3s linear forwards;
        transform-origin: top right;
      }
    }
  }
}
 
@keyframes Rauch {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
 
  30% {
    opacity: 1;
    pointer-events: none;
  }
 
  100% {
    opacity: 0;
    filter: blur(20px);
    transform: translate(400px, -400px) rotate(3turn) scale(3.5);
  }
}
  
</style>
 
<div class="rauchCon">
  <div class="rauchTe">
 
    Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig.
    <br><br>
    Wir haben einige geschützte Bereiche - wie z.B. • Private Foto-Galerie für Mitglieder.
    <br><br>
    Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden.
    <br><br>
    Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will.
    <br><br>
    Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. 
    <br>
 
    Danke!
    <br><br>
    Viel Spaß
 
</div>
<br><br>
    <center><img style="width: 300px; max-width: 1420px;" src="//files.homepagemodules.de/b916726/a_26_0b9bef5e.png"></center><br><br>
<br>
</div>
 

<script>
const rauch = document.querySelectorAll(".rauchTe");
rauch.forEach((text) => {
  text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>");
 
});
 
const letters = document.querySelectorAll("span");
for (let i = 0; i < letters.length; i++) {
  letters[i].addEventListener("mouseover", () => {
    letters[i].classList.add("active");
  });
}
  
</script>