Brandon McConnell
Type a single string
@include typed("I'm walking here!");Type two strings
@include typed("There's a snake in my boot 🐍", "To infinity and beyond 🚀");
Type one string, adjust the speed of type and
pause-deleted properties
(2 methods)
@include typed("You had me at hello",
[.1, null, null, .5]
); // ... or ...
@include typed("You had me at hello",
(type: .1, pause-deleted: .5)
);Type three strings, double the default speed, disable the caret
@include typed("Dumb", "Dumber", "Dumbest", 2, (caret: false));Type two strings, use the default speed, disable the caret, iterate three times and end on the original string
@include typed("Shaken, not stirred", "Stirred, not shaken", null, (caret: false, iterations: 3));Type two strings, iterate twice, then end on a custom string
@include typed("Here's lookin at you, kid", "I'll be back", 2, (iterations: 2, end-on: "Done!"));Type two strings, provide a custom animation name (inspect this animation to see the custom animation name in the CSS source)
@include typed("E.T. phone home", "You talkin to me?", null, (name: "my-typewriter"));
Color a typewriter including the blinking cursor (hint:
it inherits the text color automatically using currentColor)
color: #f00;
@include typed("Houston, we have a problem", "You can't handle the truth");Add a character-timed delay for custom timing (the integer speed uses a dynamic unit of speed, by number of characters typed)
@include typed("Roads?<[15]> Where we're going, we don't need roads", 2);Type mid-string by targeting a nested span instead of an element with other text
<p>Go ahead, make my <span class="time-of-day"></span>!</p>.time-of-day {
padding: 0 0 0 3px;
background-color: lightsalmon;
&::before { font-weight: 600; }
@include typed(
"day", "night", "morning",
2,
(caret-width: 2px, caret-space: 2px)
);
}Go ahead, make my !
Use a typewriter as a dynamic input placeholder (click on the animated text to focus into the input field and watch the animated text vanish)
<div class="input-wrapper">
<input aria-label="Ask us anything">
<span class="placeholder"></span>
</div>.input-wrapper {
display: block;
width: 100%; height: 24px;
position: relative;
> input, > .placeholder {
display: block;
appearance: none;
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: transparent;
border: none;
}
> .placeholder {
pointer-events: none;
&::before { font-weight: 600; }
@include typed(
"How high is Mount Everest?",
"How many stars are there?",
"What is the best career for me?",
1.5, (caret-width: 2px, caret-space: 2px)
);
}
> input { &:focus, &:active {
+ .placeholder { display: none; }
} }
}Set per-string styles by declaring your strings as a map of strings and styles instead of a comma-delimited list.
&::before {
font-weight: 600;
text-shadow:
1px 2px 6px rgb(255 255 255 / 75%),
1px 2px 4px currentColor;
}
@include typed((
"Red": (color: red),
"Orange": (color: darkorange),
"Yellow": (color: gold),
"Green": (color: green),
"Blue": (color: blue),
"Indigo": (color: indigo),
"Violet": (color: blueviolet)
), 2, (caret-width: 2px));
Add custom styles per string including the closing
end-on string, excluding certain string(s) by passing an
empty map () in place of their its style map(s).
@include typed(
(
"I'll have what she's having": (
font-family: ("Times New Roman", arial),
color: blue
),
"I am serious, and don't call me Shirley": (
font-family: (consolas, monospace),
font-weight: 700,
background-color: #000,
color: #0f0
),
"You ain't heard nothin yet": ()
), [null, .8, .01], (
iterations: 1,
end-on: ("May the force be with you": (
background: #fff linear-gradient(to right, cyan, yellow),
background-blend-mode: hard-light,
color: red,
font-size: 120%
)),
caret-speed: .65,
caret-width: 2px,
caret-color: orange,
caret-space: 1px
)
);
Type a multi-line string using \A for line-breaks, similar
to \n in JavaScript… and spruce it up with some emojis
🚀
@include typed("Hey babe! 😘\AStuck at the office but I'll be home as soon as I can, and when I get home… we're having PIZZA 🤤", "I can't wait! Hurry!\A🍕 🙉", [.5, 3, .01]);