#TwineTuesday, Twine Tuesday

#TwineTuesday: CSS Effects in Snowman

The Snowman Story Format comes with the least amount of built-in functionality. It doesn’t have the changer macros of Harlowe ( (font:), (color:), (text-style:), etc.), nor does it have the DOM (Content) Macros of SugarCube (<<append>>, <<prepend>>, etc.). However, it does allow you to make your own effects using CSS and some understanding of JavaScript and jQuery.

Table of Contents

 


 

“Hooks” and Element Selections

Coming from Harlowe, the following code may seem the strangest. However, like in how SugarCube understands element selections, many jQuery functions work from selectors. Through finding one or more elements, effects and attributes can be applied or changed on some element  or elements much in the same way Harlowe works on named hooks.

In fact, following a common trend of placing sensor macros at the bottom of a passage in Harlowe, we can write code that looks much like how macros work in SugarCube, but are based in using jQuery and <script> tags instead.

Changing the text-color (color) of an element

Markup

Result

 

Color Code Result

Replacing the text of some element

Code

Result

Replace Code Result


 

“Sensing” Events

In Harlowe, there are Sensor Macros. These are macros that “sense” events like clicks and mouseover events. In SugarCube, there are also Interactive Macros like <<button>> and <<click>> that react to something a user does.

Using jQuery, we can replicate some of that behavior by using the Events functionality to listen and act on different behaviors.

Click Events

Code

Result

Click Event Result

Mouseover Events

Code

Result

Mouseover Event Result


 

Hiding and showing elements

Both Harlowe and SugarCube have functionality to create “temporary content”: links and hooks that, when clicked, disappear. To do this effect in jQuery requires some extra code to ‘catch’ an event and then apply a function to hide() or show() it.

Hiding

Code

 Result

Hiding Links Result

Showing

Code

Result

Show Event Result