Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Any dynamic text effect macros for Sugarcube 2.x?

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?

Comments

  • of course, that's assuming i even need macros!
    i was looking into css styling as well. it's greatly confusing me, though.
  • edited February 2016
    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@@
    
  • @greyelf AHHH THANK YOU SO MUCH!! this really helped! :^D
  • This is super helpful @greyelf I signed up to the forum just so I can thank you :) Much appreciated!
  • Awesome as usual. @greyelf
  • edited February 2017
    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@@
    
  • @greyelf Thank you so much!
Sign In or Register to comment.