<div class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 class="frame-1">Click to skip preloader...</h2>
<h2 class="frame-2">Land<sub>ing</sub> pag<sub>es</sub></h2>
<h2 class="frame-3">Ja<sub>va</sub>Sc<sub>ri</sub>pt</h2>
<h2 class="frame-4">U<sub>I</sub>/<sub>U</sub>X</h2>
<h2 class="frame-5">Woocommerce</h2>
<h2 class="frame-6">HTML</h2>
<h2 class="frame-7">Wo<sub>r</sub>d<sub>P</sub>ress</h2>
<h2 class="frame-8">We<sub>b</sub>la<sub>ba.</sub>ru</h2>
<h2 class="frame-9">D<sub>e</sub>si<sub>gn</sub></h2>
<h2 class="frame-10">Cr<sub>ea</sub>ti<sub>vi</sub>ty</h2>
<h2 class="frame-11">Ad<sub>a</sub>pt<sub>i</sub>ve</h2>
<h2 class="frame-12">S<sub>E</sub>O</h2>
<h2 class="frame-13">CSS</h2>
<h2 class="frame-14"><sub>P</sub>H<sub></sub>P</h2>
<h2 class="frame-15">Po<sub>rt</sub>fo<sub></sub>lio</h2>
<h2 class="frame-16">C<sub>o</sub>d<sub>e</sub></h2>
<h2 class="frame-end">
<span>design, </span>
<span>code, </span>
<span class="last">wordpress<!--<br><small>Refresh page, please(F5 or swipe-down)!</small>--></span>
</h2>
</div>
</div>
<script>
jQuery('.last').on('animationend webkitAnimationEnd', function() {
jQuery('.smart-page-loader').fadeOut("slow", function () {
jQuery('.smart-page-loader').css({display:"none"});
console.log('Preloader destroyed');
});
});
jQuery('.smart-page-loader').click(function(){
jQuery('.smart-page-loader').fadeOut("slow", function () {
jQuery('.smart-page-loader').css({display:"none"});
console.log('Preloader destroyed by click');
});
});
/*jQuery('a').click(function(){
jQuery("body").addClass('fade-out');
});*/
</script>
<style>
.fade-out{
transition-delay:.4s;
transition: opacity .5s ease;
opacity:0;
}
h1.main, p.demos {
animation-delay: 18s;
}
.smart-page-loader{
/* pointer-events:none;*/
}
.sp-container {
/* pointer-events:none;*/
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background-color:#03130A;
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {
will-change:opacity, transform, filter;
transform-origin: center;
position: absolute;
top: 50%;
line-height: 100px;
height: 90px;
margin-top: -50px;
font-size: 90px;
width: 100vw;
text-align: center;
color: transparent;
transform: scale3d(1,1,1);
/*animation: blurFadeInOut 3s ease-in backwards;*/
animation: blurFadeInOut 3s ease-in backwards;
}
@media screen and (max-width:1024px){
}
@media screen and (max-width:768px) {
.sp-container h2 {
line-height:1.4em;
font-size: 3rem;
}
}
.sp-container h2.frame-1 {
animation-delay: 0s;
}
.sp-container h2.frame-2 {
animation: blurFadeOutLeftTop 3s ease-in backwards;
animation-delay: 1.7s;
}
.sp-container h2.frame-3 {
animation: blurFadeOutLeftBottom 3s ease-in backwards;
animation-delay: 8s;
}
.sp-container h2.frame-4 {
animation: blurFadeOutLeftBottom 3s ease-in backwards;
animation-delay: 4.3s;
}
.sp-container h2.frame-5 {
animation-delay: 2.8s;
}
.sp-container h2.frame-6 {
animation: blurFadeOutRightTop 3s ease-in backwards;
animation-delay: 6s;
}
.sp-container h2.frame-7 {
animation: blurFadeOutLeftBottom 3s ease-in backwards;
animation-delay: 1s;
}
.sp-container h2.frame-8 {
animation-delay: 10s;
}
.sp-container h2.frame-9 {
animation: blurFadeOutRightBottom 3s ease-in backwards;
animation-delay: 0s;
}
.sp-container h2.frame-10 {
animation-delay: 8.2s;
}
.sp-container h2.frame-11 {
animation: blurFadeOutLeftTop 3s ease-in backwards;
animation-delay: 6s;
}
.sp-container h2.frame-12 {
animation: blurFadeOutLeftTop 3s ease-in backwards;
animation-delay: 9s;
}
.sp-container h2.frame-13 {
animation-delay: 6.3s;
}
.sp-container h2.frame-14 {
animation: blurFadeOutRightBottom 3s ease-in backwards;
animation-delay: 3s;
}
.sp-container h2.frame-15 {
animation: blurFadeOutRightTop 3s ease-in backwards;
animation-delay: 7s;
}
.sp-container h2.frame-16 {
animation: blurFadeOutRightTop 3s ease-in backwards;
animation-delay: .4s;
}
.sp-container h2.frame-end {
transform:translatey(-50%);
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-end span {
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-end span:nth-child(2) {
animation-delay: 13s;
}
.sp-container h2.frame-end span:nth-child(3) {
animation-delay: 14s;
}
@keyframes blurFadeOutLeftTop {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale3d(1.3, 1.3, 1) translate3d(-14vw, -28vh, 0);
}
50% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale3d(1, 1, 1) translate3d(-14vw, -28vh, 0);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale3d(0,0,1) translate3d(-14vw, -28vh, 0);
}
}
@keyframes blurFadeOutLeftBottom {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale3d(1.3, 1.3, 1) translate3d(-24vw, 18vh, 0);
}
50% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale3d(1, 1, 1) translate3d(-24vw, 18vh, 0);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale3d(0,0,1) translate3d(-24vw, 18vh, 0);
}
}
@keyframes blurFadeOutRightTop {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale3d(1.3, 1.3, 1) translate3d(44vw, -18vh, 0);
}
50% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale3d(1,1,1) translate3d(44vw, -18vh, 0);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale3d(0,0,1) translate3d(44vw, -18vh, 0);
}
}
@keyframes blurFadeOutRightBottom {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale3d(1.3, 1.3, 1) translate3d(14vw, 38vh, 0);
}
50% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale3d(1,1,1) translate3d(14vw, 38vh, 0);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale3d(0,0,1) translate3d(14vw, 38vh, 0);
}
}
@keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale3d(1.3, 1.3, 1);
}
50% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale3d(0,0,1);
}
}
@keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale3d(1.3, 1.3, 1);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale3d(1.1, 1.1, 1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale3d(1, 1, 1);
}
}
@keyframes fadeInBack {
0% {
opacity: 0;
transform: scale3d(0,0,1);
}
50% {
opacity: 0.4;
transform: scale3d(2,2,1);
}
100% {
opacity: 0.2;
transform: scale3d(5,5,1);
}
}
</style>