@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?
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Wow...
/bows
/not worthy
Unconquered Kingdoms, July 2016 CotM
@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.
- Kallak
@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.
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/
That is awesome!!!
Just trying to help out.
So very cool. I added it to my CotM sites. Thank you so much!
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
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Looks great Hum! Well done gastoff!
- Kallak
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
So, I'm using it now on Shadows, but I kinda modified the idea a tad :)
It looks good man!
- Kallak
@Keryth987, Great idea making it a link to the inerview. Stealing that idea now and adding it to my campaign page!
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.
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.
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
I agree, cool add....
Just trying to help out.
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.
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.
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!
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!
Game Designer, Pro GM, multiple ENnie Award winner
GM of Planejammer: The Spelljoined (Pathfinder 1e) Campaign of the Year 2011 and still going strong!
GM of The Planewalker's Guild (Pathfinder 1e)
Need a GM? Book me today!
<div class="splashlogo"> at the bottom of whatever page you want it to activate on. Not sure about the floater
@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.
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
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
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
@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:
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.
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
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
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.
@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.
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
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
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?
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.
@ gastoff
Just to be clear is this what the entire code should look like?
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
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
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
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
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated