Fade-in Splash Screen for Campaigns of the Month/Year

2»

Comments

  • gastoff
    gastoff
    Posts: 136

    That is what the CSS I was hoping would work when I was playing around with it yesterday, but I figured out why the ":active" component was not behaving how I thought it would: it is missing a JavaScript component.

    When I peeked at your Custom CSS, I saw that you have the animation still listed under the .splash section, but since the CSS I proposed wont work anyway, that's moot.

    When I get a free moment this week, I'll see if I can did around on the web to see if there is a solution that uses solely HTML and CSS. The "onclick" idea I had would only work with utilizing JavaScript (which is disabled on OP).

    image

  • thaen
    thaen
    Posts: 565

    This is a total shot in the dark (as I haven't tested it at all), but if you make the splash a clickable link (html a tag) that "targets" the splash, then I think you can use the "target" css class instead of "active", and it will stay "targeted" and allow the animation to finish even after releasing the click.

    An example of "target" in action:

    https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_tab

     

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    @thaen

    I played around with that and could not get it to work. I feel like the :target function must be blacklisted like JS, <label>, and <input> is.

    I just do not think this can be done without JS since CSS doesn't have any interactions with "onclick" funtions. There is a workaround in HTML by coding the image as the label of a checkbox, so when the image is clicked, you can alter how the toggle state of the checkbox is displayed...but OP doesn't let you mess with input HTML.

    image

  • thaen
    thaen
    Posts: 565

    @gastoff, looks like "target" doesn't work because "id" is not currently an allowed attribute on OP.  So the a tag has nothing to target because the ids are stripped out.  I'm going to look into what the dangers of allowing "id" might be.  I can't think of any offhand, but since it wasn't allowed originally, I'm wary of what I might be missing.

    Alternatively, here's an idea that might work...

    Have the popup div be expanded to fill the entire screen.

    Wrap the popup div in an a tag and use the "hover" css to make it visible (display:block?).

    Then non-hover css on the same a tag should have it be display:none. 

    So then as long as the visitor's cursor is on the popup (which spans the entire screen), the popup image will be showing (display:block).  (I don't think this will work for ipad/phone visitors, but they just wouldn't see the popup at all because display:none from non-hover, so no big deal.)

    Then, to make the "click to go away" work, setup the css animation as a "focus" on the same a tag.

    When the visitor "clicks" that gives focus to the a tag.

    Then at the end of the animation (100%) change the a tag to display:none, so the visitor is no longer "hovering" and the page will then automatically switch to use the non-hover css (display:none). so the image stays hidden.  (Otherwise, when the visitor clicks something else, and takes the focus away from the a tag, the image will pop back up to full opacity because the visitor will still be hovering over the "opacity 0%, but still display:block a tag that fills the screen").

    I played with pieces of this, like the hover to run the animation, but I didn't put it altogether, so I don't know if it will 100% work or not.

     

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 565

    @gastoff, actually, I don't think that's going to work because the image will never show...it will always be initially hidden and never "hovered".

    Instead, you can do this...

    Normal (non-hover, non-focus) has the animation.

    Hover has animation-play-state: paused;

    Focus has animation-play-state: running;

    Then if the image spans the screen, it will be "hovered" and so then will be "paused".  When the visitor clicks it will change to "focused" and will start running again.  Then it will finish and be "normal" (non-hovered, non-focused) and the animation will be done so it won't run again.

    Something like this:


    .animation-test {
    animation: splashlogo 2s linear 0s forwards;
    }

    .animation-test:hover {
    animation-play-state: paused;
    }

    .animation-test:focus {
    animation-play-state: running;
    }

    @keyframes splashlogo{
    0%{opacity:1; display:block;}
    100%{opacity:0; display:none;}
    }

     

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    @thaen (and @HumAnnoyed, we have a solution!)

    I think the "id" and/or "input" blocking is because you can use HTML <input> to create form fields. Unscrupulous users could create form fields that collect user data maybe?

    On a related note, I love your animation play state work around! Unfortunately, giving an element ":focus" on click isn't inherent, but I figured out how to make it work!

    The image has to be an <a> element so it is treated like a link, then you just add an jQuery to the element.

    HTML

    (Uplodaded as an image because the forums runs in to errors when I try to add the "onclick" command...)

    image

    CSS:


    .splash{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:black;
    z-index:-999;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:1;
    }

    .splash {
    animation: splashlogo 2s linear 0s forwards;
    }

    .splash:hover{
    animation-play-state:paused;
    }

    .splash:focus{
    animation-play-state:running;
    }

    @keyframes splashlogo{
    0%{opacity:1;z-index:999;}
    5%{opacity:1}
    99.9%{position:fixed;}
    100%{opacity:0; z-index:-100;position:absolute;}
    }

     

    image

  • thaen
    thaen
    Posts: 565

    @gastoff, that's awesome about the solution!

    I just tried this in my test campaign, and the "onclick" is stripped out, so that's not needed, since the page doesn't even see it.  I think the "<a>" tag should just by default grab focus when it's clicked.  I also added something after the "#" like "href="#test"", otherwise I think it tries to jump to the top of the page (if you're not already there).

    That explanation makes sense for HTML "input" tags, but the "id" attribute is just a way of uniquely identifying an HTML element.  So it seems like "id" should be safe to allow.

    https://www.w3schools.com/tags/att_id.asp

     

     

     

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    @thaen

    You're right, the onclick is unnecessary. The real ticket was setting it to <a> tag and making sure there is some form of an href in place so focus can be grabbed.

    Teamwork Makes the Dream Work! 

    image

  • thaen
    thaen
    Posts: 565

    Huzzah!  : )

    Obsidian Portal Developer

  • HumAnnoyd
    HumAnnoyd
    Posts: 283

    That is exactly what I was hoping for!  Thanks to you both for figuring that out. It was so far above my head I am sure I never would have gotten it.  Sweet! 

    Now I can make a feature art piece for the most important characters in the game on each character page.  You can see it in practice here:

    https://fate-accelerated-the-emerald-city.obsidianportal.com/characters/jack-youngblood

     

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Star Trek: Odyssey

  • HumAnnoyd
    HumAnnoyd
    Posts: 283

    Hmm. There is  still a bit of a problem.  I put the animation with different character images on their respective pages.  And if you go to an individual page and click on the character it will play properly. But only that first one.  After that it doesn't always play right if you go to another character page or try to reload the page you are on. It plays through the animation before you get to the page or pauses at about 25% opacity for some reason.  

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Star Trek: Odyssey

  • thaen
    thaen
    Posts: 565

    @HumAnnoyd, yeah, I see what you're saying.  The "hover" isn't kicking in right away, and so some of the animation starts to play before it "pauses". 

    One option is to maybe change the "5%" to be a "50%", so it has an entire second (50% of 2 seconds) to show the image without fading it.

    The other option is to wait a couple days for me to add the "id" exception, and then we can try out the "target" idea and see if that works better for this.  (We try not to deploy on the weekend if we don't have to.)

    Obsidian Portal Developer

  • HumAnnoyd
    HumAnnoyd
    Posts: 283

    I think I will exercise some patients and wait for the target idea.  Thanks again for all the help.  I am very excited to add more pics like that to all my characters.  It will give me a new project to play with.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Star Trek: Odyssey

  • gastoff
    gastoff
    Posts: 136

    The image is loading quickly on the page, before page registers that it is being "hovered", so it is playing through part of the animation before the hover kicks in and pauses things. You might be able to just add a 2s animation delay to resolve this.

    image

  • thaen
    thaen
    Posts: 565

    @gastoff, @HumAnnoyd, the "id" attribute is now allowed, so "target" now works.

    I think you might be able to get rid of the "focus" and "hover" entries, and just apply the animation directly to "splash:target".

    Then make the "<a>" tag point to the id of the splash div.

     

    Obsidian Portal Developer

  • HumAnnoyd
    HumAnnoyd
    Posts: 283

    Um. OK.  I tried what  you suggested (I think. It was a bit over my head) but it didn't work. Which probably means I am not quite understanding what you mean.  Here is the code I had before:


    .splash{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:black;
    z-index:-999;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:1;
    }

    .splash {
    animation: splashlogo 2s linear 0s forwards;
    }

    .splash:hover{
    animation-play-state:paused;
    }

    .splash:focus{
    animation-play-state:running;
    }

    @keyframes splashlogo{
    0%{opacity:1;z-index:999;}
    50%{opacity:1}
    99.9%{position:fixed;}
    100%{opacity:0; z-index:-100;position:absolute;}
    }

     

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Star Trek: Odyssey

  • HumAnnoyd
    HumAnnoyd
    Posts: 283

    And here is the code on the character page I am using:

    ARGH. Actually it won't let me post that code. It keeps sending me to a broken Captha OVL with no way to prove I am human.  

     

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Star Trek: Odyssey

  • thaen
    thaen
    Posts: 565

    Change your HTML from this:

    <a class="splash" href="#"> <br />

    <img src="https://db4sgowjqfwig.cloudfront.net/campaigns/95840/assets/1123157/DFA_JackYoungbloodComic001.5.jpg?1603477565"; /><br />

    </a>

     

    To this:

    <a id='splash-id' class="splash" href="#splash-id"> <br />

    <img src="https://db4sgowjqfwig.cloudfront.net/campaigns/95840/assets/1123157/DFA_JackYoungbloodComic001.5.jpg?1603477565"; /><br />

    </a>

     

    The differences are the addition of the "id" and the adding of that "id" to the "href".

    Then change your CSS to this:


    .splash{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:black;
    z-index:-999;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:1;
    }

    .splash {
    animation: splashlogo 2s linear 0s forwards;
    animation-play-state:paused;
    }

    .splash:target{
    animation-play-state:running;
    }

    @keyframes splashlogo{
    0%{opacity:1;z-index:999;}
    50%{opacity:1}
    99.9%{position:fixed;}
    100%{opacity:0; z-index:-100;position:absolute;}
    }

     

    That differences are the "paused" moved to be on the ".splash" directly, and the "hover" section was deleted, and the "focus" was changed to "target".

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 565

    @HumAnnoyd, notice that this should work just the way you want when you first come the page from somewhere else.  However, once you click the image and it fades away, the url changes from:

    https://fate-accelerated-the-emerald-city.obsidianportal.com/characters/jack-youngblood

    to:

    https://fate-accelerated-the-emerald-city.obsidianportal.com/characters/jack-youngblood#splash-id

    So if you "refresh" the page, the image will start fading immediately with no click needed.  You'll need to go to the page again from a link or delete the "#splash-id" from the url in the browser to make the image stay in place.  Just mentioning in case you tried "refresh" and saw that it immediately started fading.

     

    Obsidian Portal Developer

  • HumAnnoyd
    HumAnnoyd
    Posts: 283

    @thaen thanks so much. That works like I want it to.  I really appreciate you figuring this out. I don't think I would have been able to do it at all without your help! Now I have a ton of comic pages to make!  :D

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Star Trek: Odyssey

  • thaen
    thaen
    Posts: 565

    Awesome!  Glad you're happy!  But @gastoff did all the hard work...and I'd say I kind of cheated, since I changed the source code to make this work (by making "id" an allowed attribute).  : )

    Obsidian Portal Developer

  • HumAnnoyd
    HumAnnoyd
    Posts: 283

    @thaen well that seems very Kobiashi-Maru of you.  :D

    @gastoff thanks for all the help! I am pleased with how it is looking on my site and I am thinking of a few possible new ways to use it in the future.  So thanks to you both!

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Star Trek: Odyssey

  • thaen
    thaen
    Posts: 565

    Haha!  I love that!

    Obsidian Portal Developer

Sign In or Register to comment.

Curiosities and Acquisitions is June's Campaign of the Month!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

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

Discussions