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/src/scss/keyframes/pc/_load-view.scss b/src/scss/keyframes/pc/_load-view.scss index 40648b0..bce1f2b 100644 --- a/src/scss/keyframes/pc/_load-view.scss +++ b/src/scss/keyframes/pc/_load-view.scss @@ -6,3 +6,42 @@ 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); } +} diff --git a/src/scss/modules/pc/_load-view.scss b/src/scss/modules/pc/_load-view.scss index 2b7c201..d32d104 100644 --- a/src/scss/modules/pc/_load-view.scss +++ b/src/scss/modules/pc/_load-view.scss @@ -5,6 +5,7 @@ width: 100%; height: 100%; min-width: $min-width; min-height: $min-height; background-color: $theme-pink; + overflow: hidden; } /** @@ -191,7 +192,129 @@ .icon { background-image: url(../images/load-view/wait/4.png); } } - /* animation *********************************************************************************/ + /*** poster ***/ + .load-view__body__poster { + position: absolute; + top: 0; left: calc(50% - 450px); + width: 900px; 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; } + } + + /******************************************************************************************** + * animation + ********************************************************************************************/ + /*** panel ***/ .load-view__body__panel__icon { .box { animation: rotate360 3s linear 0s infinite; } } .load-view__body__panel__icon_type_1 { animation: @@ -217,4 +340,68 @@ 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"] { + /*** 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; } + } + } + } + } }