›

Howdy, Stranger!

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

Sign In Register

Categories

Slow colour change on links? (Answered)

Jud_CasperJud_Casper
edited November 2016 in Help! with 2.0
Sugarcube 2.11.0

Not sure if this can be done with CSS or it's going to require complex JavaScript or jQuery stuff (neither of which I have any clue about).

Anyways, I would like the links in my descriptions to be the same colour as the rest of the text when the passage first loads, but then to slowly ease into a different colour over, let's say, fifteen seconds.

I stress I'm not looking for this to happen on hover, but to be triggered when the passage loads so that the links slowly become apparent to the player.

Comments

  • Jud_CasperJud_Casper
    An alternative would be a very slow fade out/in effect, which I've managed to discover can be done with CSS. I can get it to work, but it targets my sidebar links to. Anyway to make it target just the links in the passage?
  • Jud_CasperJud_Casper
    edited November 2016
    My God I did it!!

    Here's the answer:

    Add to your Stylesheet 
    .passage a.link-internal {animation-duration: 400ms; animation-name: blink; animation-iteration-count: infinite; animation-direction: alternate;}
@keyframes blink {from {opacity: 1;}to {opacity: 0;}}
    Change the duration value for speed of flashing effect.
  • spaceranger123spaceranger123
    edited November 2016
    for a css newb, how would I go about putting this in my passage? 
    fade.passage a.link-internal
{
}
    then 
    body.fade {
	}
  • Jud_CasperJud_Casper
    Not sure what you're asking, spaceranger. You've provided a couple of selectors there, so if you know these are the ones you need to be defining, then just copy & paste my code into them.

    I don't know what fade.passage and body.fade do, so unless you clarify your question I can't offer any help.
  • spaceranger123spaceranger123
    Yea, im not familiar with CSS so Im not sure how to set up your code to see what it looks like
  • GryphbearGryphbear
    edited November 2016
    The Story Stylesheet menu item is found in the arrow when you are inside the editor and working on your story. The code should be pasted in there - CSS that is, Javascript code is pasted in the Javascript menu item, of course.
  • spaceranger123spaceranger123
    How would I call upon that code for the css in a passage?
  • Jud_CasperJud_Casper
    Well you still haven't explained what text you want the fade in/out effect to be applied to.

    If it's the passage as a whole, then try: 
    .passage {animation-duration: 400ms; animation-name: blink; animation-iteration-count: infinite; animation-direction: alternate;}
@keyframes blink {from {opacity: 1;}to {opacity: 0;}}
  • spaceranger123spaceranger123
    edited November 2016
    Edit. Okay it works now.

    So if I wanted to make it only work on certain types of text, how would I go about doing that?
  • Jud_CasperJud_Casper
    edited November 2016
    You'd need to know the selector that controls that text. In the above example the selector is .passage

    In my example I wanted to target just the links in the passages, so I used .passage a.link-internal
Sign In or Register to comment.