Adresse
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Webers Webdesign
Kontakt
Ruhetag - öffnet am Montag (30.06.) um 08:00 Uhr
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren
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
}
}