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; } #extra-div-1 { background: url("http://expunged.xyz/log.jpg"); display: none; }
page revision: 27, last edited: 06 Aug 2020 23:32