#TwineTuesday: CSS Effects in Snowman

On By Dan CoxIn #TwineTuesday, Twine Tuesday

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

This text will be black.
<div class="colorMe">This text will be red</div>
<script>
$(".colorMe").css("color", "red");
</script>
view raw script.js hosted with ❤ by GitHub

Result

 

Color Code Result

Replacing the text of some element

Code

<div class="replaceMe">This text will be replaced</div>
<script>
$(".replaceMe").text("This text will be shown!");
</script>
view raw script.js hosted with ❤ by GitHub

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

<div class="clickMe">Click me!</a>
<div class="replaceMe"></div>
<script>
$(".clickMe").click(function() {
$(".replaceMe").text("This text will be shown after the click!");
});
</script>
view raw script.js hosted with ❤ by GitHub

Result

Click Event Result

Mouseover Events

Code

<div class="clickMe">Put the mouse on me!</a>
<div class="replaceMe"></div>
<script>
$(".clickMe").mouseover(function() {
$(".replaceMe").text("This text will be shown after the mouseover event!");
});
</script>
view raw script.js hosted with ❤ by GitHub

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

<div class="clickMe">Click me!</a>
<div class="replaceMe">This text will be hidden after the click!</div>
<script>
$(".clickMe").click(function() {
$(".replaceMe").hide();
});
</script>
view raw script.js hosted with ❤ by GitHub

 Result

Hiding Links Result

Showing

Code

<div class="clickMe">Click me!</a>
<div class="hidden">This text will be shown after the click!</div>
<script>
$(".hidden").hide();
$(".clickMe").click(function() {
$(".hidden").show();
});
</script>
view raw script.js hosted with ❤ by GitHub

Result

Show Event Result