Skip to content

Instantly share code, notes, and snippets.

@breaker84

breaker84/style.scss

Created March 4, 2023 22:34
Show Gist options
  • Save breaker84/0ad543db6313aadc8b1bb3e47e982fda to your computer and use it in GitHub Desktop.
Save breaker84/0ad543db6313aadc8b1bb3e47e982fda to your computer and use it in GitHub Desktop.
Download ZIP
Typed.scss: CSS-powered animated text
Raw
style.scss
// Love dynamically typed text? You're gonna love this
// Edit these strings to see them typed on the screen:
$strings: (
"CSS typed this string!"
"It typed this one too 😱"
"Enjoy ☕"
);
// now for some timing (in seconds)
$durCharFwd: 0.10; // character typed
$durFullGap: 2.00; // time between typed/delete
$durCharBwd: 0.08; // character deleted
$durDoneGap: 1.00; // time between strings
// initializing some variables and functions ✊🏼
$charCount: 0; $durTotal: 0;
@each $string in $strings {
$charCount: $charCount + str-length($string);
$durTotal: $durTotal
+ (str-length($string) * ($durCharFwd + $durCharBwd))
+ $durFullGap + $durDoneGap;
}
@function percent($string, $letter, $modifier) {
$stringsPast: $string - 1; $time: 0;
@while $stringsPast > 0 {
$time: $time
+ (($durCharFwd + $durCharBwd) * (str-length(nth($strings, $stringsPast))))
+ $durFullGap + $durDoneGap;
$stringsPast: $stringsPast - 1;
}
@if $letter <= str-length(nth($strings, $string)) {
$time: $time
+ ($durCharFwd * ($letter - 1));
} @else {
$time: $time
+ ($durCharFwd * str-length(nth($strings, $string)))
+ $durFullGap
+ ($durCharBwd * ($letter - str-length(nth($strings, $string))));
}
@return ($time / $durTotal * 100 + $modifier) + "%";
}
$currentPercentage: 0;
// now THIS is where the magic happens... ✨
@keyframes typed {
@for $i from 1 through length($strings) {
// @for $j from 1 through (str-length(nth($strings, $i)) * 2 - 1) {
@for $j from 1 through (str-length(nth($strings, $i)) * 2) {
/* string #{$i}, char #{$j} */
@if $j < str-length(nth($strings, $i)) * 2 { // not last character deleted
#{percent($i, $j, 0)}, #{percent($i, $j+1, -0.001)} {
@if $j <= str-length(nth($strings, $i)) {
content: quote(#{str_slice(nth($strings, $i), 1, $j)});
} @else {
content: quote(#{str_slice(nth($strings, $i), 1, str-length(nth($strings, $i)) - ($j - str-length(nth($strings, $i))))});
}
}
} @else {
@if $i < length($strings) { // not last string
#{percent($i, $j, 0)}, #{percent($i+1, 1, -0.001)} {
content: "​"; // zero-width space to retain element height
}
} @else { // last string
#{percent($i, $j, 0)}, 100% {
content: "​"; // zero-width space to retain element height
}
}
}
}
}
}
@keyframes beam-blink {
75% { border-color: transparent; }
}
* { backface-visibility: hidden; }
html, body { height: 100%; }
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
background-image: // skeuomorphism anyone?
radial-gradient(rgba(#fff, 0.125), rgba(#fff, 0)),
linear-gradient(to bottom, #000, #000 2px, #111 3px);
background-repeat: repeat-y;
background-position: center center;
background-size: cover, 100% 3px;
font-size: calc(10px + 2vw);
font-family: 'VT323', monospace, sans-serif;
color: #3f3; // hacker green
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&::after {
content: "​"; // zero-width space to retain element height
position: relative;
top: -13px;
@media (max-width: 575px) { top: -33px; }
display: inline-block;
padding-right: 3px;
padding-right: calc(3px + 0.1vw);
border-right: 10px solid rgba(#3f3, 0.75);
border-right: calc(1.1vw + 4px) solid rgba(#3f3, 0.75);
text-shadow: 0 0 5px rgba(51, 255, 51, 0.75);
white-space: nowrap;
animation: typed #{$durTotal + "s"} linear 1s infinite, beam-blink 1s infinite;
}
&::before { // just generating some useful stats here 👋🏼
content: "#{length($strings)} strings / #{$charCount} chars / #{$durTotal}s duration";
@media (max-width: 575px) {
content: "#{length($strings)} strings \A #{$charCount} chars \A #{$durTotal}s duration";
}
display: block;
position: absolute;
bottom: 0;
width: 100%;
padding: 3px 0;
background: #00f; // aquaman blue
color: #fff; // Brandon-McConnell white
text-align: center;
font-size: 18px;
letter-spacing: 0.7px;
white-space: pre-wrap;
}
}
// body[onload] {
// &::before, &::after { display: none !important; }
// background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1580009/codepen_css-typed-this.png) center / cover;
// }
Raw
styles
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet" />
Raw
typed-scss-css-powered-animated-text.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment