Comments

• 

  thaen

  Posts: 1,076 March 2021

  I'll have to research this more to give you an answer, but I don't have a timeframe on when that will happen.

  Obsidian Portal Developer
• 

  gastoff

  Posts: 136 March 2021

  @jodie To help combat the FOUT and other content as it loads, I added a slight fade-in effect to my pages. It serves dual purposes as it helps to give a small window of time for effects and formats to load and it also helps soften the transition between pages in increase the visual appeal. Here is the CSS I used to make the effect:

  
  .campaign-landing-show #content{
  opacity:0;
  animation:wakeup 1s linear 0.5s forwards!important;}
  
   .campaign-public-layout #content{
  opacity:0;
  animation:wakeup 0.5s linear forwards;
  max-width:100%;
  padding-left:50px;} 
  
  @keyframes wakeup{
  0%{opacity:0;}
  100%{opacity:1;}
  }

  It has a 1s fade-in on the Home Screen and a 0.5s fade-in on any other pages.

  
• ragnarhawk

  Posts: 168 March 2021

  Very cool.  I just applied it to one of my campaigns with a small tweak.

  
  /* Fade in animation */
  
  #content:div:first-child {opacity:0;
  animation:wakeup 0.25s linear forwards;
  }
  
  .campaign-landing-show #content div:not(:first-child){
  opacity:0;
  animation:wakeup 1s linear 0.5s forwards!important;}
  
   .campaign-public-layout #content div:not(:first-child){
  opacity:0;
  animation:wakeup 0.5s linear forwards;
  } 
  
  @keyframes wakeup{
  0%{opacity:0;}
  100%{opacity:1;}
  }

  With this, the background fades in after .25 seconds, and everything else than appears over the background.  It gives a moment to take in the background before the content loads
• 

  jodie

  Posts: 82 March 2021 edited March 2021

  @gastoff that's really useful, thank you very much!

  That mostly cleared my FOUT out. It's only visible on the chonkiest text on the character pages now.

  Post edited by jodie on March 2021