Merge pull request #2 from yuki540net/feature/load-view
Feature/load view
This commit is contained in:
yuki540
GitHub
commit
531852d6a9
BIN
public/images/load-view/poster/1.png
Normal file
BIN
public/images/load-view/poster/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/images/load-view/poster/2.png
Normal file
BIN
public/images/load-view/poster/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
public/images/load-view/poster/3.png
Normal file
BIN
public/images/load-view/poster/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
public/images/load-view/poster/4.png
Normal file
BIN
public/images/load-view/poster/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
public/images/load-view/sd/1.png
Normal file
BIN
public/images/load-view/sd/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/images/load-view/sd/2.png
Normal file
BIN
public/images/load-view/sd/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/images/load-view/sd/3.png
Normal file
BIN
public/images/load-view/sd/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/images/load-view/sd/4.png
Normal file
BIN
public/images/load-view/sd/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
public/images/load-view/text/1.png
Normal file
BIN
public/images/load-view/text/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/images/load-view/text/2.png
Normal file
BIN
public/images/load-view/text/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/images/load-view/text/3.png
Normal file
BIN
public/images/load-view/text/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
public/images/load-view/text/4.png
Normal file
BIN
public/images/load-view/text/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
public/images/load-view/wait/1.png
Normal file
BIN
public/images/load-view/wait/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
public/images/load-view/wait/2.png
Normal file
BIN
public/images/load-view/wait/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/images/load-view/wait/3.png
Normal file
BIN
public/images/load-view/wait/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/images/load-view/wait/4.png
Normal file
BIN
public/images/load-view/wait/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -37,7 +37,104 @@
|
||||
<link rel="stylesheet" href="./stylesheets/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<app />
|
||||
<main id="root">
|
||||
<section class="load-view">
|
||||
<div class="load-view__frame">
|
||||
<div class="load-view__frame__squares">
|
||||
<div></div><div></div><div></div><div></div>
|
||||
</div>
|
||||
<div class="load-view__frame__lines">
|
||||
<div></div><div></div><div></div><div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="load-view__body">
|
||||
<div class="load-view__body__bg"></div>
|
||||
<div class="load-view__body__panel">
|
||||
<section class="load-view__body__panel__icon load-view__body__panel__icon_type_1">
|
||||
<div class="box">
|
||||
<div class="frame"></div>
|
||||
<div class="frame"></div>
|
||||
</div>
|
||||
<div class="icon"></div>
|
||||
</section>
|
||||
<section class="load-view__body__panel__icon load-view__body__panel__icon_type_2">
|
||||
<div class="box">
|
||||
<div class="frame"></div>
|
||||
<div class="frame"></div>
|
||||
</div>
|
||||
<div class="icon"></div>
|
||||
</section>
|
||||
<section class="load-view__body__panel__icon load-view__body__panel__icon_type_3">
|
||||
<div class="box">
|
||||
<div class="frame"></div>
|
||||
<div class="frame"></div>
|
||||
</div>
|
||||
<div class="icon"></div>
|
||||
</section>
|
||||
<section class="load-view__body__panel__icon load-view__body__panel__icon_type_4">
|
||||
<div class="box">
|
||||
<div class="frame"></div>
|
||||
<div class="frame"></div>
|
||||
</div>
|
||||
<div class="icon"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="load-view__body__poster">
|
||||
<section class="poster">
|
||||
<div class="illust"></div>
|
||||
<div class="handle"></div>
|
||||
<div class="ball"></div>
|
||||
</section>
|
||||
<section class="poster">
|
||||
<div class="illust"></div>
|
||||
<div class="ball"></div>
|
||||
</section>
|
||||
<section class="poster">
|
||||
<div class="illust"></div>
|
||||
<div class="ball"></div>
|
||||
</section>
|
||||
<section class="poster">
|
||||
<div class="illust"></div>
|
||||
<div class="ball"></div>
|
||||
</section>
|
||||
<div class="paint-ball-box">
|
||||
<div class="paint-ball"><div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="load-view__body__info">
|
||||
<section class="allow">
|
||||
<img class="sd sd-1" src="./images/load-view/sd/1.png" alt="SDキャラ" />
|
||||
<img class="text text-1" src="./images/load-view/text/1.png" alt="テキスト" />
|
||||
<div class="line"></div>
|
||||
<div class="paint-ball"><div></div></div>
|
||||
</section>
|
||||
<section class="allow">
|
||||
<img class="sd sd-2" src="./images/load-view/sd/2.png" alt="SDキャラ" />
|
||||
<img class="text text-2" src="./images/load-view/text/2.png" alt="テキスト" />
|
||||
<div class="line"></div>
|
||||
<div class="paint-ball"><div></div></div>
|
||||
</section>
|
||||
<section class="allow">
|
||||
<img class="sd sd-1" src="./images/load-view/sd/3.png" alt="SDキャラ" />
|
||||
<img class="text text-1" src="./images/load-view/text/3.png" alt="テキスト" />
|
||||
<div class="line"></div>
|
||||
<div class="paint-ball"><div></div></div>
|
||||
</section>
|
||||
<section class="allow">
|
||||
<img class="sd sd-2" src="./images/load-view/sd/4.png" alt="SDキャラ" />
|
||||
<img class="text text-2" src="./images/load-view/text/4.png" alt="テキスト" />
|
||||
<div class="line"></div>
|
||||
<div class="paint-ball"><div></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="load-view__body__close">
|
||||
<div class="curtain"></div>
|
||||
<div class="curtain"></div>
|
||||
<h3 class="message">Let's enjoy CSS Animation.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<script type="text/javascript" src="./scripts/app.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
import riot from 'riot'
|
||||
import route from 'riot-route'
|
||||
import * as util from './lib/util'
|
||||
import preload_json from './config/preload'
|
||||
|
||||
// components
|
||||
import './components/app.tag'
|
||||
|
||||
// loading
|
||||
util.startLoading(() => {
|
||||
util.preload(preload_json, () => {
|
||||
util.finLoad()
|
||||
}, data => {})
|
||||
})
|
||||
|
||||
riot.mount('app')
|
||||
|
||||
14
src/scripts/config/preload.js
Normal file
14
src/scripts/config/preload.js
Normal file
@ -0,0 +1,14 @@
|
||||
export default [
|
||||
'./images/load-view/poster/1.png',
|
||||
'./images/load-view/poster/2.png',
|
||||
'./images/load-view/poster/3.png',
|
||||
'./images/load-view/poster/4.png',
|
||||
'./images/load-view/sd/1.png',
|
||||
'./images/load-view/sd/2.png',
|
||||
'./images/load-view/sd/3.png',
|
||||
'./images/load-view/sd/4.png',
|
||||
'./images/load-view/text/1.png',
|
||||
'./images/load-view/text/2.png',
|
||||
'./images/load-view/text/3.png',
|
||||
'./images/load-view/text/4.png',
|
||||
]
|
||||
70
src/scripts/lib/util.js
Normal file
70
src/scripts/lib/util.js
Normal file
@ -0,0 +1,70 @@
|
||||
const root = document.getElementById('root')
|
||||
const load_icon = document.querySelector('.load-view__body__panel__icon_type_4 .icon')
|
||||
const load_view = document.querySelector('.load-view')
|
||||
const load_view_body_close = document.querySelector('.load-view__body__close')
|
||||
|
||||
/**
|
||||
* 画像のプリロード
|
||||
* @param images : 画像パスの配列
|
||||
* @param fn : コールバック関数
|
||||
* @param progress : 読み込み状況取得用コールバック関数
|
||||
*/
|
||||
export const preload = (images, fn, progress) => {
|
||||
const len = images.length
|
||||
let load = 0
|
||||
|
||||
images.forEach((image, key) => {
|
||||
const img = new Image()
|
||||
img.src = image
|
||||
img.onload = () => {
|
||||
load += 1
|
||||
progress({
|
||||
size : len,
|
||||
load : load,
|
||||
per : load / len
|
||||
})
|
||||
|
||||
if(load >= len) fn()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* スマートフォンかどうかの真偽
|
||||
* @return bool
|
||||
*/
|
||||
export const isSP = () => {
|
||||
const useragent = navigator.userAgent.toLowerCase()
|
||||
const reg = /(iphone|ipad|ipod|android|mobile)/
|
||||
|
||||
return reg.test(useragent)
|
||||
}
|
||||
|
||||
/**
|
||||
* PCかどうかの真偽
|
||||
* return bool
|
||||
*/
|
||||
export const isPC = () => {
|
||||
return !isSP()
|
||||
}
|
||||
|
||||
/**
|
||||
* ロードの開始タイミングを取得
|
||||
* @param fn : コールバック関数
|
||||
*/
|
||||
export const startLoading = fn => {
|
||||
load_icon.addEventListener('animationend', fn)
|
||||
}
|
||||
|
||||
/**
|
||||
* ロードの終了
|
||||
*/
|
||||
export const finLoad = () => {
|
||||
load_view.setAttribute('data-state', 'start')
|
||||
|
||||
load_view_body_close.addEventListener('animationend', e => {
|
||||
if(e.animationName === 'load-view__close-2') {
|
||||
root.removeChild(load_view)
|
||||
}
|
||||
})
|
||||
}
|
||||
20
src/scss/keyframes/_common.scss
Normal file
20
src/scss/keyframes/_common.scss
Normal file
@ -0,0 +1,20 @@
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@keyframes rotate360 {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes slide-right {
|
||||
from { transform: translateX(-100%); }
|
||||
to { transform: translateX(0%); }
|
||||
}
|
||||
@keyframes slide-left {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0%); }
|
||||
}
|
||||
115
src/scss/keyframes/pc/_load-view.scss
Normal file
115
src/scss/keyframes/pc/_load-view.scss
Normal file
@ -0,0 +1,115 @@
|
||||
@keyframes load-view__show-wait-icon {
|
||||
from { transform: translateX(-150px) scale(0.8); }
|
||||
to { transform: translateX(0px) scale(1.3); }
|
||||
}
|
||||
@keyframes load-view__scale-wait-icon {
|
||||
from { transform: scale(5) rotate(0deg); }
|
||||
to { transform: scale(1) rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes load-view__show-poster {
|
||||
from { transform: translateY(calc(-100% + -200px)); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes load-view__fall-ball {
|
||||
0% { transform: translateY(calc(-50% + -25px)); }
|
||||
40% { transform: translateY(calc(50% - 25px)); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
@keyframes load-view__scale-ball {
|
||||
0% {
|
||||
width: 50px; height: 50px; border-radius: 50%;
|
||||
top: calc(50% - 25px); left: calc(50% - 25px);
|
||||
}
|
||||
50% {
|
||||
width: calc(100% - 10px); height: 650px; border-radius: 0%;
|
||||
top: calc(50% - 325px); left: 5px;
|
||||
}
|
||||
100% {
|
||||
width: calc(100% - 10px); height: 0; border-radius: 0%;
|
||||
top: calc(50% - 325px); left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load-view__sway-illust {
|
||||
from { transform: rotate(-2deg); }
|
||||
to { transform: rotate(2deg); }
|
||||
}
|
||||
@keyframes load-view__rotate-illust {
|
||||
from { transform: rotateY(0deg); }
|
||||
to { transform: rotateY(480deg); }
|
||||
}
|
||||
|
||||
@keyframes load-view__move-paint-ball {
|
||||
from { left: -60px; transform: rotate(0deg); }
|
||||
to { left: calc(100% + 60px); transform: rotate(1440deg); }
|
||||
}
|
||||
@keyframes load-view__move-paint-ball-1 {
|
||||
from { left: -60px; transform: rotate(0deg); }
|
||||
to { left: calc(100% + 60px); transform: rotate(5760deg); }
|
||||
}
|
||||
@keyframes load-view__move-paint-ball-2 {
|
||||
from { left: calc(100% + 60px); transform: rotate(0deg); }
|
||||
to { left: -60px; transform: rotate(-5760deg); }
|
||||
}
|
||||
|
||||
@keyframes load-view__show-line-1 {
|
||||
from { transform: translate(calc(100% + 15px), calc(100% - 5px)); }
|
||||
to { transform: translate(-15px, calc(100% - 5px)); }
|
||||
}
|
||||
@keyframes load-view__show-line-2 {
|
||||
from { transform: translate(calc(-100% + -15px), calc(100% - 5px)); }
|
||||
to { transform: translate(-15px, calc(100% - 5px)); }
|
||||
}
|
||||
@keyframes load-view__hidden-line-1 {
|
||||
0% { transform: translate(-15px, calc(100% - 5px)); }
|
||||
50% { transform: translate(-15px, 0); }
|
||||
100% { transform: translate(calc(100% + 15px), 0); }
|
||||
}
|
||||
@keyframes load-view__hidden-line-2 {
|
||||
0% { transform: translate(-15px, calc(100% - 5px)); }
|
||||
50% { transform: translate(-15px, 0); }
|
||||
100% { transform: translate(calc(-100% + -15px), 0); }
|
||||
}
|
||||
|
||||
@keyframes load-view__sway-sd {
|
||||
from { transform: rotate(-5deg); }
|
||||
to { transform: rotate(5deg); }
|
||||
}
|
||||
|
||||
@keyframes load-view__show-curtain-1 {
|
||||
from { transform: translateY(-100%); }
|
||||
to { transform: translateY(0%); }
|
||||
}
|
||||
@keyframes load-view__show-curtain-2 {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0%); }
|
||||
}
|
||||
@keyframes load-view__show-curtain-inner-1 {
|
||||
0% { transform: translateY(0); }
|
||||
30% { transform: translateY(calc(100% - 15px)); }
|
||||
80% { transform: translateY(calc(100% - 60px)); }
|
||||
100% { transform: translateY(100%); }
|
||||
}
|
||||
@keyframes load-view__show-curtain-inner-2 {
|
||||
0% { transform: translateY(0); }
|
||||
30% { transform: translateY(calc(-100% + 15px)); }
|
||||
80% { transform: translateY(calc(-100% + 60px)); }
|
||||
100% { transform: translateY(-100%); }
|
||||
}
|
||||
|
||||
@keyframes load-view__show-message {
|
||||
0% { transform: translateX(-200px); opacity: 0; }
|
||||
8% { transform: translateX(-80px); opacity: 1; }
|
||||
100% { transform: translateX(0px); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes load-view__close-1 {
|
||||
from { transform: translateY(-100%); }
|
||||
to { transform: translateY(0%); }
|
||||
}
|
||||
@keyframes load-view__close-2 {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0%); }
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
639
src/scss/modules/pc/_load-view.scss
Normal file
639
src/scss/modules/pc/_load-view.scss
Normal file
@ -0,0 +1,639 @@
|
||||
@include pc-layout {
|
||||
.load-view {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
min-width: $min-width; min-height: $min-height;
|
||||
background-color: $theme-pink;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* frame
|
||||
*/
|
||||
.load-view__frame {
|
||||
position: absolute;
|
||||
top: 20px; left: 20px;
|
||||
width: calc(100% - 40px);
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
/*** squares ***/
|
||||
.load-view__frame__squares {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
width: 40px; height: 40px;
|
||||
border: dashed 3px #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
div:nth-child(1) { top: 0; left: 0; }
|
||||
div:nth-child(2) { top: 0; right: 0; }
|
||||
div:nth-child(3) { bottom: 0; left: 0; }
|
||||
div:nth-child(4) { bottom: 0; right: 0; }
|
||||
}
|
||||
|
||||
/*** lines ***/
|
||||
.load-view__frame__lines {
|
||||
position: absolute;
|
||||
top: 37px; left: 37px;
|
||||
width: calc(100% - 74px);
|
||||
height: calc(100% - 74px);
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
div:nth-child(1),
|
||||
div:nth-child(3) {
|
||||
left: 0; width: 100%; height: 3px;
|
||||
border-top: dashed 3px #fff;
|
||||
}
|
||||
div:nth-child(2),
|
||||
div:nth-child(4) {
|
||||
top: 0; width: 1px; height: 100%;
|
||||
border-left: dashed 3px #fff;
|
||||
}
|
||||
div:nth-child(1) { top: 0; }
|
||||
div:nth-child(3) { bottom: 0; }
|
||||
div:nth-child(2) { left: 0; }
|
||||
div:nth-child(4) { right: 0; }
|
||||
}
|
||||
|
||||
/**
|
||||
* body
|
||||
*/
|
||||
.load-view__body {
|
||||
position: absolute;
|
||||
top: 0px; left: 0px;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
|
||||
/*** bg ***/
|
||||
.load-view__body__bg {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
width: calc(100% - 180px);
|
||||
height: calc(100% - 180px);
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
&::before { top: 80px; left: 80px; }
|
||||
&::after { bottom: 80px; right: 80px; }
|
||||
}
|
||||
|
||||
/*** panel ***/
|
||||
.load-view__body__panel {
|
||||
position: absolute;
|
||||
top: 0; left: calc(50% - 450px);
|
||||
width: 900px; height: 100%;
|
||||
}
|
||||
|
||||
/*** panel__icon ***/
|
||||
.load-view__body__panel__icon {
|
||||
position: absolute;
|
||||
top: calc(50% - 60px);
|
||||
width: 120px; height: 120px;
|
||||
opacity: 0;
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
top: 8px; left: 8px;
|
||||
width: calc(100% - 16px); height: calc(100% - 16px);
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
}
|
||||
|
||||
.frame {
|
||||
position: absolute;
|
||||
width: 40%; height: 40%;
|
||||
|
||||
&::before,
|
||||
&::after { content: ""; display: block; position: absolute; }
|
||||
&::before { width: 100%; height: 8px; }
|
||||
&::after { width: 8px; height: 100%; }
|
||||
}
|
||||
.frame:nth-child(1) {
|
||||
top: 0; right: 0;
|
||||
&::before, &::after { top: 0; right: 0; }
|
||||
}
|
||||
.frame:nth-child(2) {
|
||||
bottom: 0; left: 0;
|
||||
&::before, &::after { bottom: 0; left: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 25px; left: 25px;
|
||||
width: calc(100% - 50px); height: calc(100% - 50px);
|
||||
background-size: 150%;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
.load-view__body__panel__icon_type_1 {
|
||||
left: 84px;
|
||||
.box {
|
||||
&::after { border-color: $theme-pink; }
|
||||
.frame {
|
||||
&::before,
|
||||
&::after { background-color: $theme-pink; }
|
||||
}
|
||||
}
|
||||
.icon { background-image: url(../images/load-view/wait/1.png); }
|
||||
}
|
||||
.load-view__body__panel__icon_type_2 {
|
||||
left: 288px;
|
||||
.box {
|
||||
&::after { border-color: $theme-light-purple; }
|
||||
.frame {
|
||||
&::before,
|
||||
&::after { background-color: $theme-light-purple; }
|
||||
}
|
||||
}
|
||||
.icon { background-image: url(../images/load-view/wait/2.png); }
|
||||
}
|
||||
.load-view__body__panel__icon_type_3 {
|
||||
right: 288px;
|
||||
.box {
|
||||
&::after { border-color: $theme-light-pink; }
|
||||
.frame {
|
||||
&::before,
|
||||
&::after { background-color: $theme-light-pink; }
|
||||
}
|
||||
}
|
||||
.icon { background-image: url(../images/load-view/wait/3.png); }
|
||||
}
|
||||
.load-view__body__panel__icon_type_4 {
|
||||
right: 84px;
|
||||
.box {
|
||||
&::after { border-color: $theme-purple; }
|
||||
.frame {
|
||||
&::before,
|
||||
&::after { background-color: $theme-purple; }
|
||||
}
|
||||
}
|
||||
.icon { background-image: url(../images/load-view/wait/4.png); }
|
||||
}
|
||||
|
||||
/*** poster ***/
|
||||
.load-view__body__poster {
|
||||
position: absolute;
|
||||
top: 0; left: calc(50% - 450px);
|
||||
width: 900px; height: 100%;
|
||||
|
||||
.paint-ball-box {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.paint-ball {
|
||||
position: absolute;
|
||||
top: calc(50% - 30px); left: -60px;
|
||||
width: 60px; height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: 5px; left: 5px;
|
||||
width: calc(100% - 10px); height: calc(100% - 10px);
|
||||
border-radius: 50%;
|
||||
border: dashed 2px $theme-pink;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ""; display: block;
|
||||
width: calc(100% - 40px); height: 2px;
|
||||
top: calc(50% - 1px); left: 20px;
|
||||
background-color: $theme-pink;
|
||||
}
|
||||
&::before { transform: rotate(45deg); }
|
||||
&::after { transform: rotate(-45deg); }
|
||||
}
|
||||
|
||||
.poster {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 225px; height: 100%;
|
||||
transform: translateY(calc(-100% + -200px));
|
||||
perspective: 500px;
|
||||
|
||||
.illust {
|
||||
position: absolute;
|
||||
top: calc(50% - 325px); left: 0;
|
||||
width: 225px; height: 650px;
|
||||
transform-origin: center bottom;
|
||||
opacity: 0;
|
||||
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.ball {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
transform: translateY(calc(-50% + -25px));
|
||||
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
top: calc(50% - 25px); left: calc(50% - 25px);
|
||||
width: 50px; height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ""; display: block; position: absolute;
|
||||
left: -67.5px; bottom: -200px;
|
||||
width: 0; height: 0;
|
||||
border-top: solid 200px transparent;
|
||||
border-right: solid 180px transparent;
|
||||
border-left: solid 180px transparent;
|
||||
}
|
||||
}
|
||||
.poster:nth-child(1) {
|
||||
background-color: $theme-pink;
|
||||
&::after { border-top-color: $theme-pink; }
|
||||
.illust:after { background-image: url(../images/load-view/poster/1.png); }
|
||||
}
|
||||
.poster:nth-child(2) {
|
||||
background-color: $theme-light-purple;
|
||||
&::after { border-top-color: $theme-light-purple; }
|
||||
.illust:after { background-image: url(../images/load-view/poster/2.png); }
|
||||
}
|
||||
.poster:nth-child(3) {
|
||||
background-color: $theme-light-pink;
|
||||
&::after { border-top-color: $theme-light-pink; }
|
||||
.illust:after { background-image: url(../images/load-view/poster/3.png); }
|
||||
}
|
||||
.poster:nth-child(4) {
|
||||
background-color: $theme-purple;
|
||||
&::after { border-top-color: $theme-purple; }
|
||||
.illust:after { background-image: url(../images/load-view/poster/4.png); }
|
||||
}
|
||||
|
||||
.illust {
|
||||
position: absolute;
|
||||
top: calc(50% - 650px); left: 0;
|
||||
width: 225px; height: 650px;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&::after { content: ""; display: block; clear: both; }
|
||||
}
|
||||
|
||||
.load-view__body__info {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
.allow {
|
||||
position: relative;
|
||||
width: 100%; height: 25%;
|
||||
transform: translateX(-100%);
|
||||
|
||||
.sd {
|
||||
position: absolute;
|
||||
top: 20px; height: calc(100% - 40px);
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
.sd-1 { left: 10%; }
|
||||
.sd-2 { right: 10%; }
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
height: calc(100% - 60px);
|
||||
display: block;
|
||||
opacity: 0;
|
||||
}
|
||||
.text-1 { right: 10%; }
|
||||
.text-2 { left: 10%; }
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
top: 20px; left: 0;
|
||||
width: 100%; height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
transform: translate(calc(100% - 15px), calc(100% - 5px));
|
||||
width: calc(100% + 30px); height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.paint-ball {
|
||||
position: absolute;
|
||||
bottom: 20px; left: -60px;
|
||||
width: 60px; height: 60px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: 5px; left: 5px;
|
||||
width: calc(100% - 10px); height: calc(100% - 10px);
|
||||
border-radius: 50%;
|
||||
border: dashed 2px $theme-pink;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute;
|
||||
left: 20px; top: calc(50% - 1px);
|
||||
width: calc(100% - 40px); height: 2px;
|
||||
background-color: $theme-pink;
|
||||
}
|
||||
&::before { transform: rotate(45deg); }
|
||||
&::after { transform: rotate(-45deg); }
|
||||
}
|
||||
}
|
||||
.allow:nth-child(1) {
|
||||
background-color: $theme-pink;
|
||||
}
|
||||
.allow:nth-child(2) {
|
||||
background-color: $theme-light-purple;
|
||||
}
|
||||
.allow:nth-child(3) {
|
||||
background-color: $theme-light-pink;
|
||||
}
|
||||
.allow:nth-child(4) {
|
||||
background-color: $theme-purple;
|
||||
}
|
||||
}
|
||||
|
||||
.load-view__body__close {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
|
||||
.curtain {
|
||||
width: 100%; height: 50%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
width: 100%; height: 100%;
|
||||
background-color: $theme-pink;
|
||||
}
|
||||
}
|
||||
.curtain:nth-child(1) { transform: translateY(-100%); }
|
||||
.curtain:nth-child(2) { transform: translateY(100%); }
|
||||
|
||||
.message {
|
||||
position: absolute;
|
||||
top: calc(50% - 20px); left: 0;
|
||||
width: 100%; height: 40px;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: ""; display: block;
|
||||
position: absolute; left: 0;
|
||||
width: 100%; height: 50%;
|
||||
background-color: $theme-light-pink;
|
||||
z-index: 1;
|
||||
}
|
||||
&::before { top: 0; transform: translateY(-100%); }
|
||||
&::after { bottom: 0; transform: translateY(100%); }
|
||||
}
|
||||
|
||||
/********************************************************************************************
|
||||
* animation
|
||||
********************************************************************************************/
|
||||
/*** panel ***/
|
||||
.load-view__body__panel__icon { .box { animation: rotate360 3s linear 0s infinite; } }
|
||||
.load-view__body__panel__icon_type_1 {
|
||||
animation:
|
||||
fadein 0.8s ease 0s forwards,
|
||||
load-view__show-wait-icon 0.8s ease 0s forwards;
|
||||
.icon { animation: load-view__scale-wait-icon 1s ease 0s forwards; }
|
||||
}
|
||||
.load-view__body__panel__icon_type_2 {
|
||||
animation:
|
||||
fadein 0.8s ease 0.3s forwards,
|
||||
load-view__show-wait-icon 0.8s ease 0.3s forwards;
|
||||
.icon { animation: load-view__scale-wait-icon 1s ease 0.3s forwards; }
|
||||
}
|
||||
.load-view__body__panel__icon_type_3 {
|
||||
animation:
|
||||
fadein 0.8s ease 0.6s forwards,
|
||||
load-view__show-wait-icon 0.8s ease 0.6s forwards;
|
||||
.icon { animation: load-view__scale-wait-icon 1s ease 0.6s forwards; }
|
||||
}
|
||||
.load-view__body__panel__icon_type_4 {
|
||||
animation:
|
||||
fadein 0.8s ease 0.9s forwards,
|
||||
load-view__show-wait-icon 0.8s ease 0.9s forwards;
|
||||
.icon { animation: load-view__scale-wait-icon 1s ease 0.9s forwards; }
|
||||
}
|
||||
|
||||
.load-view[data-state="start"] {
|
||||
/*** close ***/
|
||||
.load-view__body__close {
|
||||
.curtain:nth-child(1) {
|
||||
animation: load-view__show-curtain-1 0.5s ease 6s forwards;
|
||||
&::after { animation: load-view__show-curtain-inner-1 1.5s ease 6.2s forwards; }
|
||||
}
|
||||
.curtain:nth-child(2) {
|
||||
animation: load-view__show-curtain-2 0.5s ease 6s forwards;
|
||||
&::after { animation: load-view__show-curtain-inner-2 1.5s ease 6.2s forwards; }
|
||||
}
|
||||
.message { animation: load-view__show-message 5s ease-out 6.7s forwards; }
|
||||
|
||||
&::before { animation: load-view__close-1 0.6s ease 7.2s forwards; }
|
||||
&::after { animation: load-view__close-2 0.6s ease 7.2s forwards; }
|
||||
}
|
||||
|
||||
/*** info ***/
|
||||
.load-view__body__info {
|
||||
.allow:nth-child(1) {
|
||||
animation: slide-right 0.4s ease 3.5s forwards;
|
||||
.sd {
|
||||
animation:
|
||||
fadein 0.1s ease 5.1s forwards,
|
||||
load-view__sway-sd 0.8s ease-in-out 5.1s alternate infinite;
|
||||
}
|
||||
.text {
|
||||
animation:
|
||||
fadein 0.1s ease 5.1s forwards,
|
||||
load-view__sway-illust 0.8s ease-in-out 5.1s alternate infinite;
|
||||
}
|
||||
.line::after {
|
||||
animation:
|
||||
load-view__show-line-1 0.7s ease 4s forwards,
|
||||
load-view__hidden-line-1 0.8s ease 4.7s forwards;
|
||||
}
|
||||
.paint-ball { animation: load-view__move-paint-ball-2 0.7s ease 4s forwards; }
|
||||
}
|
||||
.allow:nth-child(2) {
|
||||
animation: slide-right 0.4s ease 3.6s forwards;
|
||||
.text {
|
||||
animation:
|
||||
fadein 0.1s ease 5.2s forwards,
|
||||
load-view__sway-illust 0.8s ease-in-out 5.2s alternate infinite;
|
||||
}
|
||||
.sd {
|
||||
animation:
|
||||
fadein 0.1s ease 5.2s forwards,
|
||||
load-view__sway-sd 0.8s ease-in-out 5.2s alternate infinite;
|
||||
}
|
||||
.line::after {
|
||||
animation:
|
||||
load-view__show-line-2 0.7s ease 4.1s forwards,
|
||||
load-view__hidden-line-2 0.8s ease 4.8s forwards;
|
||||
}
|
||||
.paint-ball { animation: load-view__move-paint-ball-1 0.7s ease 4.1s forwards; }
|
||||
}
|
||||
.allow:nth-child(3) {
|
||||
animation: slide-right 0.4s ease 3.7s forwards;
|
||||
.text {
|
||||
animation:
|
||||
fadein 0.1s ease 5.3s forwards,
|
||||
load-view__sway-illust 0.8s ease-in-out 5.3s alternate infinite;
|
||||
}
|
||||
.sd {
|
||||
animation:
|
||||
fadein 0.1s ease 5.3s forwards,
|
||||
load-view__sway-sd 0.8s ease-in-out 5.3s alternate infinite;
|
||||
}
|
||||
.line::after {
|
||||
animation:
|
||||
load-view__show-line-1 0.7s ease 4.2s forwards,
|
||||
load-view__hidden-line-1 0.8s ease 4.9s forwards;
|
||||
}
|
||||
.paint-ball { animation: load-view__move-paint-ball-2 0.7s ease 4.2s forwards; }
|
||||
}
|
||||
.allow:nth-child(4) {
|
||||
animation: slide-right 0.4s ease 3.8s forwards;
|
||||
.text {
|
||||
animation:
|
||||
fadein 0.1s ease 5.4s forwards,
|
||||
load-view__sway-illust 0.8s ease-in-out 5.4s alternate infinite;
|
||||
}
|
||||
.sd {
|
||||
animation:
|
||||
fadein 0.1s ease 5.4s forwards,
|
||||
load-view__sway-sd 0.8s ease-in-out 5.4s alternate infinite;
|
||||
}
|
||||
.line::after {
|
||||
animation:
|
||||
load-view__show-line-2 0.7s ease 4.3s forwards,
|
||||
load-view__hidden-line-2 0.8s ease 5s forwards;
|
||||
}
|
||||
.paint-ball { animation: load-view__move-paint-ball-1 0.7s ease 4.3s forwards; }
|
||||
}
|
||||
}
|
||||
|
||||
/*** poster ***/
|
||||
.load-view__body__poster {
|
||||
.paint-ball { animation: load-view__move-paint-ball 1s ease 2.6s forwards; }
|
||||
|
||||
.poster:nth-child(1) {
|
||||
animation: load-view__show-poster 0.5s ease 0s forwards;
|
||||
.ball {
|
||||
animation: load-view__fall-ball 0.6s ease 0.6s forwards;
|
||||
&::after { animation: load-view__scale-ball 0.7s ease 1.2s forwards; }
|
||||
}
|
||||
.illust {
|
||||
animation:
|
||||
fadein 0.1s ease 1.45s forwards,
|
||||
load-view__rotate-illust 0.7s ease 2.6s forwards,
|
||||
fadeout 0.35s ease 2.95s forwards;
|
||||
&::after { animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
|
||||
}
|
||||
}
|
||||
.poster:nth-child(2) {
|
||||
animation: load-view__show-poster 0.5s ease 0.2s forwards;
|
||||
.ball {
|
||||
animation: load-view__fall-ball 0.6s ease 0.8s forwards;
|
||||
&::after { animation: load-view__scale-ball 0.7s ease 1.4s forwards; }
|
||||
}
|
||||
.illust {
|
||||
animation:
|
||||
fadein 0.1s ease 1.65s forwards,
|
||||
load-view__rotate-illust 0.7s ease 2.8s forwards,
|
||||
fadeout 0.35s ease 3.15s forwards;
|
||||
&::after { animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
|
||||
}
|
||||
}
|
||||
.poster:nth-child(3) {
|
||||
animation: load-view__show-poster 0.5s ease 0.4s forwards;
|
||||
.ball {
|
||||
animation: load-view__fall-ball 0.6s ease 1s forwards;
|
||||
&::after { animation: load-view__scale-ball 0.7s ease 1.6s forwards; }
|
||||
}
|
||||
.illust {
|
||||
animation:
|
||||
fadein 0.1s ease 1.85s forwards,
|
||||
load-view__rotate-illust 0.7s ease 3s forwards,
|
||||
fadeout 0.35s ease 3.35s forwards;
|
||||
&::after { animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
|
||||
}
|
||||
}
|
||||
.poster:nth-child(4) {
|
||||
animation: load-view__show-poster 0.5s ease 0.6s forwards;
|
||||
.ball {
|
||||
animation: load-view__fall-ball 0.6s ease 1.2s forwards;
|
||||
&::after { animation: load-view__scale-ball 0.7s ease 1.8s forwards; }
|
||||
}
|
||||
.illust {
|
||||
animation:
|
||||
fadein 0.1s ease 2.1s forwards,
|
||||
load-view__rotate-illust 0.7s ease 3.2s forwards,
|
||||
fadeout 0.35s ease 3.55s forwards;
|
||||
&::after { animation: load-view__sway-illust 0.8s ease-in-out 1.2s alternate infinite; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
src/scss/modules/pc/_root.scss
Normal file
3
src/scss/modules/pc/_root.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@include pc-layout {
|
||||
#root {}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user