"split page preloader"
Bootstrap 4.0.0 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="skw-pages"> <div class="skw-page skw-page-1 active"> <div class="skw-page__half skw-page__half--left"> <div class="skw-page__skewed"> <div class="skw-page__content"> <h2 class="skw-page__heading">Hello</h2> </div> </div> </div> <div class="skw-page__half skw-page__half--right"> <div class="skw-page__skewed"> <div class="skw-page__content"> <h2 class="skw-page__heading2">World</h2> </div> </div> </div> </div> </div>
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #15181A; font-family: "Open Sans", Helvetica, Arial, sans-serif; } .skw-pages { overflow: hidden; position: relative; height: 100vh; } .skw-page { position: absolute; left: 0; top: 0; width: 100%; } .skw-page__half { position: absolute; top: 0; width: 50%; height: 100vh; -webkit-transition: -webkit-transform 1s; transition: transform 1s; } .skw-page__half--left { left: 0; -webkit-transform: translate3d(-32.4vh, 100%, 0); transform: translate3d(-32.4vh, 100%, 0); } .skw-page__half--right { left: 50%; -webkit-transform: translate3d(32.4vh, -100%, 0); transform: translate3d(32.4vh, -100%, 0); } .skw-page.active .skw-page__half { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .skw-page__skewed { overflow: hidden; position: absolute; top: 0; width: 140%; height: 100%; -webkit-transform: skewX(-18deg); -ms-transform: skewX(-18deg); transform: skewX(-18deg); background: #000; } .skw-page__half--left .skw-page__skewed { left: -40%; } .skw-page__half--right .skw-page__skewed { right: -40%; } .skw-page__content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 30%; color: #fff; -webkit-transform: skewX(18deg); -ms-transform: skewX(18deg); transform: skewX(18deg); -webkit-transition: -webkit-transform 1s, opacity 1s; transition: transform 1s, opacity 1s; background-size: cover; } .skw-page__half--left .skw-page__content { padding-left: 30%; padding-right: 30%; -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .skw-page__half--right .skw-page__content { padding-left: 30%; padding-right: 30%; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .skw-page.inactive .skw-page__content { opacity: 0.5; -webkit-transform: skewX(18deg) scale(0.95); -ms-transform: skewX(18deg) scale(0.95); transform: skewX(18deg) scale(0.95); } h2.skw-page__heading { position: absolute; top: 50%; left: 86%; transform: translate(-50%, -50%); font-size: 1.5rem; } h2.skw-page__heading2 { position: absolute; top: 50%; left: 14.3%; font-size: 1.5rem; transform: translate(-50%, -50%); } .skw-page__description { font-size: 18px; text-align: center; } .skw-page__link { color: #FFA0A0; } .skw-page-1 .skw-page__half--left .skw-page__content { background: yellowgreen; } .skw-page-1 .skw-page__half--right .skw-page__content { background: #E74C3C; } .skw-page__half--left .skw-page__skewed { animation-name: moveleft; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: .5s; /* animation-direction: forwards; */ animation-iteration-count: 1; /* animation-fill-mode: none; animation-play-state: running; */ } @keyframes moveleft { 0%{ left: -40%; } 100% { left: -156%; } } .skw-page__half--right .skw-page__skewed { animation-name: moveright; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: .5s; /* animation-direction: forwards; */ animation-iteration-count: 1; /* animation-fill-mode: none; animation-play-state: running; */ } @keyframes moveright { 0%{ right: -40%; } 100% { right: -156%; } } .skw-page__half--right .skw-page__skewed { animation-name: moveright; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: .5s; /* animation-direction: forwards; */ animation-iteration-count: 1; /* animation-fill-mode: none; animation-play-state: running; */ } @keyframes moveright text-animation { 0%{ right: -40%; } 100% { right: -156%; } } h2.skw-page__heading { animation-name: text-animation; animation-duration: .2s; animation-timing-function: ease-in; animation-delay: .1s; /* animation-direction: forwards; */ animation-iteration-count: 1; /* animation-fill-mode: none; animation-play-state: running; */ } @keyframes text-animation { 0%{ font-size: 0.1rem; opacity: .9; } 100% { font-size: 1.5rem; opacity: 0; } } h2.skw-page__heading2 { animation-name: text-animation; animation-duration: .2s; animation-timing-function: ease-in; animation-delay: .1s; /* animation-direction: forwards; */ animation-iteration-count: 1; /* animation-fill-mode: none; animation-play-state: running; */ } @keyframes text-animation { 0%{ font-size: 0.1rem; opacity: .9; } 100% { font-size: 1.5rem; opacity: 0; visibility: hidden; } }
var overlay = document.querySelector('.skw-pages'); window.addEventListener('load', function(){ function sayHi() { overlay.style.display = 'none'; } setTimeout(sayHi, 2000); });

Related: See More


Questions / Comments: