Fadeout Page-Contents
/* 
Fadeout Page-Contents
- Copyright (c) 2020 ukwhatn
- Released under the MIT License
- http://expunged.xyz/MIT.txt
*/
 
/*== variables ==*/
:root {
 
  /* Background Color (Default: white) */
  --fadeout-background: white;
 
  /* FadeOut Duration */
  --fadeout-time: 1s;
 
  /* Image FadeIn Duration (If you use image fade-in) */
  --img-fadein-time: 1s;
 
  /* Image Fadein Delay (If you use image fade-in) */
  --img-fadein-delay: 1s;
 
  /* Text FadeIn Duration (If you use image fade-in) */
  --txt-fadein-time: 1s;
 
  /* Text Fadein Delay (If you use image fade-in) */
  --txt-fadein-delay: 1s;
 
  /* Cropped Header (To erace the shadow under the header)
      If you use themes other than Sigma-9(Default), pls change this variable. */
  --cropped-header: url(http://smlt.wdfiles.com/local--files/ukwhatn:fadeout/header-crop.png);
 
}
 
/*== BASE CODE ==*/
 
div#container-wrap {
  background-image: var(--cropped-header);
}
 
.fadeout-wrapper  {
  position: relative;
  overflow: hidden;
}
 
.fadeout-wrapper .cover{
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  background: var(--fadeout-background);
  color: transparent;
  animation: cover-anim var(--fadeout-time) linear 0s 1 forwards;
}
 
@keyframes cover-anim {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 
.fadeout-wrapper .escape {
  position: relative;
  display: inline-block;
  z-index: 3;
}
 
.fadeout-wrapper .fadein-img img{
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: cover-anim var(--img-fadein-time) linear var(--img-fadein-delay) 1 forwards;
}
 
.fadeout-wrapper .fadein-txt {
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: cover-anim var(--txt-fadein-time) linear var(--txt-fadein-delay) 1 forwards;
}