Preloader Weblaba

    0

    0

    Codiga Fan #25142

    <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>
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.