How To Make Your Image No Longer Blurry When Hover

[giangtranguyen]

Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.

For example:

img {

-webkit-filter: blur(5px);

filter: blur(5px);

}

img:hover {

-webkit-filter: blur(0px);

filter: blur(0px);

}

How To Make Your Image Have A Shadow

[giangtranguyen]

Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.

For example:

img {

-webkit-filter: drop-shadow(8px 8px 10px red);
filter: drop-shadow(8px 8px 10px red);

}

How To Make Your Text Have A Typewriter Effect

[giangtranguyen]

Just copy and paste the code into the Story Stylesheets, then adjust it to your liking.

For example:

.css-typing {
width: 30em;

white-space: nowrap;

overflow: hidden;

-webkit-animation: type 5s steps(75, end);

animation: type 5s steps(75, end);

}

 

@keyframes type {
from { width: 0; }

 

@-webkit-keyframes type {
from { width: 0; }

}

In order for it to work, you need to copy and paste the code into the passage that you want to have the typerwriter effect.

For example:

{(live:750ms)[<p class="css-typing">Haikyuu!!</p>(stop:)]}

How To Use Cycling Links

[giangtranguyen]

Just copy and paste the code into the passage, then adjust it to your liking.

For example:

(set: $ThirdYears to "Third Years")

 

Hello <tw-link class='cyclingLink' data-cycling-texts='["Sawamura Daichi", "Sugawara Koushi", "Azumane Asahi"]' onclick='clickCyclingLink(this, "$ThirdYears");'>$ThirdYears</tw-link>.

 

(link: "I know who I want")[(goto: $ThirdYears)]

Or 

(set: $ThirdYears to "Third Years")

 

Hello <tw-link class='cyclingLink' data-cycling-texts='["Sawamura Daichi", "Sugawara Koushi", "Azumane Asahi"]' onclick='clickCyclingLink(this, "$ThirdYears");'>$ThirdYears</tw-link>.
 

(link: "I know who I want")[{

(if: $ThirdYears is "Sawamura Daichi")[(goto: "First Passage")]

(elseif: $ThirdYears is "Sugawara Koushi")[(goto: "Second Passage")]

(else:)[(goto: "Third Passage")]}]

In order for it to work, you need to copy and paste the code into Story Javascript.

For example:
 

function clickCyclingLink(e,a){var t=JSON.parse($(e).attr("data-cycling-texts"));if(!("undefined"==typeof t||t.length<2)){t.push(t.shift());var i=t[0];if("$"===i[0])i=getHarloweVariable(i);else if("out"===i)$(e).remove();else if("end"===i){var n=t[t.length-1];t="$"===n[0]?[getHarloweVariable(n)]:[t[t.length-1]],$(e).hasClass("endedCyclingLink")||$(e).addClass("endedCyclingLink")}else if("goto "===i.slice(0,5)){var l=i.slice(5,i.length);"$"===l[0]&&(l=l.slice(1,l.length));var s=parseInt(l.trim());if(isNaN(s)){var r=$("tw-storydata > tw-passagedata[name="+l+"]");"undefined"!=typeof r&&r.length>=1&&_engine.goToPassage($(r).attr("pid"))}else{var r=$("tw-storydata > tw-passagedata[pid="+s+"]");"undefined"!=typeof r&&r.length>1&&_engine.goToPassage(s)}}setHarloweVariable(a,t[0]),$(e).text(i),$(e).attr("data-cycling-texts",JSON.stringify(t))}}function getHarloweVariable(e){return"undefined"!=typeof e&&""!==e?"$"===e[0]?_state.variables[e.slice(1,e.length)]:_state.variables[e]:void 0}function setHarloweVariable(e,a){"undefined"!=typeof e&&""!==e&&"undefined"!=typeof a&&("$"===e[0]&&(e=e.slice(1,e.length)),_state.variables[e]=a)}var _engine=Engine;window._engine=_engine;var _state=State;window._state=_state,window.clickCyclingLink=clickCyclingLink,window.getHarloweVariable=getHarloweVariable,window.setHarloweVariable=setHarloweVariable;

 

function getHarloweVariable(e){return"undefined"!=typeof e&&""!==e?"$"===e[0]?_state.variables[e.slice(1,e.length)]:_state.variables[e]:void 0}var _state=State;window._state=_state,window.getHarloweVariable=getHarloweVariable;

 

function setHarloweVariable(e,a){"undefined"!=typeof e&&""!==e&&"undefined"!=typeof a&&("$"===e[0]&&(e=e.slice(1,e.length)),_state.variables[e]=a)}var _state=State;window._state=_state,window.setHarloweVariable=setHarloweVariable;

How To Use Click-Replace

[giangtranguyen]

Just copy and paste the code into the passage, then adjust it to your liking.

For example:

I have a crush on him.

(click-replace: "him")[Hinata Shoyo]

How To Use Click-Prepend

[giangtranguyen]

 Just copy and paste the code into the passage, then adjust it to your liking.

For example:

Who is with me?

(click-prepend: "?")[ Hinata].

How To Use Click-Append

[giangtranguyen]

Just copy and paste the code into the passage, then adjust it to your liking.
 
For example:

I love no one.

(click-append: "one")[ but you]

How To Use A Timer

[giangtranguyen]

Just copy and paste the code into the passage, then adjust it to your liking.

For example:

(set: $counter to 3)

You have |amount>[$counter] seconds left!

 

(live: 1s)[

(set: $counter to it - 1)

(if: $counter is 0)[

(go-to: (either: "Passage 1", "Passage 2", "Passage 3"))

]

(replace: ?amount)[$counter]

]