-
Notifications
You must be signed in to change notification settings - Fork 0
Using CSS animation
CSS-animations usual fire when a page is loaded.
F.e. the following is an excerpt from a css. The css-class div_alarm can be assigned to a html-element that will then execute the animation alarm once (change background to oral and back to initial setting).
.div_alarm {animation: alarm 1s;}
@keyframes alarm {
0% {
background-color: initial;
}
50% {
background-color: coral;
}
100% {
background-color: initial;
}
}
But maybe you want to run the animation programatically.
The following function will remove and add a css-class to a <div id="choice">
which will trigger the animation.
Note the workaround with offsetWidth.
window.gm.defaultPostBuy =function(itemid,cost){
$("div#choice")[0].innerHTML='You bought '+ itemid;
$("div#choice")[0].classList.remove("div_alarm");
$("div#choice")[0].offsetWidth; //this forces the browser to notice the class toggle
$("div#choice")[0].classList.add("div_alarm");
};
What is twine and interactive fiction
Exampl. SuperSimpleStory
What are storyformats
Why snowman
Setup tweego and snowman
Switching between Tweego and Twine
Snowman template methods
Snowman markup
javascript usage
debugging your story
Common issues with template methods and scripting
Story Telling in general
General concepts for IF
Scenes & Sequels
Designing Puzzles
See here about my js-framework running in snowman:
==> problems & solutions <==