今管理しているサイト

今管理しているウェブサイトがいくつかあるのですが、そのうちの２サイトはほぼ同じテンプレートを使っています。

https://k182-svc.uh-oh.jp/nani-suru/
https://www.funny-ads.net/

slick（スライダー）が走る前に表示されてしまうので、トップページのみ最初の画面（ローディング的なやつ）を付け加えました。すごいざっくりこんな感じになっていますが、なんとなく走っています。

<div class="bg">
   <p>コメント</p>
   <img src="ロゴのパス" alt="">
</div>

$(function() {
   $('body').delay(100).queue(function() {
       $(this).addClass("s3").dequeue();
   });
   $('body').delay(3000).queue(function() {
       $(this).addClass("s2").dequeue();
   });
   $('body').delay(500).queue(function() {
       $(this).removeClass("s1").dequeue();
   });
});

body>.bg {
   display: none;
   p {
       opacity: 0;
       filter: blur(7px);
       transition: 0.8s;
       transform: translate(0, -10px);
   }
   img {
       opacity: 0;
       filter: blur(7px);
       transition: 0.8s;
       transform: translate(0, 10px);
       margin-bottom: 60px;
   }
}

.s1 {
   .bg {
       background-color: #fff;
       position: fixed;
       top: 0;
       left: 0;
       height: 100vh;
       width: 100vw;
       z-index: 9999999;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       transition: 1s;
       filter: blur(0);
       p {
           font-weight: bold;
           margin-bottom: 20px;
           font-size: 10px;
       }
       img {
           max-width: 300px;
           width: calc(100% - 180px);
       }
   }
   &.s3 {
       p {
           opacity: 1;
           filter: blur(0);
           transform: translate(0, 0);
       }
       img {
           opacity: 1;
           filter: blur(0);
           transform: translate(0, 0);
       }
   }
   &.s2 {
       .bg {
           filter: blur(3px);
           opacity: 0;
           p {
               opacity: 0;
               filter: blur(4s);
           }
           img {
               opacity: 0;
               filter: blur(4s);
           }
       }
   }
}

そんなわけで、これから実装したことなどを日記にしようかと思ったりします。