diff --git a/public/images/load-view/poster/1.png b/public/images/load-view/poster/1.png new file mode 100644 index 0000000..215d4b8 Binary files /dev/null and b/public/images/load-view/poster/1.png differ diff --git a/public/images/load-view/poster/2.png b/public/images/load-view/poster/2.png new file mode 100644 index 0000000..972b5a7 Binary files /dev/null and b/public/images/load-view/poster/2.png differ diff --git a/public/images/load-view/poster/3.png b/public/images/load-view/poster/3.png new file mode 100644 index 0000000..9e5526e Binary files /dev/null and b/public/images/load-view/poster/3.png differ diff --git a/public/images/load-view/poster/4.png b/public/images/load-view/poster/4.png new file mode 100644 index 0000000..37be928 Binary files /dev/null and b/public/images/load-view/poster/4.png differ diff --git a/public/images/load-view/sd/1.png b/public/images/load-view/sd/1.png new file mode 100644 index 0000000..45ce4ad Binary files /dev/null and b/public/images/load-view/sd/1.png differ diff --git a/public/images/load-view/sd/2.png b/public/images/load-view/sd/2.png new file mode 100644 index 0000000..38cb1be Binary files /dev/null and b/public/images/load-view/sd/2.png differ diff --git a/public/images/load-view/sd/3.png b/public/images/load-view/sd/3.png new file mode 100644 index 0000000..42974eb Binary files /dev/null and b/public/images/load-view/sd/3.png differ diff --git a/public/images/load-view/sd/4.png b/public/images/load-view/sd/4.png new file mode 100644 index 0000000..5bc3550 Binary files /dev/null and b/public/images/load-view/sd/4.png differ diff --git a/public/images/load-view/text/1.png b/public/images/load-view/text/1.png new file mode 100644 index 0000000..cb165a1 Binary files /dev/null and b/public/images/load-view/text/1.png differ diff --git a/public/images/load-view/text/2.png b/public/images/load-view/text/2.png new file mode 100644 index 0000000..0d1190a Binary files /dev/null and b/public/images/load-view/text/2.png differ diff --git a/public/images/load-view/text/3.png b/public/images/load-view/text/3.png new file mode 100644 index 0000000..ce53547 Binary files /dev/null and b/public/images/load-view/text/3.png differ diff --git a/public/images/load-view/text/4.png b/public/images/load-view/text/4.png new file mode 100644 index 0000000..171d249 Binary files /dev/null and b/public/images/load-view/text/4.png differ diff --git a/public/images/load-view/wait/1.png b/public/images/load-view/wait/1.png new file mode 100644 index 0000000..1513f04 Binary files /dev/null and b/public/images/load-view/wait/1.png differ diff --git a/public/images/load-view/wait/2.png b/public/images/load-view/wait/2.png new file mode 100644 index 0000000..2e37696 Binary files /dev/null and b/public/images/load-view/wait/2.png differ diff --git a/public/images/load-view/wait/3.png b/public/images/load-view/wait/3.png new file mode 100644 index 0000000..a758f3d Binary files /dev/null and b/public/images/load-view/wait/3.png differ diff --git a/public/images/load-view/wait/4.png b/public/images/load-view/wait/4.png new file mode 100644 index 0000000..69e254b Binary files /dev/null and b/public/images/load-view/wait/4.png differ diff --git a/public/index.html b/public/index.html index b5fee22..c50396b 100644 --- a/public/index.html +++ b/public/index.html @@ -37,7 +37,104 @@ - +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SDキャラ + テキスト +
+
+
+
+ SDキャラ + テキスト +
+
+
+
+ SDキャラ + テキスト +
+
+
+
+ SDキャラ + テキスト +
+
+
+
+
+
+
+

Let's enjoy CSS Animation.

+
+
+
+
diff --git a/src/scripts/app.js b/src/scripts/app.js index 8d3b0d4..156906a 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -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') diff --git a/src/scripts/config/preload.js b/src/scripts/config/preload.js new file mode 100644 index 0000000..d0dcc19 --- /dev/null +++ b/src/scripts/config/preload.js @@ -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', +] diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js new file mode 100644 index 0000000..c93611b --- /dev/null +++ b/src/scripts/lib/util.js @@ -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) + } + }) +} diff --git a/src/scss/keyframes/_common.scss b/src/scss/keyframes/_common.scss new file mode 100644 index 0000000..f171001 --- /dev/null +++ b/src/scss/keyframes/_common.scss @@ -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%); } +} diff --git a/src/scss/keyframes/pc/_load-view.scss b/src/scss/keyframes/pc/_load-view.scss new file mode 100644 index 0000000..15c8ecb --- /dev/null +++ b/src/scss/keyframes/pc/_load-view.scss @@ -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%); } +} diff --git a/src/scss/modules/_common.scss b/src/scss/modules/_common.scss deleted file mode 100644 index 3242286..0000000 --- a/src/scss/modules/_common.scss +++ /dev/null @@ -1,8 +0,0 @@ -@keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } -} -@keyframes fadeout { - from { opacity: 1; } - to { opacity: 0; } -} diff --git a/src/scss/modules/pc/_load-view.scss b/src/scss/modules/pc/_load-view.scss new file mode 100644 index 0000000..dde16df --- /dev/null +++ b/src/scss/modules/pc/_load-view.scss @@ -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; } + } + } + } + } +} diff --git a/src/scss/modules/pc/_root.scss b/src/scss/modules/pc/_root.scss new file mode 100644 index 0000000..07fdbbd --- /dev/null +++ b/src/scss/modules/pc/_root.scss @@ -0,0 +1,3 @@ +@include pc-layout { + #root {} +}