0 votes
by (140 points)
I'm new to using Twine and currently working on a University assignment.

Using Harlowe at the moment but could change if necessary and probably would need to I think for some of the things I'm hoping to implement.

I want to create a particular feeling in the project i'm working on and trying to think of ways to do it.

Is it possible to make all choices provided do nothing when clicked on for a specified amount of time?

Also, is it possible to when clicked on animate the choice text so that it does a glitch effect, or falls off of the screen?

Thanks

1 Answer

0 votes
by (23.6k points)

This is how you'd do it in sugracube:

 

First set up the glitch effect of your choice in your css stylesheet. I grabbed this one from a code pen:

body {
  background: black;
  font-family: 'Varela', sans-serif;
}

.glitch {
  position: relative;
}

@keyframes noise-anim {
  0% {
    clip: rect(13px, 9999px, 53px, 0);
  }
  5% {
    clip: rect(46px, 9999px, 85px, 0);
  }
  10% {
    clip: rect(69px, 9999px, 53px, 0);
  }
  15% {
    clip: rect(16px, 9999px, 46px, 0);
  }
  20% {
    clip: rect(59px, 9999px, 49px, 0);
  }
  25% {
    clip: rect(39px, 9999px, 22px, 0);
  }
  30% {
    clip: rect(15px, 9999px, 85px, 0);
  }
  35% {
    clip: rect(35px, 9999px, 1px, 0);
  }
  40% {
    clip: rect(56px, 9999px, 36px, 0);
  }
  45% {
    clip: rect(30px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(32px, 9999px, 60px, 0);
  }
  55% {
    clip: rect(55px, 9999px, 22px, 0);
  }
  60% {
    clip: rect(92px, 9999px, 19px, 0);
  }
  65% {
    clip: rect(46px, 9999px, 91px, 0);
  }
  70% {
    clip: rect(27px, 9999px, 74px, 0);
  }
  75% {
    clip: rect(27px, 9999px, 99px, 0);
  }
  80% {
    clip: rect(87px, 9999px, 68px, 0);
  }
  85% {
    clip: rect(34px, 9999px, 79px, 0);
  }
  90% {
    clip: rect(48px, 9999px, 36px, 0);
  }
  95% {
    clip: rect(61px, 9999px, 66px, 0);
  }
  100% {
    clip: rect(18px, 9999px, 93px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(57px, 9999px, 80px, 0);
  }
  5% {
    clip: rect(47px, 9999px, 6px, 0);
  }
  10% {
    clip: rect(71px, 9999px, 15px, 0);
  }
  15% {
    clip: rect(100px, 9999px, 47px, 0);
  }
  20% {
    clip: rect(26px, 9999px, 70px, 0);
  }
  25% {
    clip: rect(8px, 9999px, 40px, 0);
  }
  30% {
    clip: rect(69px, 9999px, 35px, 0);
  }
  35% {
    clip: rect(58px, 9999px, 56px, 0);
  }
  40% {
    clip: rect(69px, 9999px, 95px, 0);
  }
  45% {
    clip: rect(84px, 9999px, 94px, 0);
  }
  50% {
    clip: rect(58px, 9999px, 27px, 0);
  }
  55% {
    clip: rect(35px, 9999px, 41px, 0);
  }
  60% {
    clip: rect(3px, 9999px, 67px, 0);
  }
  65% {
    clip: rect(7px, 9999px, 95px, 0);
  }
  70% {
    clip: rect(17px, 9999px, 32px, 0);
  }
  75% {
    clip: rect(44px, 9999px, 75px, 0);
  }
  80% {
    clip: rect(100px, 9999px, 7px, 0);
  }
  85% {
    clip: rect(2px, 9999px, 97px, 0);
  }
  90% {
    clip: rect(69px, 9999px, 81px, 0);
  }
  95% {
    clip: rect(63px, 9999px, 62px, 0);
  }
  100% {
    clip: rect(14px, 9999px, 76px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

Then use a linkreplace to have the link glitch out upon being clicked and use a <<timed>> macro to reolace it with a working link:

<<nobr>>
<span id="link1">
<<linkreplace "Linktext1">>
	<a class="glitch" data-text="Linktext1">Linktext1</a>
<</linkreplace>>
</span>
<<timed 10s>>
	<<replace "#link1">>
		[[Linktext1|Linkname]]
	<</replace>>
<</timed>>
<</nobr>>

 

...