/* ==========================================================================
TEXT EFFECTS — one shared file for the whole site
HOW TO USE
1. Upload this file to a "css" folder at the top of your site:
/css/text-effects.css
2. Add this line inside on any page that needs the effects:
(The "/" at the start means it works from any folder.)
3. Wrap text in a class:
the end is nigh
Combine effects with a space:
APOCALYPSE PROPHET
Use ONE animated effect per piece of text (e.g. not jitter + wobble
together). To stack two, nest them:
text
To tweak an effect for the whole site, change it here once.
========================================================================== */
/* --------------------------------------------------------------------------
BRAND OUTLINE — white text with a black outline (like the site header)
-------------------------------------------------------------------------- */
/* Thin outline, for normal-sized text */
.brand-text {
font-family: "Times New Roman", Times, serif;
color: #ffffff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
0px -1px 0 #000,
0px 1px 0 #000,
-1px 0px 0 #000,
1px 0px 0 #000;
}
/* Thick outline, for big headings */
.brand-text-lg {
font-family: "Times New Roman", Times, serif;
color: #ffffff;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000,
0px -2px 0 #000,
0px 2px 0 #000,
-2px 0px 0 #000,
2px 0px 0 #000;
}
/* --------------------------------------------------------------------------
MOVING EFFECTS
(display: inline-block is needed so inline text can move)
-------------------------------------------------------------------------- */
/* JITTER — nervous, twitchy shaking */
.jitter {
display: inline-block;
animation: fx-jitter 0.3s steps(2) infinite;
}
@keyframes fx-jitter {
0% { transform: translate(0, 0); }
25% { transform: translate(-1px, 1px); }
50% { transform: translate(1px, -1px); }
75% { transform: translate(-1px, -1px); }
100% { transform: translate(1px, 1px); }
}
/* JITTER-HARD — the same, but more violent */
.jitter-hard {
display: inline-block;
animation: fx-jitter-hard 0.2s steps(2) infinite;
}
@keyframes fx-jitter-hard {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-2px, 2px) rotate(-1deg); }
50% { transform: translate(2px, -1px) rotate(1deg); }
75% { transform: translate(-2px, -2px) rotate(0deg); }
100% { transform: translate(2px, 1px) rotate(-1deg); }
}
/* WOBBLE — slow, seasick sway */
.wobble {
display: inline-block;
animation: fx-wobble 2s ease-in-out infinite;
}
@keyframes fx-wobble {
0%, 100% { transform: rotate(-1deg) translateY(0); }
50% { transform: rotate(1deg) translateY(-2px); }
}
/* FLOAT — gentle drifting up and down */
.float {
display: inline-block;
animation: fx-float 3s ease-in-out infinite;
}
@keyframes fx-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* SHAKE-HOVER — still until the mouse goes over it, then shakes */
.shake-hover {
display: inline-block;
}
.shake-hover:hover {
animation: fx-jitter-hard 0.2s steps(2) infinite;
}
/* --------------------------------------------------------------------------
LIGHT EFFECTS
-------------------------------------------------------------------------- */
/* FLICKER — like a dying neon sign */
.flicker {
animation: fx-flicker 3s linear infinite;
}
@keyframes fx-flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
20%, 24%, 55% { opacity: 0.2; }
}
/* BLINK — the old-school