Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How do i Make text fade

Please help as you can tell by the title i want to Make text fade away.

I use harlowe 1.2.2

Please explain fully im a bit of a noob

Comments

  • You can use CSS animation to do what you want. The CSS should be placed within your story's Story Stylesheet area.

    This solution is made up of two parts:

    1. The keyframes CSS used to implement the fade-out effect:
    @-webkit-keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    } 
    
    @keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    } 
    
    ... 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.
    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;
    }
    
    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.
  • greyelf wrote: »
    You can use CSS animation to do what you want. The CSS should be placed within your story's Story Stylesheet area.

    This solution is made up of two parts:

    1. The keyframes CSS used to implement the fade-out effect:
    @-webkit-keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    } 
    
    @keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    } 
    
    ... 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.
    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;
    }
    

    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.
  • Hi sorry but i followed the instructions but it comes up with " there is a promblem with this storys script(#1): invalid character: '@' "
    That error message tells me that you incorrectly put the sample CSS in the Story JavaScript area instead of in the Story Stylesheet area.
  • greyelf wrote: »
    Hi sorry but i followed the instructions but it comes up with " there is a promblem with this storys script(#1): invalid character: '@' "
    That error message tells me that you incorrectly put the sample CSS in the Story JavaScript area instead of in the Story Stylesheet area.

    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!
  • greyelf wrote: »
    Hi sorry but i followed the instructions but it comes up with " there is a promblem with this storys script(#1): invalid character: '@' "
    That error message tells me that you incorrectly put the sample CSS in the Story JavaScript area instead of in the Story Stylesheet area.

    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.
  • That's because you have the named hook outside the header markup, try placing it inside the header markup.
    ##|fade-out>[Dear diary 13/8/16]
    
  • greyelf wrote: »
    That's because you have the named hook outside the header markup, try placing it inside the header markup.
    ##|fade-out>[Dear diary 13/8/16]
    

    Thank you!
  • I have the same question, but I really don't understand where to put what in which order. Could you explain it a bit less complicated please?
  • 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.
  • greyelf wrote: »
    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:
    @import url(https://fonts.googleapis.com/css?family=VT323);
    body
    {
      background-color: black;
    }
    tw-passage
    {
      color: white;
    	font-family: VT323;
    }
    tw-sidebar {
        display: none;
    }
    tw-link
    {
      color: #f62222;
    }
    
    tw-hook[style*="color:"] tw-link, tw-hook[style*="color:"] .enchantment-link {
    	color: inherit;
    }
    
    @-webkit-keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    } 
    
    @keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    } 
    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;
    }
    

    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?
  • Glyph wrote: »
    Is this just not applicable to Harlowe 2.0
    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:
    tw-hook[name="fadeout"] {
    	-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;
    }
    
  • edited December 2016
    greyelf wrote: »
    Currently the Harlowe 2.0 version of the CSS in point 2b would look like:
    tw-hook[name="fadeout"] {
    	-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;
    }
    
    I used this code in combination with point 1a, but still nothing happens. The sample text I am now using is:
    |fadeout>[This text should fade out over 10 seconds]
    

    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:
    @-webkit-keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    } 
    
    @keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    tw-hook[name="fadeout"] {
    	-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;
    }
    
  • Glyph wrote: »
    @-webkit-keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    } 
    
    @keyframes fade-out {
    	0% {opacity: 1;}
    	100% {opacity: 0;} 
    tw-hook[name="fadeout"] {
    	-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;
    }
    
    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?
Sign In or Register to comment.