Dynamic Text Effects

Sugarcube 2

SugarCube does not have a macro equivalent of Harlowe’s (text-style:) macro but with a little CSS and the use of the Custom Styles feature you can create your own equivalent.

note: The following CSS example is based on (read copied from and slightly modified) the CSS used by Harlowe’s (text-style:) macro, all credit is L’s and any mistakes are mine.

Add CSS like the following to your Story Stylesheet area, it creates a number of CSS classes which can be used to style text:

/* Dynamic text effects */ .shadow {     text-shadow: 0.08em 0.08em 0.08em #FFF; } .emboss {     text-shadow: 0.08em 0.08em 0em #FFF;     color: black; } .blur {     color: transparent;     text-shadow: 0em 0em 0.08em #FFF; } .blurrier {     color: transparent;     text-shadow: 0em 0em 0.2em #FFF; } .blurrier::selection {     background-color: transparent;     color: transparent; } .blurrier::-moz-selection {     background-color: transparent;     color: transparent; } .smear {     color: transparent;     text-shadow:         0em    0em 0.02em rgba(255,255,255,0.75),         -0.2em 0em 0.5em  rgba(255,255,255,0.5),         0.2em  0em 0.5em  rgba(255,255,255,0.5); } .mirror {     display: inline-block;     transform: scaleX(-1);     -webkit-transform: scaleX(-1); } .upside-down {     display: inline-block;     transform: scaleY(-1);     -webkit-transform: scaleY(-1); }

@-webkit-keyframes fade-in-out {     0%,     to {opacity: 0}     50% {opacity: 1} } @keyframes fade-in-out {     0%,     to {opacity: 0}     50% {opacity: 1} } .fade-in-out {     text-decoration: none;     animation: fade-in-out 2s ease-in-out infinite alternate;     -webkit-animation: fade-in-out 2s ease-in-out infinite alternate; } .fade {    opacity: 1;    transition: opacity .25s ease-in-out;    -moz-transition: opacity .25s ease-in-out;    -webkit-transition: opacity .25s ease-in-out;    }

.fade:hover {       opacity: 0;       }

@-webkit-keyframes rumble {     50% {         -webkit-transform: translateY(-.2em);         transform: translateY(-.2em)     } } @keyframes rumble {     50% {         -webkit-transform: translateY(-.2em);         transform: translateY(-.2em)     } } .rumble {     -webkit-animation: rumble linear 0.1s 0s infinite;     animation: rumble linear 0.1s 0s infinite;     display:inline-block; }

@-webkit-keyframes shudder {     50% {         -webkit-transform: translateX(0.2em);         transform: translateX(0.2em)     } } @keyframes shudder {     50% {         -webkit-transform: translateX(0.2em);         transform: translateX(0.2em)     } } .shudder {     -webkit-animation: shudder linear 0.1s 0s infinite;     animation: shudder linear 0.1s 0s infinite;     display: inline-block; }

@-webkit-keyframes pulse {         0%  { -webkit-transform: scale(0, 0); transform: scale(0, 0) }         20% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2) }         40% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9) }

60% { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05) }

80% { -webkit-transform: scale(0.925, 0.925); transform:scale(0.925, 0.925) }

to  { -webkit-transform: scale(1, 1); transform: scale(1, 1) } } @keyframes pulse {         0%  { -webkit-transform: scale(0, 0); transform: scale(0, 0) }         20% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2) }         40% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9) }

60% { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05) }

80% { -webkit-transform: scale(0.925, 0.925); transform: scale(0.925, 0.925) }

to  { -webkit-transform: scale(1, 1); transform: scale(1, 1) } } .pulse {         -webkit-animation: pulse 0.8s;         animation: pulse 0.8s;         display: inline-block; }

.pulseloop {         -webkit-animation: pulse 0.8s infinite alternate;         animation: pulse 0.8s infinite alternate;         display: inline-block; }

/* then use it in your passage like this: @@.shadow;This text should have a shadow@@ @@.emboss;This text should be embossed@@ @@.blur;This text should be blurred@@ @@.blurrier;This text should be blurrier@@ @@.smear;This text should be smeared@@ @@.mirror;This text should be mirrored@@ @@.upside-down;This text should be upside-down@@ @@.fade-in-out;This text should fade in and out@@ @@.fade;This text should fade out on mouseover/hover@@ @@.rumble;This text should be rumbling@@ @@.shudder;This text should be shuddering@@ @@.pulse;This text should be pulsing@@ */

A fade-in effect for example: .fade-in {         opacity: 1;         animation-name: fadeInOpacity;         animation-iteration-count: 1;         animation-timing-function: ease-in;         animation-duration: 2s; }

@keyframes fadeInOpacity {         0% {                 opacity: 0;         }         100% {                 opacity: 1;         } } Then use it in your passage like this: @@.fade-in;Your text@@