function words_to_single_chars(){
?>
<script>
var textWrapper = document.querySelectorAll('.letters .av-special-heading-tag');
textWrapper.forEach(el => {
const text = el.textContent.trim();
const words = text.split(/\s+/); // in Wörter splitten
let html = '';
let charIndex = 0;
words.forEach(word => {
html += `<span class="word">`;
for (let i = 0; i < word.length; i++) {
html += `<span class="char" style="animation-delay: ${(charIndex * 0.1 + 0.5).toFixed(1)}s;">${word[i]}</span>`;
charIndex++;
}
html += `</span> `;
});
el.innerHTML = html.trim();
});
</script>
<?php
}
add_action('wp_footer', 'words_to_single_chars');#top .letters .av-special-heading-tag {
perspective:1000px
}
#top .letters.far .char {
display:inline-block;
transform-style:preserve-3d;
-webkit-animation-duration:0.5s;
animation-duration:0.5s;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards
}
#top .letters.far .av-special-heading-tag .char {
opacity:0;
transform:translateX(-25px) translateY(-20px) translateZ(-800px);
-webkit-animation-name:far;
animation-name:far
}
#top .letters.breath .av-special-heading-tag .char {
display:inline-block;
white-space:break-spaces;
letter-spacing:0.15em
}
#top .letters.breath .av-special-heading-tag {
--glow-color:white
}
#top .letters.breath .av-special-heading-tag .char {
-webkit-animation:breath 1.2s ease infinite alternate;
animation:breath 1.2s ease infinite alternate
}
/* === some animations to add as trigger class behind letters === */
@keyframes far {
25% {
opacity:1
}
100% {
opacity:1;
transform:translateY(0) translateZ(0) translateX(0)
}
}
@keyframes breath {
from {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
to {
transform:scale(1.25) translateY(-5px) perspective(1px);
text-shadow:0 0 40px #fff;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
}Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen