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

Comments

  • SkidAce
    SkidAce
    Posts: 826

    Wow...

     

    /bows

    /not worthy

  • Kallak
    Kallak
    Posts: 1,022

    @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: 86

    @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: 86 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,847

    That is awesome!!!

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

  • HumAnnoyd
    HumAnnoyd
    Posts: 232

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

    November 2012 CotM:  The Emerald City

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

    June 2020 CotM:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem 

  • Kallak
    Kallak
    Posts: 1,022

    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,700

    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: 860

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

  • Kallak
    Kallak
    Posts: 1,022

    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: 86

    @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,700

    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,847

    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: 228 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: 228 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: 228

    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: 295

    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: 228 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: 86

    @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

Sign In or Register to comment.

Star Wars - Das Erbe der Jedi-Ritter is September'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