Merge pull request #1 from yuki540net/feature/load-view
Feature/load view
This commit is contained in:
yuki540
GitHub
commit
c0954eaa8b
BIN
public/images/load-view/battle/1.png
Normal file
BIN
public/images/load-view/battle/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
public/images/load-view/battle/2.png
Normal file
BIN
public/images/load-view/battle/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
public/images/load-view/catchcopy/1.png
Normal file
BIN
public/images/load-view/catchcopy/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/images/load-view/catchcopy/2.png
Normal file
BIN
public/images/load-view/catchcopy/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/images/load-view/catchcopy/3.png
Normal file
BIN
public/images/load-view/catchcopy/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
public/images/load-view/charcters/char-1.png
Normal file
BIN
public/images/load-view/charcters/char-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/images/load-view/charcters/char-2.png
Normal file
BIN
public/images/load-view/charcters/char-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
public/images/load-view/charcters/char-3.png
Normal file
BIN
public/images/load-view/charcters/char-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/images/load-view/charcters/char-4.png
Normal file
BIN
public/images/load-view/charcters/char-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/images/load-view/charcters/char-5.png
Normal file
BIN
public/images/load-view/charcters/char-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/images/load-view/charcters/char-6.png
Normal file
BIN
public/images/load-view/charcters/char-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
public/images/load-view/charcters/char-7.png
Normal file
BIN
public/images/load-view/charcters/char-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
public/images/load-view/illust.png
Normal file
BIN
public/images/load-view/illust.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@ -37,7 +37,81 @@ Designed by yuki540.
|
|||||||
<link rel="stylesheet" href="./stylesheets/style.css" />
|
<link rel="stylesheet" href="./stylesheets/style.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main id="root"></main>
|
<main id="root">
|
||||||
|
<!-- ******************************** load view ************************************ -->
|
||||||
|
<section id="load-view">
|
||||||
|
<section class="frame">
|
||||||
|
<div class="direction">
|
||||||
|
<div class="left"><div></div><div></div><div></div></div>
|
||||||
|
<div class="bottom"><div></div><div></div><div></div></div>
|
||||||
|
<div class="right"><div></div><div></div><div></div></div>
|
||||||
|
<div class="top"><div></div><div></div><div></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="square"><div></div><div></div><div></div><div></div></div>
|
||||||
|
<div class="line"><div></div><div></div><div></div><div></div></div>
|
||||||
|
<div class="rect">
|
||||||
|
<div class="bar"><div></div><div></div><div></div><div></div></div>
|
||||||
|
<div class="effect"><div></div><div></div><div></div><div></div></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="display">
|
||||||
|
<div class="bg"><div></div><div></div></div>
|
||||||
|
<div class="blocks">
|
||||||
|
<div class="block"><div></div></div>
|
||||||
|
<div class="block"><div></div></div>
|
||||||
|
<div class="block"><div></div></div>
|
||||||
|
<div class="block"><div></div></div>
|
||||||
|
<div class="block"><div></div></div>
|
||||||
|
<div class="block"><div></div></div>
|
||||||
|
<div class="block"><div></div></div>
|
||||||
|
</div>
|
||||||
|
<div id="progress-bar"><div></div></div>
|
||||||
|
</section>
|
||||||
|
<section class="illust"></section>
|
||||||
|
<section class="paints"></section>
|
||||||
|
<section class="catchcopy">
|
||||||
|
<div class="text-box">
|
||||||
|
<section class="text-split">
|
||||||
|
<div class="text"></div>
|
||||||
|
<div class="figure"><div></div><div></div><div></div></div>
|
||||||
|
</section>
|
||||||
|
<section class="text-split">
|
||||||
|
<div class="text"></div>
|
||||||
|
<div class="figure"><div></div><div></div><div></div></div>
|
||||||
|
</section>
|
||||||
|
<section class="text-split">
|
||||||
|
<div class="text"></div>
|
||||||
|
<div class="figure">
|
||||||
|
<div></div><div></div><div></div>
|
||||||
|
<div></div><div></div><div></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<section class="arrows">
|
||||||
|
<div class="arrow"><div></div></div>
|
||||||
|
<div class="arrow"><div></div></div>
|
||||||
|
<div class="arrow"><div></div></div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
<section class="ribbons">
|
||||||
|
<div class="ribbon"><div></div><div></div><div></div><div></div></div>
|
||||||
|
<div class="ribbon"><div></div><div></div><div></div><div></div></div>
|
||||||
|
</section>
|
||||||
|
<section class="catchcopy-frame">
|
||||||
|
<div class="dotted-line"><div></div><div></div><div></div><div></div></div>
|
||||||
|
<div class="dive">
|
||||||
|
<div class="angel"></div>
|
||||||
|
<div class="collision-effect"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="battle-panel">
|
||||||
|
<div class="player"><div></div></div>
|
||||||
|
<div class="player"><div></div></div>
|
||||||
|
<div class="cross"></div>
|
||||||
|
</section>
|
||||||
|
<section class="end-load-view"><div></div><div></div></section>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
<script type="text/javascript" src="./scripts/app.min.js"></script>
|
<script type="text/javascript" src="./scripts/app.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4,3 +4,30 @@ console.log(' そんなにこのサイトの仕組みが知りたいの？')
|
|||||||
console.log(' ↓ ここにコードがあるから、Starつけてよね❤️')
|
console.log(' ↓ ここにコードがあるから、Starつけてよね❤️')
|
||||||
console.log(' https://github.com/yuki540net/DropOut')
|
console.log(' https://github.com/yuki540net/DropOut')
|
||||||
console.log('##############################################')
|
console.log('##############################################')
|
||||||
|
|
||||||
|
import * as util from './lib/util'
|
||||||
|
import preload_json from './config/preload'
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
testPreload(() => {
|
||||||
|
util.finisheLoadView()
|
||||||
|
}, (per) => {
|
||||||
|
util.updateCharPanel(per)
|
||||||
|
util.updateProgressBar(per)
|
||||||
|
})
|
||||||
|
}, 1200)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* プリロードのテスト
|
||||||
|
*/
|
||||||
|
function testPreload(fn, progress) {
|
||||||
|
let per = 0
|
||||||
|
let timer = setInterval(() => {
|
||||||
|
per += 0.04
|
||||||
|
progress(per)
|
||||||
|
if(per >= 1) {
|
||||||
|
clearInterval(timer)
|
||||||
|
fn()
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|||||||
9
src/scripts/config/preload.js
Normal file
9
src/scripts/config/preload.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export default [
|
||||||
|
'./images/load-view/charcters/char-1.png',
|
||||||
|
'./images/load-view/charcters/char-2.png',
|
||||||
|
'./images/load-view/charcters/char-3.png',
|
||||||
|
'./images/load-view/charcters/char-4.png',
|
||||||
|
'./images/load-view/charcters/char-5.png',
|
||||||
|
'./images/load-view/charcters/char-6.png',
|
||||||
|
'./images/load-view/charcters/char-7.png',
|
||||||
|
]
|
||||||
88
src/scripts/lib/util.js
Normal file
88
src/scripts/lib/util.js
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
const load_view = document.getElementById('load-view')
|
||||||
|
const char_panel = document.querySelectorAll('.blocks .block')
|
||||||
|
const progress_bar = document.getElementById('progress-bar')
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 画像のプリロード
|
||||||
|
* @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 selector : セレクタ名
|
||||||
|
* @param time : 時間
|
||||||
|
*/
|
||||||
|
export const hiddenTimeout = (selector, time) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector(selector).style.display = 'none'
|
||||||
|
}, time)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* キャラクターパネルの更新
|
||||||
|
* @param per : 割合
|
||||||
|
*/
|
||||||
|
export const updateCharPanel = (per) => {
|
||||||
|
if(per >= 0.14) char_panel[0].setAttribute('data-state', 'true')
|
||||||
|
if(per >= 0.28) char_panel[1].setAttribute('data-state', 'true')
|
||||||
|
if(per >= 0.42) char_panel[2].setAttribute('data-state', 'true')
|
||||||
|
if(per >= 0.57) char_panel[3].setAttribute('data-state', 'true')
|
||||||
|
if(per >= 0.71) char_panel[4].setAttribute('data-state', 'true')
|
||||||
|
if(per >= 0.85) char_panel[5].setAttribute('data-state', 'true')
|
||||||
|
if(per >= 1.00) char_panel[6].setAttribute('data-state', 'true')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* プログレスバーの更新
|
||||||
|
* @param per : 割合
|
||||||
|
*/
|
||||||
|
export const updateProgressBar = (per) => {
|
||||||
|
progress_bar.children[0].style.width = `${ per * 100 }%`
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* モーションパート
|
||||||
|
*/
|
||||||
|
export const finisheLoadView = () => {
|
||||||
|
load_view.setAttribute('data-state', 'fin')
|
||||||
|
}
|
||||||
@ -1,2 +1,9 @@
|
|||||||
$min-width: 1100px;
|
$min-width: 1100px;
|
||||||
$min-height: 650px;
|
$min-height: 650px;
|
||||||
|
|
||||||
|
$theme-bg: #FCFCF3; // 背景色
|
||||||
|
$theme-gray: #E4D6CE; // 灰色
|
||||||
|
$theme-pink: #C2617E; // ピンク
|
||||||
|
$theme-light-pink: #E5B8BD; // 薄ピンク
|
||||||
|
$theme-purple: #4A3F55; // 紫
|
||||||
|
$theme-light-purple: #817487; // 薄紫
|
||||||
|
|||||||
8
src/scss/keyframes/common.scss
Normal file
8
src/scss/keyframes/common.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
@keyframes fadein {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes fadeout {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
453
src/scss/keyframes/pc/load-view.scss
Normal file
453
src/scss/keyframes/pc/load-view.scss
Normal file
@ -0,0 +1,453 @@
|
|||||||
|
/*** dire-left ***/
|
||||||
|
@keyframes load-view__dire-left-1 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
5% { opacity: 0.1; }
|
||||||
|
15% { opacity: 1; }
|
||||||
|
25% { opacity: 1; }
|
||||||
|
35% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-left-2 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
15% { opacity: 0.1; }
|
||||||
|
25% { opacity: 1; }
|
||||||
|
35% { opacity: 1; }
|
||||||
|
45% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-left-3 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
25% { opacity: 0.1; }
|
||||||
|
35% { opacity: 1; }
|
||||||
|
45% { opacity: 1; }
|
||||||
|
55% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** dire-bottom ***/
|
||||||
|
@keyframes load-view__dire-bottom-1 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
25% { opacity: 0.1; }
|
||||||
|
35% { opacity: 1; }
|
||||||
|
45% { opacity: 1; }
|
||||||
|
55% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-bottom-2 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
35% { opacity: 0.1; }
|
||||||
|
45% { opacity: 1; }
|
||||||
|
55% { opacity: 1; }
|
||||||
|
65% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-bottom-3 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
45% { opacity: 0.1; }
|
||||||
|
55% { opacity: 1; }
|
||||||
|
65% { opacity: 1; }
|
||||||
|
75% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** dire-right ***/
|
||||||
|
@keyframes load-view__dire-right-1 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
45% { opacity: 0.1; }
|
||||||
|
55% { opacity: 1; }
|
||||||
|
65% { opacity: 1; }
|
||||||
|
75% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-right-2 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
55% { opacity: 0.1; }
|
||||||
|
65% { opacity: 1; }
|
||||||
|
75% { opacity: 1; }
|
||||||
|
85% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-right-3 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
65% { opacity: 0.1; }
|
||||||
|
75% { opacity: 1; }
|
||||||
|
85% { opacity: 1; }
|
||||||
|
95% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** dire-top ***/
|
||||||
|
@keyframes load-view__dire-top-1 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
60% { opacity: 0.1; }
|
||||||
|
70% { opacity: 1; }
|
||||||
|
80% { opacity: 1; }
|
||||||
|
90% { opacity: 0.1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-top-2 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
70% { opacity: 0.1; }
|
||||||
|
80% { opacity: 1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { opacity: 0.1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dire-top-3 {
|
||||||
|
0% { opacity: 0.1; }
|
||||||
|
80% { opacity: 0.1; }
|
||||||
|
90% { opacity: 1; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** rect-bar ***/
|
||||||
|
@keyframes load-view__rect-bar1 {
|
||||||
|
0% { transform: translateX(100%); }
|
||||||
|
40% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(-100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-bar2 {
|
||||||
|
0% { transform: translateY(-100%); }
|
||||||
|
20% { transform: translateY(-100%); }
|
||||||
|
60% { transform: translateY(100%); }
|
||||||
|
100% { transform: translateY(100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-bar3 {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
40% { transform: translateX(-100%); }
|
||||||
|
80% { transform: translateX(100%); }
|
||||||
|
100% { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-bar4 {
|
||||||
|
0% { transform: translateY(100%); }
|
||||||
|
60% { transform: translateY(100%); }
|
||||||
|
100% { transform: translateY(-100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** rect-effect ***/
|
||||||
|
@keyframes load-view__rect-effect1 {
|
||||||
|
0% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
20% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
32% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-effect2 {
|
||||||
|
0% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
40% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
52% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-effect3 {
|
||||||
|
0% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
60% { opacity: 0; transform: scale(0.5); border-width: 20px; }
|
||||||
|
72% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
100% { opacity: 1; transform: scale(1.8); border-width: 0px; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__rect-effect4 {
|
||||||
|
0% { transform: scale(1); }
|
||||||
|
20% { transform: scale(0); }
|
||||||
|
80% { transform: scale(0); }
|
||||||
|
100% { transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** block ***/
|
||||||
|
@keyframes load-view__block1 {
|
||||||
|
0% { transform: rotate(45deg) translateY(-100px); opacity: 0; }
|
||||||
|
100% { transform: rotate(45deg) translateY(0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__block2 {
|
||||||
|
0% { transform: rotate(45deg) translateY(100px); opacity: 0; }
|
||||||
|
100% { transform: rotate(45deg) translateY(0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** block-effect ***/
|
||||||
|
@keyframes load-view__block-effect {
|
||||||
|
0% { transform: scale(0.6); opacity: 0; border-width: 20px; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
100% { transform: scale(1.4); opacity: 0; border-width: 5px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** char ***/
|
||||||
|
@keyframes load-view__char1 {
|
||||||
|
0% { opacity: 0; transform: rotate(-35deg) scale(0.8); }
|
||||||
|
35% { transform: rotate(-55deg); }
|
||||||
|
70% { transform: rotate(-35deg); }
|
||||||
|
100% { opacity: 1; transform: rotate(-55deg) scale(1.0); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__char2 {
|
||||||
|
0% { opacity: 0; transform: translate(20px, 10px) rotate(-45deg); }
|
||||||
|
100% { opacity: 1; transform: translate(0px, 0px) rotate(-45deg); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__char3 {
|
||||||
|
0% { opacity: 0; transform: translateX(-20px) rotate(-45deg); }
|
||||||
|
100% { opacity: 1; transform: translateX(0px) rotate(-45deg); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__char4 {
|
||||||
|
0% { opacity: 0; transform: translate(-20px, -20px) rotate(-45deg); }
|
||||||
|
100% { opacity: 1; transform: translate(0, 0) rotate(-45deg); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__char5 {
|
||||||
|
0% { opacity: 0; transform: rotate(-45deg) scale(1); }
|
||||||
|
50% { transform: rotate(-45deg) scale(1.2); }
|
||||||
|
100% { opacity: 1; transform: rotate(-45deg) scale(1); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__char6 {
|
||||||
|
0% { opacity: 0; transform: translate(0px, 0px) rotate(-45deg); }
|
||||||
|
25% { transform: translate(-10px, -10px) rotate(-45deg); }
|
||||||
|
50% { transform: translate(0px, 0px) rotate(-45deg); }
|
||||||
|
75% { transform: translate(-10px, -10px) rotate(-45deg); }
|
||||||
|
100% { opacity: 1; transform: translate(0, 0) rotate(-45deg); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__char7 {
|
||||||
|
0% { opacity: 0; transform: scale(1.4) rotate(-45deg); }
|
||||||
|
25% { transform: scale(1.2) rotate(-45deg); }
|
||||||
|
50% { opacity: 1; transform: scale(1.4) rotate(-45deg); }
|
||||||
|
75% { opacity: 1; transform: scale(1.2) rotate(-45deg); }
|
||||||
|
100% { opacity: 1; transform: scale(1.4) rotate(-45deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** hidden-block ***/
|
||||||
|
@keyframes load-view__hidden-block {
|
||||||
|
0% { transform: scale(1) rotate(45deg); opacity: 1; }
|
||||||
|
35% { transform: scale(1.2) rotate(45deg); opacity: 1; }
|
||||||
|
100% { transform: scale(0.5) rotate(45deg); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** hidden-progress-bar ***/
|
||||||
|
@keyframes load-view__hidden-progress-bar {
|
||||||
|
0% { width: calc(100% - 200px); opacity: 1; }
|
||||||
|
80% { opacity: 1; }
|
||||||
|
100% { width: 0; opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** show-illust ***/
|
||||||
|
@keyframes load-view__show-illust {
|
||||||
|
0% { opacity: 0; transform: translateX(60px); }
|
||||||
|
100% { opacity: 1; transform: translateX(0%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** hidden-illust ***/
|
||||||
|
@keyframes load-view__hidden-illust {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
30% { opacity: 1; }
|
||||||
|
100% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** attack-illust ***/
|
||||||
|
@keyframes load-view__attack-illust {
|
||||||
|
0% { transform: translateY(0px); }
|
||||||
|
30% { transform: translateY(0px); }
|
||||||
|
70% { transform: translateY(-60px); }
|
||||||
|
100% { transform: translateY(0px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** attack-effect ***/
|
||||||
|
@keyframes load-view__attack-effect {
|
||||||
|
0% { opacity: 0; transform: scale(0.5); }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
100% { opacity: 0; transform: scale(2.4); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** fail-paint ***/
|
||||||
|
@keyframes load-view___fail-paint {
|
||||||
|
0% { top: -120px; left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; }
|
||||||
|
30% { top: calc(50% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; }
|
||||||
|
100% { top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** figure1 ***/
|
||||||
|
@keyframes load-view__figure1-1 {
|
||||||
|
0% { border-top-width: 0; opacity: 0; }
|
||||||
|
100% { border-top-width: 50px; opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__figure1-2 {
|
||||||
|
0% { height: 0; opacity: 0; }
|
||||||
|
100% { height: 50px; opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__figure1-3 {
|
||||||
|
0% { transform: translateY(-50px); opacity: 0; }
|
||||||
|
30% { transform: translateY(0px); opacity: 1; }
|
||||||
|
65% { transform: translateY(-15px); opacity: 1; }
|
||||||
|
100% { transform: translateY(0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** figure2 ***/
|
||||||
|
@keyframes load-view__figure2-1 {
|
||||||
|
0% { transform: translateY(-30px); opacity: 0; }
|
||||||
|
100% { transform: translateY(0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__figure2-2 {
|
||||||
|
0% { transform: translateY(-50px); opacity: 0; }
|
||||||
|
30% { transform: translateY(0px); opacity: 1; }
|
||||||
|
65% { transform: translateY(-15px); opacity: 1; }
|
||||||
|
100% { transform: translateY(0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__figure2-3 {
|
||||||
|
0% { transform: translateY(30px) rotate(90deg); opacity: 0; }
|
||||||
|
100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** figure3 ***/
|
||||||
|
@keyframes load-view__figure3-1 {
|
||||||
|
0% { transform: translateY(-50px); opacity: 0; }
|
||||||
|
30% { transform: translateY(0px); opacity: 1; }
|
||||||
|
65% { transform: translateY(-15px); opacity: 1; }
|
||||||
|
100% { transform: translateY(0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__figure3-2 {
|
||||||
|
0% { transform: translateY(30px) rotate(90deg); opacity: 0; }
|
||||||
|
100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__figure3-3 {
|
||||||
|
0% { transform: translateY(-30px); opacity: 0; }
|
||||||
|
100% { transform: translateY(0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__figure3-6 {
|
||||||
|
0% { border-top-width: 0; opacity: 0; }
|
||||||
|
100% { border-top-width: 50px; opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** catchcopy ***/
|
||||||
|
@keyframes load-view__catchcopy {
|
||||||
|
0% { opacity: 0; transform: scale(1.15); }
|
||||||
|
100% { opacity: 1; transform: scale(1.0); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__catchcopy-bg1 {
|
||||||
|
0% { background-color: $theme-light-pink; }
|
||||||
|
100% { background-color: $theme-bg; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__catchcopy-bg2 {
|
||||||
|
0% { background-color: $theme-bg; }
|
||||||
|
100% { background-color: #9994A6; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__catchcopy-bg3 {
|
||||||
|
0% { background-color: #9994A6; }
|
||||||
|
100% { background-color: $theme-gray; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** arrow ***/
|
||||||
|
@keyframes load-view__arrow {
|
||||||
|
0% { transform: translateX(calc(-100% - 3px)); }
|
||||||
|
100% { transform: translateX(0%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** ribbon ***/
|
||||||
|
@keyframes load-view__ribbon-1 {
|
||||||
|
0% { transform: translateY(-100%); }
|
||||||
|
100% { transform: translateY(0%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__ribbon-2 {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(0%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__ribbon-3 {
|
||||||
|
0% { transform: translateY(100%); }
|
||||||
|
100% { transform: translateY(0%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__ribbon-4 {
|
||||||
|
0% { transform: translateX(100%); }
|
||||||
|
100% { transform: translateX(0%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** dotted-line ***/
|
||||||
|
@keyframes load-view__dotted-line1 {
|
||||||
|
0% { transform: translateX(100%); }
|
||||||
|
40% { transform: translateX(-100%); }
|
||||||
|
100% { transform: translateX(-100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dotted-line2 {
|
||||||
|
0% { transform: translateY(-100%); }
|
||||||
|
20% { transform: translateY(-100%); }
|
||||||
|
60% { transform: translateY(100%); }
|
||||||
|
100% { transform: translateY(100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dotted-line3 {
|
||||||
|
0% { transform: translateX(-100%); }
|
||||||
|
40% { transform: translateX(-100%); }
|
||||||
|
80% { transform: translateX(100%); }
|
||||||
|
100% { transform: translateX(100%); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__dotted-line4 {
|
||||||
|
0% { transform: translateY(100%); }
|
||||||
|
60% { transform: translateY(100%); }
|
||||||
|
100% { transform: translateY(-100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** collision-effect ***/
|
||||||
|
@keyframes load-view__collision-effect2 {
|
||||||
|
0% { border-width: 5px; transform: scale(0.6); opacity: 0; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
100% { border-width: 0px; transform: scale(1); opacity: 0; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__collision-effect1 {
|
||||||
|
0% { border-width: 10px; transform: scale(0.6); opacity: 0; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
100% { border-width: 5px; transform: scale(1); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** angel ***/
|
||||||
|
@keyframes load-view__angel-move {
|
||||||
|
0% { transform: translateX(665px); }
|
||||||
|
100% { transform: translateX(550px); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__angel-fly {
|
||||||
|
0% { transform: translateY(-75px) rotateY(180deg); opacity: 0; }
|
||||||
|
25% { transform: translateY(-60px) rotateY(180deg); opacity: 1; }
|
||||||
|
50% { transform: translateY(-75px) rotateY(180deg); opacity: 1; }
|
||||||
|
75% { transform: translateY(-60px) rotateY(180deg); opacity: 1; }
|
||||||
|
100% { transform: translateY(-75px) rotateY(180deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__angel-dark {
|
||||||
|
0% { transform: translateY(-75px) scale(0); }
|
||||||
|
50% { transform: translateY(-75px) scale(1); }
|
||||||
|
100% { transform: translateY(-75px) scale(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** player ***/
|
||||||
|
@keyframes load-view__player-scale {
|
||||||
|
0% { transform: scale(1.4); }
|
||||||
|
30% { transform: scale(1.02); }
|
||||||
|
100% { transform: scale(1); }
|
||||||
|
}
|
||||||
|
@keyframes load-view__player1 {
|
||||||
|
0% { transform: translate(-100px, 70px); opacity: 0; }
|
||||||
|
30% { transform: translate(-5px, 2.5px); opacity: 1; }
|
||||||
|
100% { transform: translate(0px, 0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__player2 {
|
||||||
|
0% { transform: translate(100px, -70px); opacity: 0; }
|
||||||
|
30% { transform: translate(5px, -2.5px); opacity: 1; }
|
||||||
|
100% { transform: translate(0px, 0px); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** cross ***/
|
||||||
|
@keyframes load-view__cross1 {
|
||||||
|
0% { transform: rotate(0deg); opacity: 0; }
|
||||||
|
100% { transform: rotate(45deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes load-view__cross2 {
|
||||||
|
0% { transform: rotate(0deg); opacity: 0; }
|
||||||
|
100% { transform: rotate(-45deg); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** circle ***/
|
||||||
|
@keyframes load-view__circle {
|
||||||
|
0% { transform: scale(0) rotate(-5deg); }
|
||||||
|
100% { transform: scale(1) rotate(-5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*** end ***/
|
||||||
|
@keyframes load-view__end {
|
||||||
|
0% { left: 50%; width: 0; }
|
||||||
|
100% { left: 0%; width: 100%; }
|
||||||
|
}
|
||||||
1201
src/scss/modules/pc/load-view.scss
Normal file
1201
src/scss/modules/pc/load-view.scss
Normal file
File diff suppressed because it is too large
Load Diff
@ -35,7 +35,12 @@ const css = {
|
|||||||
{
|
{
|
||||||
test: /\.scss$/,
|
test: /\.scss$/,
|
||||||
use: ExtractTextPlugin.extract([
|
use: ExtractTextPlugin.extract([
|
||||||
{ loader: 'css-loader' },
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
url: false
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
loader: 'sass-loader',
|
loader: 'sass-loader',
|
||||||
options: {
|
options: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user