diff --git a/public/images/calling/say.png b/public/images/calling/say.png new file mode 100644 index 0000000..95e10e9 Binary files /dev/null and b/public/images/calling/say.png differ diff --git a/src/scss/keyframes/pc/_calling.scss b/src/scss/keyframes/pc/_calling.scss index b98d880..48ef20e 100644 --- a/src/scss/keyframes/pc/_calling.scss +++ b/src/scss/keyframes/pc/_calling.scss @@ -44,3 +44,10 @@ 10% { opacity: 1; } 100% { opacity: 1; transform: translate(0px, 0px); } } + +@keyframes calling__show-say { + 0% { transform: scale(8); opacity: 0; } + 70% { transform: scale(1); opacity: 1; } + 85% { transform: scale(1.1); opacity: 1; } + 100% { transform: scale(1); opacity: 1; } +} diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss index 79126d9..220a4e7 100644 --- a/src/scss/modules/pc/_calling.scss +++ b/src/scss/modules/pc/_calling.scss @@ -303,6 +303,36 @@ } } + .calling__say { + position: absolute; + left: -20%; top: calc(50% - 200px); + width: 140%; height: 400px; + transform: rotate(-20deg); + z-index: 5; + + .line { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + transform: translateX(-100%); + } + .line:nth-child(1) { background-color: $theme-light-purple; } + .line:nth-child(2) { background-color: $theme-mint; } + .line:nth-child(3) { background-color: $theme-pink; } + .line:nth-child(4) { background-color: $theme-purple; } + + .img { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + background-size: auto 35%; + background-position: center; + background-repeat: no-repeat; + background-image: url(../images/calling/say.png); + opacity: 0; + } + } + .calling[data-state="start"] { /*** bg ***/ .calling__bg { @@ -425,6 +455,15 @@ } } + /*** say ***/ + .calling__say { + .line:nth-child(1) { animation: slide-right 0.35s ease 11s forwards; } + .line:nth-child(2) { animation: slide-right 0.35s ease 11.2s forwards; } + .line:nth-child(3) { animation: slide-right 0.35s ease 11.4s forwards; } + .line:nth-child(4) { animation: slide-right 0.35s ease 11.6s forwards; } + .img { animation: calling__show-say 0.5s ease 11.9s forwards; } + } + /*** live-view ***/ .calling__live-view { .view:nth-child(1) {