Javascript7.5(ページローダー)

コメントを残す

7から続きます

2:ページローダーの実装

作成するもの

HTMLの記述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
  <link rel="stylesheet" href="loader.css">
  <script src="./pace.js"></script>
</head>
<body>
  <div id="global-container">
    <a href="https://github.hubspot.com/pace/docs/welcome/" target="_blank">PaceJs</a>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<div><img src="images/flowers1.jpg" alt="" /></div>
<style>
img {
 max-width: 100%;
}
</style>
  </div>
</body>
</html>

SCSSの記述

@import "mixin";
$cWineRed: #904669;
$cSubTitle: #535353;

.pace-done #global-container {
// ゆっくりとコンテンツを表示
  transition: opacity 1s;
}

.pace-running #global-container {
// 画面が更新されている間はコンテンツを非表示
  opacity: 0;
}

.pace {
  z-index: 2000;
// 画面を中央にするための設定(bottomまで)
  position: fixed;
  margin: auto;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
}

.pace .pace-progress {
  transform: none !important;
  text-align: center;
}

.pace .pace-progress:after {
  content: attr(data-progress-text);
  display: inline-block;
  font-weight: 100;
  font-size: 2em;
  font-family: "Helvetica Neue", "Yu Gothic", sans-serif;
  color: $cSubTitle;
}

.pace.pace-inactive {
  display: none;
}
.pace-progress-inner {
  width: 40px;
  height: 40px;
  background-color: $cWineRed;
// 中央揃えにする
  margin: 0 auto;
@include animation(
$name: sk-rotateplane,
$duration: 1.2s,
$iteration-count: infinite,
$timing-function: ease-in-out
);
}

@keyframes sk-rotateplane {
0% {
  transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
  transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
100% {
  transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
}

Pace.jsはコチラから

https://raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js

8に続きます。

コメントを残すコメントをキャンセル