... it works by changing the opacity of whatever it is applied to from visible (1) to invisible (0).
2. The animation CSS settings that will be applied to whatever you want to fade-out.
The second part of the solution is made up of two sub-parts:
2a. The passage markup used to indicate which text to apply the fade-out effect to.
This is done by using a named hook to mark the relevant text, the name of the hook will be fade-out
|fade-out>[This text should fade out over 10 seconds]
2b. The CSS that targets the fade-out named hook.
This CSS configures that animation what will be applied to the named hook, it uses the fade-out keyframes defined in part 1, and uses a delay of 10 seconds.
If you add all of the above CSS and passage markup to a new story and then view it using the Play option then you will see the marked text slowly fade away over 10 seconds.
... it works by changing the opacity of whatever it is applied to from visible (1) to invisible (0).
2. The animation CSS settings that will be applied to whatever you want to fade-out.
The second part of the solution is made up of two sub-parts:
2a. The passage markup used to indicate which text to apply the fade-out effect to.
This is done by using a named hook to mark the relevant text, the name of the hook will be fade-out
|fade-out>[This text should fade out over 10 seconds]
2b. The CSS that targets the fade-out named hook.
This CSS configures that animation what will be applied to the named hook, it uses the fade-out keyframes defined in part 1, and uses a delay of 10 seconds.
If you add all of the above CSS and passage markup to a new story and then view it using the Play option then you will see the marked text slowly fade away over 10 seconds.
Hi sorry but i followed the instructions but it comes up with " there is a promblem with this storys script(#1): invalid character: '@' "
" tw-hook[name="fade-out"] {
-webkit-animation-name: fade-out;
-webkit-animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-name: fade-out;
animation-duration: 10s;
animation-fill-mode: both;
} "
In the sylesheet.
And i put " |fade-out>[This text should fade out over 10 seconds] " in a passage and i put text in where it says " This text should fade out over 10 seconds "
Thank you i wrote this as descriptively as i could.
The code examples in points 1 and 2b in my original post are CSS so they are placed within your story's Story Stylesheet area.
The fade-out named hook example in point 2a is what you use to indicate which passage text you would like the fade-out effect to be applied to, you use it within the body of a Passage.
The code examples in points 1 and 2b in my original post are CSS so they are placed within your story's Story Stylesheet area.
The fade-out named hook example in point 2a is what you use to indicate which passage text you would like the fade-out effect to be applied to, you use it within the body of a Passage.
I'm necroing a bit here, but this is the only thread I could find that actually applies properly to this topic. I'm using the example CSS you gave, Greyelf. Here's the entire stylesheet:
My example was designed to work with Harlowe v1.2.2 because that is what the OP was using.
warning: Version 2.0 of Harlowe is still being worked on and it has not been released yet, so the following information may be subject to change.
It appears that Harlowe 2.0 has different naming conventions/restrictions for named hooks, and it is removing the dash from the fade-out name when it generates the related HTML element.
eg. the fade-out named hook becomes a tw-hook element with a name property of "fadeout"
Currently the Harlowe 2.0 version of the CSS in point 2b would look like:
Your example CSS is missing a close curly brace } at the end of the @keyframes fade-out CSS rule, I added one then tested your example and it worked correctly.
Hi, I use Twine 2,1,3 with Harlowe 2,0,1 and I can't put a auto fade in/out of all page when the player click on a passage link... Someone can help me please?
Comments
This solution is made up of two parts:
1. The keyframes CSS used to implement the fade-out effect: ... it works by changing the opacity of whatever it is applied to from visible (1) to invisible (0).
2. The animation CSS settings that will be applied to whatever you want to fade-out.
The second part of the solution is made up of two sub-parts:
2a. The passage markup used to indicate which text to apply the fade-out effect to.
This is done by using a named hook to mark the relevant text, the name of the hook will be fade-out
2b. The CSS that targets the fade-out named hook.
This CSS configures that animation what will be applied to the named hook, it uses the fade-out keyframes defined in part 1, and uses a delay of 10 seconds. If you add all of the above CSS and passage markup to a new story and then view it using the Play option then you will see the marked text slowly fade away over 10 seconds.
Hi sorry but i followed the instructions but it comes up with " there is a promblem with this storys script(#1): invalid character: '@' "
I entered:
" @-webkit-keyframes fade-out {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fade-out {
0% {opacity: 1;}
100% {opacity: 0;}
} "
And
" tw-hook[name="fade-out"] {
-webkit-animation-name: fade-out;
-webkit-animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-name: fade-out;
animation-duration: 10s;
animation-fill-mode: both;
} "
In the sylesheet.
And i put " |fade-out>[This text should fade out over 10 seconds] " in a passage and i put text in where it says " This text should fade out over 10 seconds "
Thank you i wrote this as descriptively as i could.
Oh.. Thank you i dony know how that happened i mnew where I wanted to put it.
By the way thanks for always awnsering my questions!
Hey i thought it worked until i tried it on what i acually wanted to use it on and it didnt work theres and images of what im doing below.
Thank you!
The fade-out named hook example in point 2a is what you use to indicate which passage text you would like the fade-out effect to be applied to, you use it within the body of a Passage.
I'm necroing a bit here, but this is the only thread I could find that actually applies properly to this topic. I'm using the example CSS you gave, Greyelf. Here's the entire stylesheet:
And I'm directly utilizing the example text you gave entirely unchanged, and yet nothing is happening.
Is this just not applicable to Harlowe 2.0 or something?
warning: Version 2.0 of Harlowe is still being worked on and it has not been released yet, so the following information may be subject to change.
It appears that Harlowe 2.0 has different naming conventions/restrictions for named hooks, and it is removing the dash from the fade-out name when it generates the related HTML element.
eg. the fade-out named hook becomes a tw-hook element with a name property of "fadeout"
Currently the Harlowe 2.0 version of the CSS in point 2b would look like:
I used |fade-out> as well, thinking it might simply fix itself, but neither one works. Again, here's a copy of the Stylesheet in use: