Twine game animated blur effect

Question

I'm making a horror text adventure using Twine (snowman version, which uses HTML, CSS, Javascript, JQuery, and Markdown). I wanted to know what the best (easiest) way is, you think, for creating a foggy effect where the text comes in and out of focus (adding/removing blur to lines, words, or characters) based on some criteria (mouseover, text advancement, or time).

Or, just, any way of doing it.

I'm really new to Javascript, just picked it up this week, but with a long history of web design and (bad) hobby coding. (Python, Lua)

I'm interested in understanding the logic behind it, since I intend to spend time on web-based game development, so err on the side of elaboration please.

And of course, let me know if the question is faulty or needs clarification. Thanks!

Answer 1

Generally speaking, the SugarCube format is more powerful, if you want to use Javascript.

For your question, you just have to put <<script>> code here <</script>>

To produce the blur effect, you have different options (html5, js, css...)

For Twine it would be more convenient to do directly with JS, by example :

https://youtu.be/-abN0TPy0kU?t=50