😈突然の全消し😈
This commit is contained in:
yuki540
parent
c0954eaa8b
commit
6dc431601c
6
.gitignore
vendored
6
.gitignore
vendored
@ -1,6 +0,0 @@
|
||||
node_modules/
|
||||
.DS_Store
|
||||
|
||||
public/stylesheets/style.css
|
||||
public/scripts/*.js
|
||||
public/scripts/*.js.map
|
||||
@ -1,8 +0,0 @@
|
||||
# DropOut
|
||||
※ 現在この作品は、制作途中です。完成までもうしばらくお待ちください。
|
||||
|
||||
yuki540.com version6.0.0のテーマは、「DropOut」です。
|
||||
|
||||
僕の推しキャラ（2018/02/18時点）であるガヴリールをイメージしたデザインに仕上げています。
|
||||
|
||||
|
||||
8182
package-lock.json
generated
8182
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@ -1,38 +0,0 @@
|
||||
{
|
||||
"name": "DropOut",
|
||||
"version": "6.0.0",
|
||||
"description": "yuki540.com v6 「DropOut」",
|
||||
"main": "webpack.config.babel.js",
|
||||
"scripts": {
|
||||
"build": "npx webpack --progress --colors",
|
||||
"watch": "npx webpack --watch --progress --colors",
|
||||
"start": "ruby -run -e httpd public 8080"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/yuki540net/DropOut.git"
|
||||
},
|
||||
"keywords": [
|
||||
"yuki540",
|
||||
"yuki540.com"
|
||||
],
|
||||
"author": "yuki540",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/yuki540net/DropOut/issues"
|
||||
},
|
||||
"homepage": "https://github.com/yuki540net/DropOut#readme",
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"css-loader": "^0.28.9",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"node-sass": "^4.7.2",
|
||||
"node-sass-glob-importer": "^5.1.0",
|
||||
"sass-loader": "^6.0.6",
|
||||
"style-loader": "^0.20.2",
|
||||
"webpack": "^3.11.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 321 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 285 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 237 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB |
@ -1,117 +0,0 @@
|
||||
<!--
|
||||
|
||||
################################################################
|
||||
|
||||
「ハロー、ミライアカリだよっ！ﾋﾟﾛﾘﾝ」
|
||||
「デベロッパーツール開くなんて、悪い子ちゃん❤️」
|
||||
|
||||
################################################################
|
||||
|
||||
Designed by yuki540.
|
||||
|
||||
-->
|
||||
<!doctype html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="「今日も明日も、ぐーたら生活。」">
|
||||
<meta name="keywords" content="yuki540,satella.io,yuki540.com,DropOut">
|
||||
<title>DropOut</title>
|
||||
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">
|
||||
<meta property="og:url" content="https://yuki540.com">
|
||||
<meta property="og:image" content="https://yuki540.com/images/ogp.png">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="DropOut">
|
||||
<meta property="og:site_name" content="yuki540.com">
|
||||
<meta property="og:description" content="「今日も明日も、ぐーたら生活。」">
|
||||
<meta property="og:locale" content="ja_JP">
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@eriri_jp" />
|
||||
<meta name="twitter:title" content="DropOut" />
|
||||
<meta name="twitter:description" content="「今日も明日も、ぐーたら生活。」" />
|
||||
<meta name="twitter:image" content="https://yuki540.com/images/ogp.png" />
|
||||
<link rel="shortcut icon" href="https://yuki540.com/images/profile/yuki540.png" />
|
||||
<link rel="apple-touch-icon" href="https://yuki540.com/images/profile/yuki540.png" />
|
||||
<link rel="stylesheet" href="./stylesheets/font-awesome-4.7.0/css/font-awesome.min.css" />
|
||||
<link rel="stylesheet" href="./stylesheets/font.css" />
|
||||
<link rel="stylesheet" href="./stylesheets/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,17 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Boku';
|
||||
src: url('font/Boku.ttf') format('truetype');
|
||||
src: url('font/Boku.otf') format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Chibit';
|
||||
src: url('font/chibit.ttf') format('truetype');
|
||||
src: url('font/chibit.otf') format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nagomi';
|
||||
src: url('font/nagomi.ttf') format('truetype');
|
||||
src: url('font/nagomi.otf') format('opentype');
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
@ -1,33 +0,0 @@
|
||||
console.log('##############################################')
|
||||
console.log(' どーもーココロヤミです')
|
||||
console.log(' そんなにこのサイトの仕組みが知りたいの？')
|
||||
console.log(' ↓ ここにコードがあるから、Starつけてよね❤️')
|
||||
console.log(' https://github.com/yuki540net/DropOut')
|
||||
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)
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
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',
|
||||
]
|
||||
@ -1,88 +0,0 @@
|
||||
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,11 +0,0 @@
|
||||
@mixin pc-layout {
|
||||
@media (min-width: 481px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sp-layout {
|
||||
@media (max-width: 480px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
$min-width: 1100px;
|
||||
$min-height: 650px;
|
||||
|
||||
$theme-bg: #FCFCF3; // 背景色
|
||||
$theme-gray: #E4D6CE; // 灰色
|
||||
$theme-pink: #C2617E; // ピンク
|
||||
$theme-light-pink: #E5B8BD; // 薄ピンク
|
||||
$theme-purple: #4A3F55; // 紫
|
||||
$theme-light-purple: #817487; // 薄紫
|
||||
@ -1,8 +0,0 @@
|
||||
@keyframes fadein {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeout {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
@ -1,453 +0,0 @@
|
||||
/*** 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%; }
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Boku';
|
||||
color: #4c4c4c;
|
||||
}
|
||||
|
||||
img { vertical-align: bottom; }
|
||||
|
||||
a {
|
||||
color: rgb(0,150,255);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li { list-style: none; }
|
||||
|
||||
input, textarea {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
iframe { border: none; }
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,4 +0,0 @@
|
||||
@import 'variable', 'mixin', 'function';
|
||||
|
||||
@import 'modules/**/*.scss';
|
||||
@import 'keyframes/**/*.scss';
|
||||
@ -1,59 +0,0 @@
|
||||
import webpack from 'webpack'
|
||||
import ExtractTextPlugin from 'extract-text-webpack-plugin'
|
||||
import globImpoter from 'node-sass-glob-importer'
|
||||
|
||||
const js = {
|
||||
entry: `${ __dirname }/src/scripts/app.js`,
|
||||
output: {
|
||||
path: `${ __dirname }/public/scripts`,
|
||||
filename: 'app.min.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /(\.js|\.json)/,
|
||||
use: ['babel-loader']
|
||||
}
|
||||
]
|
||||
},
|
||||
devtool: 'source-map',
|
||||
plugins: [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
const css = {
|
||||
entry: `${ __dirname }/src/scss/style.scss`,
|
||||
output: {
|
||||
path: `${ __dirname }/public/stylesheets`,
|
||||
filename: 'style.css'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ExtractTextPlugin.extract([
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
url: false
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
importer: globImpoter()
|
||||
}
|
||||
}
|
||||
])
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin('style.css')
|
||||
]
|
||||
}
|
||||
|
||||
module.exports = [js, css]
|
||||
Loading…
Reference in New Issue
Block a user