diff --git a/public/images/bg.png b/public/images/bg.png
new file mode 100644
index 0000000..cea1a1e
Binary files /dev/null and b/public/images/bg.png differ
diff --git a/public/images/end-animation/end-roll/1.png b/public/images/end-animation/end-roll/1.png
new file mode 100644
index 0000000..d559bff
Binary files /dev/null and b/public/images/end-animation/end-roll/1.png differ
diff --git a/public/images/end-animation/end-roll/2.png b/public/images/end-animation/end-roll/2.png
new file mode 100644
index 0000000..e51adea
Binary files /dev/null and b/public/images/end-animation/end-roll/2.png differ
diff --git a/public/images/end-animation/end-roll/3.png b/public/images/end-animation/end-roll/3.png
new file mode 100644
index 0000000..263991b
Binary files /dev/null and b/public/images/end-animation/end-roll/3.png differ
diff --git a/public/images/end-animation/end.png b/public/images/end-animation/end.png
new file mode 100644
index 0000000..8eebad7
Binary files /dev/null and b/public/images/end-animation/end.png differ
diff --git a/public/index.html b/public/index.html
index 1d58d25..b840ccf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -300,6 +300,38 @@
+
+
+
+
+
+
+
+
diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js
index 8f01662..07ea6ee 100644
--- a/src/scripts/lib/util.js
+++ b/src/scripts/lib/util.js
@@ -6,6 +6,8 @@ const gab_animation = document.querySelector('.gab-animation')
const gab_animation__end_block = document.querySelector('.gab-animation__close .end-block')
const calling = document.querySelector('.calling')
const calling__end = document.querySelector('.calling__end')
+const end_animation = document.querySelector('.end-animation')
+const end_animation__end = document.querySelector('.end-animation .window img')
/**
* 画像のプリロード
@@ -98,6 +100,18 @@ export const startCalling = () => {
calling__end.addEventListener('animationend', e => {
if(e.animationName === 'calling__end') {
root.removeChild(calling)
+ startEndAnimation()
}
})
}
+
+/**
+ * end-animationの開始
+ */
+export const startEndAnimation = () => {
+ end_animation.setAttribute('data-state', 'start')
+
+ end_animation__end.addEventListener('animationend', e => {
+ root.removeChild(end_animation)
+ })
+}
diff --git a/src/scss/keyframes/pc/_end-animation.scss b/src/scss/keyframes/pc/_end-animation.scss
new file mode 100644
index 0000000..afa750c
--- /dev/null
+++ b/src/scss/keyframes/pc/_end-animation.scss
@@ -0,0 +1,63 @@
+@keyframes end-animation__show-paint {
+ 0% { opacity: 0; transform: scale(8); border-radius: 50%; }
+ 40% { border-radius: 50%; }
+ 100% { opacity: 1; transform: scale(1); border-radius: 0%; }
+}
+
+@keyframes end-animation__end-roll-color-1 {
+ from { background-color: $theme-mint; }
+ to { background-color: $theme-pink; }
+}
+@keyframes end-animation__end-roll-color-2 {
+ from { background-color: $theme-pink; }
+ to { background-color: $theme-light-purple; }
+}
+@keyframes end-animation__end-roll-color-3 {
+ from { background-color: $theme-light-purple; }
+ to { background-color: $theme-purple; }
+}
+@keyframes end-animation__end-roll-color-4 {
+ from { background-color: $theme-purple; }
+ to { background-color: $theme-light-pink; }
+}
+
+@keyframes end-animation__move-text-ball-1 {
+ from { transform: translateX(800px) rotate(0deg); opacity: 0; }
+ to { transform: translateX(0px) rotate(-15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-1 {
+ 0% { transform: translateY(300px) scale(0); }
+ 50% { transform: translateY(-150px) scale(0.5); }
+ 100% { transform: translateY(0px) scale(1); }
+}
+@keyframes end-animation__move-text-ball-2 {
+ from { transform: translateY(800px) rotate(0deg); opacity: 0; }
+ to { transform: translateY(0px) rotate(15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-2 {
+ 0% { transform: translateX(-300px) scale(0); }
+ 50% { transform: translateX(150px) scale(0.5); }
+ 100% { transform: translateX(0px) scale(1); }
+}
+
+@keyframes end-animation__move-text-ball-3 {
+ from { transform: translateX(800px) rotate(0deg); opacity: 0; }
+ to { transform: translateX(0px) rotate(-15deg); opacity: 1; }
+}
+@keyframes end-animation__jump-text-ball-3 {
+ 0% { transform: translateY(-300px) scale(0); }
+ 50% { transform: translateY(150px) scale(0.5); }
+ 100% { transform: translateY(0px) scale(1); }
+}
+
+@keyframes end-animation__down-window {
+ 0% { transform: translateY(-100%); }
+ 60% { transform: translateY(0%); }
+ 80% { transform: translateY(-30px); }
+ 100% { transform: translateY(0%); }
+}
+@keyframes end-animation__end {
+ 0% { transform: rotateZ(-20deg) rotateX(0deg); opacity: 1; }
+ 50% { opacity: 1; }
+ 100% { transform: rotateZ(-20deg) rotateX(90deg); opacity: 0; }
+}
diff --git a/src/scss/modules/pc/_end-animation.scss b/src/scss/modules/pc/_end-animation.scss
new file mode 100644
index 0000000..5037e6d
--- /dev/null
+++ b/src/scss/modules/pc/_end-animation.scss
@@ -0,0 +1,194 @@
+@include pc-layout {
+ .end-animation {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ overflow: hidden;
+ z-index: 997;
+ }
+
+ /*** end-roll ***/
+ .end-animation__end-roll {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-color: $theme-mint;
+
+ .text-balls {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+
+ .text-ball {
+ position: absolute;
+ width: 180px; height: 180px;
+ border-radius: 50%;
+ opacity: 0;
+
+ .inner {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-color: #F0EFE7;
+ border-radius: 50%;
+ border: solid 10px #F0EFE7;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ .bg { width: 100%; height: 100%; }
+ .bg div {
+ width: 100%; height: 10%;
+ background-color: #EBC1C7;
+ margin-bottom: 10%;
+ transform: translateX(-100%);
+ }
+
+ &::after {
+ content: ""; display: block;
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-size: 60%;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0;
+ }
+ }
+ }
+ .text-ball:nth-child(1) {
+ top: 50px; left: 50px;
+ .inner:after { background-image: url(../images/end-animation/end-roll/1.png); }
+ }
+ .text-ball:nth-child(2) {
+ top: 50px; right: 50px;
+ .inner:after { background-image: url(../images/end-animation/end-roll/2.png); }
+ }
+ .text-ball:nth-child(3) {
+ bottom: 50px; left: 50px;
+ .inner:after { background-image: url(../images/end-animation/end-roll/3.png); }
+ }
+ }
+
+ .paints {
+ position: absolute;
+ top: calc(50% - 60px); left: calc(50% - 60px);
+ width: 120px; height: 120px;
+
+ div {
+ float: left;
+ width: calc(50% - 5px); height: calc(50% - 5px);
+ margin-right: 10px;
+ border-radius: 50%;
+ opacity: 0;
+ }
+ div:nth-child(1),
+ div:nth-child(2) { margin-bottom: 10px; }
+ div:nth-child(2n) { margin-right: 0; }
+ div:nth-child(1) { background-color: $theme-pink; }
+ div:nth-child(2) { background-color: $theme-light-purple; }
+ div:nth-child(3) { background-color: $theme-purple; }
+ div:nth-child(4) { background-color: $theme-light-pink; }
+ }
+
+ .window {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-color: $theme-bg;
+ transform: translateY(-100%);
+ perspective: 1500px;
+
+ img {
+ display: block;
+ height: 200px;
+ position: absolute;
+ bottom: 30px; right: 0px;
+ transform: rotateZ(-20deg);
+ }
+
+ &::before {
+ content: ""; display: block;
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-image: url(../images/bg.png);
+ background-size: 15px;
+ opacity: 0.6;
+ }
+ }
+ }
+
+ .end-animation[data-state="start"] {
+ /*** end-roll ***/
+ .end-animation__end-roll {
+ animation:
+ end-animation__end-roll-color-1 0.5s ease 1.2s forwards,
+ end-animation__end-roll-color-2 0.5s ease 2.1s forwards,
+ end-animation__end-roll-color-3 0.5s ease 3s forwards,
+ end-animation__end-roll-color-4 0.5s ease 3.9s forwards;
+
+ .text-balls {
+ .text-ball:nth-child(1) {
+ animation: end-animation__move-text-ball-1 0.4s ease 1.2s forwards;
+ .inner {
+ animation: end-animation__jump-text-ball-1 0.4s ease 1.2s forwards;
+ &::after { animation: fadein 0.5s ease 1.6s forwards; }
+ }
+ .bg div:nth-child(1) { animation: slide-right 0.3s ease 1.6s forwards; }
+ .bg div:nth-child(2) { animation: slide-right 0.3s ease 1.65s forwards; }
+ .bg div:nth-child(3) { animation: slide-right 0.3s ease 1.7s forwards; }
+ .bg div:nth-child(4) { animation: slide-right 0.3s ease 1.75s forwards; }
+ .bg div:nth-child(5) { animation: slide-right 0.3s ease 1.8s forwards; }
+ }
+ .text-ball:nth-child(2) {
+ animation: end-animation__move-text-ball-2 0.4s ease 2.1s forwards;
+ .inner {
+ animation: end-animation__jump-text-ball-2 0.4s ease 2.1s forwards;
+ &::after { animation: fadein 0.5s ease 2.5s forwards; }
+ }
+ .bg div:nth-child(1) { animation: slide-right 0.3s ease 2.5s forwards; }
+ .bg div:nth-child(2) { animation: slide-right 0.3s ease 2.55s forwards; }
+ .bg div:nth-child(3) { animation: slide-right 0.3s ease 2.6s forwards; }
+ .bg div:nth-child(4) { animation: slide-right 0.3s ease 2.65s forwards; }
+ .bg div:nth-child(5) { animation: slide-right 0.3s ease 2.7s forwards; }
+ }
+ .text-ball:nth-child(3) {
+ animation: end-animation__move-text-ball-3 0.4s ease 3s forwards;
+ .inner {
+ animation: end-animation__jump-text-ball-3 0.4s ease 3s forwards;
+ &::after { animation: fadein 0.5s ease 3.4s forwards; }
+ }
+ .bg div:nth-child(1) { animation: slide-right 0.3s ease 3.4s forwards; }
+ .bg div:nth-child(2) { animation: slide-right 0.3s ease 3.45s forwards; }
+ .bg div:nth-child(3) { animation: slide-right 0.3s ease 3.5s forwards; }
+ .bg div:nth-child(4) { animation: slide-right 0.3s ease 3.55s forwards; }
+ .bg div:nth-child(5) { animation: slide-right 0.3s ease 3.6s forwards; }
+ }
+ }
+
+ .paints {
+ div:nth-child(1) {
+ animation:
+ end-animation__show-paint 0.6s ease 0s forwards,
+ scale0-1 0.5s ease-out 1.2s reverse forwards;
+ }
+ div:nth-child(2) {
+ animation:
+ end-animation__show-paint 0.4s ease 0.2s forwards,
+ scale0-1 0.5s ease-out 2.1s reverse forwards;
+ }
+ div:nth-child(3) {
+ animation:
+ end-animation__show-paint 0.4s ease 0.4s forwards,
+ scale0-1 0.5s ease-out 3s reverse forwards;
+ }
+ div:nth-child(4) { animation: end-animation__show-paint 0.4s ease 0.6s forwards; }
+ }
+
+ .window {
+ animation: end-animation__down-window 0.5s ease-out 4.2s forwards;
+ img { animation: end-animation__end 0.5s ease 4.7s forwards; }
+ }
+ }
+ }
+}