Any dynamic text effect macros for Sugarcube 2.x?

Comments

• kaidanell

  February 2016

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

  February 2016 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@@
  
• kaidanell

  February 2016

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

  November 2016

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

  January 2017

  Awesome as usual. @greyelf
• greyelf

  February 2017 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@@
  
• phillipstagg

  April 2017

  @greyelf Thank you so much!