Any dynamic text effect macros for Sugarcube 2.x?

kaidanell

heya! i'm very new with twine, in fact, just started my first project today. it's actually going along very well!

i wanted to spice things up in my story to have certain words have dynamic action, like being blurred out or shaking ala some of Porpentine's works.

however, despite my googling, i haven't found any dynamic text effect macros for sugarcube 2 ... perhaps any of y'all can point me the way?

kaidanell

of course, that's assuming i even need macros!
i was looking into css styling as well. it's greatly confusing me, though.

greyelf

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:

.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;
}

@-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;
}

@ feature like so:

@.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@@.rumble;This text should be rumbling@@.shudder;This text should be shuddering@@

kaidanell

@greyelf AHHH THANK YOU SO MUCH!! this really helped! :^D

hwarang

This is super helpful @greyelf I signed up to the forum just so I can thank you Much appreciated!

FIF

Awesome as usual. @greyelf

greyelf

The following is a very basic implementation of Harlowe's (transition: "pulse") macro for SugarCube.

The following CSS needs to be added to your story's Story Stylesheet area.

@-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;
}

You can use the new .pulse@ feature like so:

@.pulse;This text should pulse once@@

phillipstagg

@greyelf Thank you so much!