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

gastoff
gastoff

@Kallak mentioned that it might be beneficial to make CoTM Distinctions more prominent on the campaign sites so I played around with the CSS necessary to add a splash screen to the Landing Page:


/*COTM SPLASH SCREEN*/

.splash{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:black;
z-index:999;
display:flex;
justify-content:center;
align-items:center;
animation: splashlogo 2s linear 0s forwards;
}

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

I created my own "CoTM placard" and tagged it as a div class="splash". The CSS yanks it out of the text box, blacks out and centers the image, then fades it out. The last bit of the animation moves the element from position:fixed to position:absolute so that the x-index will allow the "invisible" element to stack behind the other elements on the screen.

You can check out the full animation by clicking on my campaign link below. Thoughts? 

image

«1

Comments

  • SkidAce
    SkidAce
    Posts: 826

    Wow...

     

    /bows

    /not worthy

  • Kallak
    Kallak
    Posts: 1,040

    @gastoff, pretty cool! It's nice to see the concept in action. I think it turned out very well. My only "complaint" would be that the graphic doesn't get displayed on the page post-animation. Might be a nice sidebar item or something.

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • gastoff
    gastoff
    Posts: 103

    @Kallak,

    Since the CSS will affect any element that is given div class=splash, theoretically, the graphic could be placed into a sidebar and remain after the fade-in. The last bit of code would just need to be changed so that instead of placing it in an absolute position with an opacity=0, it would be placed back to a relative positioning with its original sizing and opacity=1.

    I will play around it tomorrow at work and see how it looks.

    image

  • gastoff
    gastoff
    Posts: 103 edited June 9

    Toyed around with it for a bit and couldn't get it to work like I wanted. Turned out to be 1000% easier to just add a second copy of the image that is fixed to a corner of the screen:

    https://terroratthrushmoor.obsidianportal.com/

    Post edited by gastoff on

    image

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,875

    That is awesome!!!

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

  • HumAnnoyd
    HumAnnoyd
    Posts: 260

    So very cool. I added it to my CotM sites.  Thank you so much!

  • Kallak
    Kallak
    Posts: 1,040

    Looks great Hum! Well done gastoff!

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • twiggyleaf
    twiggyleaf
    Posts: 1,728

    I agree with all.  That thing that gastoff did is amazing.  I say "GO"!!!!!!!!

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Keryth987
    Keryth987
    Posts: 875

    So, I'm using it now on Shadows, but I kinda modified the idea a tad :)

  • Kallak
    Kallak
    Posts: 1,040

    It looks good man!

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • gastoff
    gastoff
    Posts: 103

    @Keryth987, Great idea making it a link to the inerview. Stealing that idea now and adding it to my campaign page!

    image

  • RigilKent
    RigilKent
    Posts: 10

    Forgive me for maybe asking a dumb question, but how do you do this part? "I created my own "CoTM placard" and tagged it as a div class="splash"."

    Making the placard is easy, but how do you tag it as a div class? Sorry ... I'm a CSS newb. :)

    -Rigil

    Current Campaign - Traveller: The Verge - Campaign of the Month July 2020.

     

  • RigilKent
    RigilKent
    Posts: 10

    Nevermind! I managed to get my CSS guy to help me out!

    Thanks!

    -Rigil

    Current Campaign - Traveller: The Verge - Campaign of the Month July 2020.

     

  • twiggyleaf
    twiggyleaf
    Posts: 1,728

    Looks great, @RigilKent

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,875

    I agree, cool add....

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 229 edited July 10

    I totally dig this! But I'm curious- is there a way to have a random splash screen? As in different each time you go to the page? I'd love to add a little more aesthetic to https://shadesoffear.obsidianportal.com/ for example. Even Stack Overflow seems split on it with nothing solid for just pure CSS or div tags I can find so far.

     

    Post edited by Conan_Lybarian on

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 229 edited July 13

    So I've been trying to do some lateral thinking about this. It seems like there is no way to do this with just CSS and HTML So maybe some of you CSS whizzes can tell me if I'm just throwing too much spaghetti at the wall.

    Instead of creating a whole process for random loaded images, is it possible to have the images already on the page ( possibly hidden either by its z element or opacity or some other method if you don't want them shown), and run a script that simply chooses certain random elements? Would they actually need div tags or could they exist already as elements of the page itself instead of having to be brought in from either a url or folder?

    Not sure if this makes sense at all, and that sort of coding is way above my head even if it is possible. Just throwing out ideas.

    Post edited by Conan_Lybarian on

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 229

    So there's NO way to randomize like I was thinking. _But_, you can add a gif as the background instead of just black if you're looking to spice up the splash screen!

  • DungeonMasterLoki
    DungeonMasterLoki
    Posts: 297

    A few quick questions: 

    I know I put the big batch of code into the CSS box in the advanced section. Not so sure about the div thing though. 

    Is the code above (in the OP) the final version that floats the COTM badge over the corner of the site after the splash is finished? 

    The COTM graphics seem pretty standardized, and I have no graphic skills. Any chance I could talk someone into cobbling together a Campaign of the Year 2011 graphic for me? 

    Last not a question, but kudos. @gastoff you ripped it up with this one! 

    Planejammer Panopticon: Central Hub for the Planejammer Campaign Series

    Current Active Games:

    Planejammer: Catch My Drift! (Starfinder RPG)

    Planejammer: The Spelljoined (Pathfinder RPG) Campaign of the Year 2011

     

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 229 edited July 27

    <div class="splashlogo"> at the bottom of whatever page you want it to activate on. Not sure about the floater

    Post edited by Conan_Lybarian on

  • gastoff
    gastoff
    Posts: 103

    @DungeonMasterLoki

    When I made mine, I added TWO images. One of the images was given the div "splashlogo" and the other I gave the div "splash". The CSS for one of them creates the animated splash logo on start up, then hides the image at the back of the stack with an opacity of 0. The second CSS just places the second image in a fixed location of my choosing and adds a link to the interview article.

    I know there is a cleaner way of making the animation do all that and leave the image in the corner as its last state, but I couldn't get it to do so cleanly, so I just went with a workaround of having two images that behaved in two different ways.

    image

  • HumAnnoyd
    HumAnnoyd
    Posts: 260

    Hey, guys. I am using this amazing fade in code (thank you again Gastoff!) on character pages. I made some splash page comics of the characters and I want it to show up and then fade out on a Click.  Is that possible?

    You can see an example of what I am doing here:  

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

  • gastoff
    gastoff
    Posts: 103

    @HumAnnoyd

    You can definitely do that by altering how the animation runs. If you look at the animation progression, it starts as being fully opaque (opacity:1) and floating above all the other elements (z-index:999). An anchor point keeps the image opaque for the first 75% of the animation, and then the fade-out happens in the last 25% of the timer (opacity:0 at 100%).

    The animation is set to play as soon as the page is loaded, but can be changed to play only on a click by moving the animation portion of the CSS code to an ":active" section like so:


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

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

    This will make it so the image loads when the page does, but sits on the screen until clicked. Clicking the image runs the animation that fades it out and pushes the element to the background, revealing the rest of the page.

    image

  • HumAnnoyd
    HumAnnoyd
    Posts: 260 edited October 26
    Thanks @gastoff! However, it doesn't seem to be working. The image does not fade with a click and just sits on top of the page.
    Post edited by HumAnnoyd on
  • gastoff
    gastoff
    Posts: 103

    Hmmm...I wonder if it is having trouble with registering the click because the image is fixed or has a weird z-index...let me play around with the CSS a bit and see what i come up with.

    image

  • HumAnnoyd
    HumAnnoyd
    Posts: 260

    @gastoff 

    I notice that there isn't any instruction to fade out in your code above. Was that supposed to be in addition to the previous code? I tried that but it doesn't work either.  Or at least it doesn't work on a "click". It just fades after a couple of seconds.

  • gastoff
    gastoff
    Posts: 103

    The instruction to fade out is the same as it was before, and is directed by the @keyframes splashlogo CSS. The change I proposed was removing the animation from the .splash CSS and instead moving it to a new CSS called .splash:active

    The ":active" part of the CSS is run whenever the element is interacted with (clicked), and that clicking would run the splashlogo animation.

    After moving the animation portion tohthe ":active" CSS, is your image fading by itself even without any clicking?

    image

  • gastoff
    gastoff
    Posts: 103

    Found out what the issue is, but not how to solve it yet. The ":active" registers when clicked, but stops when the button is released. It will run the animation if hold the mouse button down, but instantly pops back to its initial state when you release the button. With a quick click of the mouse, nothing appears to happen. I will have to keep looking into how to force the animation to trigger on mouse click without it being interrupted when the mouse button is released.

    image

  • HumAnnoyd
    HumAnnoyd
    Posts: 260

    @ gastoff

    Just to be clear is this what the entire code should look like?


    /*COTM SPLASH SCREEN*/

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

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

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

     

  • HumAnnoyd
    HumAnnoyd
    Posts: 260

    The above is what I have currently (I have tried a few other ideas to no avail as well) and  you can see it doesn't quite work here:

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

Sign In or Register to comment.

Stand against the Overlords with November's Campaign of the Month, Hazard Pay!

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