wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Pass variable from shortcode to control animation duration

Browse source
This commit is contained in:
Ben Aultowski 2026-01-01 23:51:27 -05:00
parent ce26044394
commit c80c052701
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/_config/shortcodes.js
View file

@ -2,14 +2,16 @@ import {imageShortcode, imageKeysShortcode} from './shortcodes/image.js';
import {svgShortcode} from './shortcodes/svg.js';
// Text animation shortcode - wraps each letter in a span with animation class
// Speed parameter scales animation duration: 0.5 = 2x slower, 2 = 2x faster (default: 1)
// Speed parameter scales animation duration:
// 0.5 = half speed, 2 = double speed.
const animateText = (content, animation, speed = '1') => {
const letters = content.split('');
const speedNum = parseFloat(speed);
const letterSpans = letters
.map((letter) => {
if (letter === ' ') return ' ';
return `<span class="text-${animation}">${letter}</span>`;
return `<span class="text-${animation}" style="--animation-speed: ${speedNum}">${letter}</span>`;
})
.join('');

12
src/assets/css/global/utilities/text-animations.css
View file

@ -36,7 +36,7 @@
.text-shiver {
display: inline-block;
animation: shiver 0.5s ease-in-out infinite;
animation: shiver calc(0.5s / var(--animation-speed, 1)) ease-in-out infinite;
}
.text-shiver:nth-child(2n) {
@ -65,7 +65,7 @@
.text-wobble {
display: inline-block;
animation: wobble 0.8s ease-in-out infinite;
animation: wobble calc(0.8s / var(--animation-speed, 1)) ease-in-out infinite;
transform-origin: center bottom;
}
@ -97,7 +97,7 @@
.text-jitter {
display: inline-block;
animation: jitter 0.4s ease-in-out infinite;
animation: jitter calc(0.4s / var(--animation-speed, 1)) ease-in-out infinite;
}
@ -115,7 +115,7 @@
.text-bounce {
display: inline-block;
animation: bounce 1s ease-in-out infinite;
animation: bounce calc(1s / var(--animation-speed, 1)) ease-in-out infinite;
}
@ -133,7 +133,7 @@
.text-bob {
display: inline-block;
animation: bobbing 1.8s ease-in-out infinite;
animation: bobbing calc(1.8s / var(--animation-speed, 1)) ease-in-out infinite;
}
.text-bob:nth-child(2n) {
@ -188,7 +188,7 @@
.text-wave {
display: inline-block;
animation: wave 1.2s ease-in-out infinite;
animation: wave calc(1.2s / var(--animation-speed, 1)) ease-in-out infinite;
}
.text-wave:nth-child(2n) {