diff --git a/public/images/calling/icons/eriri.png b/public/images/calling/icons/eriri.png
new file mode 100644
index 0000000..8de39a8
Binary files /dev/null and b/public/images/calling/icons/eriri.png differ
diff --git a/public/images/calling/icons/eriri_large.png b/public/images/calling/icons/eriri_large.png
new file mode 100644
index 0000000..1abc0ee
Binary files /dev/null and b/public/images/calling/icons/eriri_large.png differ
diff --git a/public/images/calling/icons/gab.png b/public/images/calling/icons/gab.png
new file mode 100644
index 0000000..3c45f3c
Binary files /dev/null and b/public/images/calling/icons/gab.png differ
diff --git a/public/images/calling/icons/gab_large.png b/public/images/calling/icons/gab_large.png
new file mode 100644
index 0000000..79e0429
Binary files /dev/null and b/public/images/calling/icons/gab_large.png differ
diff --git a/public/images/calling/icons/yui.png b/public/images/calling/icons/yui.png
new file mode 100644
index 0000000..390ab64
Binary files /dev/null and b/public/images/calling/icons/yui.png differ
diff --git a/public/images/calling/icons/yui_large.png b/public/images/calling/icons/yui_large.png
new file mode 100644
index 0000000..56b39e3
Binary files /dev/null and b/public/images/calling/icons/yui_large.png differ
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/public/index.html b/public/index.html
index 5d9ead6..1d58d25 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,6 +32,7 @@
+
@@ -233,6 +234,72 @@
+
+
diff --git a/src/scripts/lib/util.js b/src/scripts/lib/util.js
index b5d1ad1..8f01662 100644
--- a/src/scripts/lib/util.js
+++ b/src/scripts/lib/util.js
@@ -4,6 +4,8 @@ const load_view = document.querySelector('.load-view')
const load_view_body_close = document.querySelector('.load-view__body__close')
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')
/**
* 画像のプリロード
@@ -82,6 +84,20 @@ export const startGabAnimation = () => {
if(e.animationName === 'gab-animation__close'
|| e.animationName === 'gab-animation__close__sp') {
root.removeChild(gab_animation)
+ startCalling()
+ }
+ })
+}
+
+/**
+ * callingの開始
+ */
+export const startCalling = () => {
+ calling.setAttribute('data-state', 'start')
+
+ calling__end.addEventListener('animationend', e => {
+ if(e.animationName === 'calling__end') {
+ root.removeChild(calling)
}
})
}
diff --git a/src/scss/keyframes/_common.scss b/src/scss/keyframes/_common.scss
index 1c6677d..57768b9 100644
--- a/src/scss/keyframes/_common.scss
+++ b/src/scss/keyframes/_common.scss
@@ -30,6 +30,14 @@
from { transform: scale(0); }
to { transform: scale(1); }
}
+@keyframes scale0-0dot5 {
+ from { transform: scale(0); }
+ to { transform: scale(0.5); }
+}
+@keyframes scale1-0dot5 {
+ from { transform: scale(1); }
+ to { transform: scale(0.5); }
+}
@keyframes scale10 {
from { transform: scale(1); }
to { transform: scale(10); }
@@ -38,3 +46,12 @@
from { transform: scale(1); }
to { transform: scale(1.5); }
}
+
+@keyframes width0-100 {
+ from { width: 0; }
+ to { width: 100%; }
+}
+@keyframes height0-100 {
+ from { height: 0; }
+ to { height: 100%; }
+}
diff --git a/src/scss/keyframes/pc/_calling.scss b/src/scss/keyframes/pc/_calling.scss
new file mode 100644
index 0000000..2d4a04e
--- /dev/null
+++ b/src/scss/keyframes/pc/_calling.scss
@@ -0,0 +1,58 @@
+@keyframes calling__show-btn-1 {
+ from { transform: rotate(180deg) scale(2); opacity: 0; }
+ to { transform: rotate(180deg) scale(1); opacity: 1; }
+}
+@keyframes calling__show-btn-2 {
+ from { transform: rotate(45deg) scale(2); opacity: 0; }
+ to { transform: rotate(45deg) scale(1); opacity: 1; }
+}
+@keyframes calling__touch-btn {
+ from { border-width: 40px; opacity: 0; transform: scale(0.6); }
+ to { border-width: 0px; opacity: 0.8; transform: scale(3); }
+}
+@keyframes calling__press-btn {
+ from { transform: scale(1) rotate(45deg); opacity: 1; }
+ to { transform: scale(0.6) rotate(45deg); opacity: 0.6; }
+}
+
+@keyframes calling__icon-frame-1 {
+ from { transform: scale(0) translate(-5px, 5px); opacity: 0; }
+ to { transform: scale(1) translate(0); opacity: 1; }
+}
+@keyframes calling__icon-frame-2 {
+ from { transform: scale(0) translate(5px, -5px); opacity: 0; }
+ to { transform: scale(1) translate(0); opacity: 1; }
+}
+
+@keyframes calling__show-controls-bar {
+ from { width: 0; left: 50%; }
+ to { width: 500px; left: calc(50% - 250px); }
+}
+
+@keyframes calling__show-live-view {
+ from { width: 0; margin-left: 50%; margin-top: 10px; }
+ to { width: calc(100% - 20px); margin-left: 10px; margin-top: 10px; }
+}
+
+@keyframes calling__char-name-frame-1 {
+ 0% { opacity: 0; transform: translate(4px, 4px); }
+ 10% { opacity: 1; }
+ 100% { opacity: 1; transform: translate(0px, 0px); }
+}
+@keyframes calling__char-name-frame-2 {
+ 0% { opacity: 0; transform: translate(-4px, -4px); }
+ 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; }
+}
+
+@keyframes calling__end {
+ from { transform: translateY(-100%); }
+ to { transform: translateY(0%); }
+}
diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss
index fcac60f..b0f2cef 100644
--- a/src/scss/keyframes/pc/_gab-animation.scss
+++ b/src/scss/keyframes/pc/_gab-animation.scss
@@ -159,7 +159,7 @@
}
@keyframes gab-animation__camera {
- from { perspective: 20px; }
+ from { perspective: 0px; }
to { perspective: 400px; }
}
@keyframes gab-animation__show-layer {
diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss
new file mode 100644
index 0000000..2bf2600
--- /dev/null
+++ b/src/scss/modules/pc/_calling.scss
@@ -0,0 +1,549 @@
+@include pc-layout {
+ .calling {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ min-width: $min-width; min-height: $min-height;
+ background-color: $theme-purple;
+ overflow: hidden;
+ z-index: 998;
+ }
+
+ /*** bg ***/
+ .calling__bg {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+
+ div {
+ position: relative;
+ float: left;
+ width: 25%; height: 25%;
+ overflow: hidden;
+
+ &::after {
+ content: ""; display: block;
+ width: 100%; height: 100%;
+ background-color: #333;
+ transform: translateX(-100%);
+ }
+ }
+
+ &::after { content: ""; display: block; clear: both; }
+ }
+
+ /*** controls-btn ***/
+ .calling__controls-btn {
+ position: absolute;
+ bottom: 100px; left: calc(50% - 250px);
+ width: 500px; height: 80px;
+
+ .btn {
+ position: absolute; top: 0;
+ width: 80px; height: 80px;
+ overflow: hidden;
+ border-radius: 15px;
+ transform: rotate(45deg);
+
+ .fa-phone {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ font-size: 45px;
+ text-align: center;
+ line-height: 80px;
+ display: block;
+ opacity: 0;
+ }
+
+ div {
+ position: absolute;
+ &::after {
+ content: ""; display: block;
+ width: 100%; height: 100%;
+ background-color: rgba(255,255,255,0.6);
+ }
+ }
+ div:nth-child(1),
+ div:nth-child(3) { left: 0; width: 100%; height: 2px; }
+ div:nth-child(2),
+ div:nth-child(4) { top: 0; width: 2px; height: 100%; }
+ div:nth-child(1) {
+ top: 0;
+ &::after { transform: translateX(100%); }
+ }
+ div:nth-child(2) {
+ left: 0;
+ &::after { transform: translateY(-100%); }
+ }
+ div:nth-child(3) {
+ bottom: 0;
+ &::after { transform: translateX(-100%); }
+ }
+ div:nth-child(4) {
+ right: 0;
+ &::after { transform: translateX(100%); }
+ }
+ }
+ .btn-1 {
+ left: 0;
+ .fa-phone { color: #af5853; transform: rotate(180deg); }
+ }
+ .btn-2 {
+ right: 0;
+ .fa-phone { color: #6C9A7B; transform: rotate(45deg); }
+ }
+
+ .touch {
+ position: absolute;
+ top: 0; right: 0;
+ width: 80px; height: 80px;
+ border-radius: 50%;
+ border: solid 40px #fff;
+ box-sizing: border-box;
+ opacity: 0;
+ }
+ }
+
+ /*** icons ***/
+ .calling__icons {
+ position: absolute;
+ top: 100px; left: calc(50% - 400px);
+ width: 800px; height: 150px;
+
+ .icon-box {
+ position: relative;
+ margin-right: 100px;
+ float: left;
+ width: 200px; height: 200px;
+
+ .icon {
+ position: absolute;
+ width: 100%; height: 100%;
+ background-color: #fff;
+ border-radius: 50%;
+ transform: scale(0);
+ z-index: 1;
+
+ &::after {
+ margin: 5px;
+ content: ""; display: block;
+ width: calc(100% - 10px); height: calc(100% - 10px);
+ background-size: cover;
+ background-position: center;
+ border-radius: 50%;
+ transform: scale(0);
+ }
+ }
+
+ .name {
+ position: absolute;
+ left: 50px; bottom: -50px;
+ width: 100px; height: 30px;
+ font-size: 16px;
+ text-align: center;
+ line-height: 30px;
+ color: #fff;
+ overflow: hidden;
+
+ span { display: block; transform: translateY(100%); }
+ &::after {
+ position: absolute;
+ bottom: 0; left: 0;
+ content: ""; display: block;
+ width: 100%; height: 1px;
+ transform: translateX(-100%);
+ }
+ }
+
+ &::before,
+ &::after {
+ content: ""; display: block;
+ position: absolute;
+ width: calc(100% - 70px); height: calc(100% - 70px);
+ background-color: #fff;
+ border-radius: 50%;
+ opacity: 0;
+ }
+ &::before { top: -5px; left: -5px; }
+ &::after { bottom: -5px; right: -5px; }
+ }
+ .icon-box:last-child { margin-right: 0; }
+ .icon-box:nth-child(1) {
+ .icon:after {
+ background-color: $theme-light-purple;
+ background-image: url(../images/calling/icons/yui.png);
+ }
+ .name:after { background-color: $theme-light-purple; }
+ }
+ .icon-box:nth-child(2) {
+ .icon:after {
+ background-color: $theme-pink;
+ background-image: url(../images/calling/icons/gab.png);
+ }
+ .name:after { background-color: $theme-pink; }
+ }
+ .icon-box:nth-child(3) {
+ .icon:after {
+ background-color: $theme-mint;
+ background-image: url(../images/calling/icons/eriri.png);
+ }
+ .name:after { background-color: $theme-mint; }
+ }
+ }
+
+ /*** controls-bar ***/
+ .calling__controls-bar {
+ position: absolute;
+ bottom: 40px; left: 50%;
+ width: 0px; height: 60px;
+ background-color: #222;
+ border-radius: 30px;
+
+ .inner {
+ width: 280px;
+ margin: 0 auto;
+ }
+
+ .btn {
+ float: left;
+ width: 60px; height: 60px;
+ font-size: 25px;
+ text-align: center;
+ line-height: 60px;
+ color: #999;
+ display: block;
+ margin-right: 50px;
+ opacity: 0;
+ }
+ .btn .fa-phone { transform: rotate(225deg); color: #af5853; font-size: 30px; }
+ .btn:last-child { margin-right: 0; }
+ }
+
+ /*** live-view ***/
+ .calling__live-view {
+ position: absolute;
+ left: calc(50% - 500px); top: 0;
+ width: 1000px; height: calc(100% - 140px);
+
+ .view {
+ position: absolute;
+ width: 50%; height: 50%;
+
+ .char {
+ margin-left: 50%;
+ margin-top: 10px;
+ width: 0; height: calc(100% - 20px);
+ border-radius: 8px;
+ overflow: hidden;
+
+ &::after {
+ content: ""; display: block;
+ width: 100%; height: 100%;
+ background-size: auto 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0;
+ }
+ }
+
+ .name {
+ position: absolute;
+ bottom: 20px; left: 20px;
+ width: 150px; height: 30px;
+
+ &::before,
+ &::after {
+ content: ""; display: block;
+ position: absolute;
+ width: 80%; height: 80%;
+ background-color: #6C9A7B;
+ border-radius: 20px;
+ opacity: 0;
+ }
+ &::before { top: -4px; left: -4px; }
+ &::after { bottom: -4px; right: -4px; }
+
+ span {
+ display: block;
+ position: absolute;
+ top: 0; left: 0;
+ width: 0%; height: 100%;
+ border-radius: 15px;
+ background-color: #444;
+ font-size: 12px;
+ line-height: 30px;
+ text-align: center;
+ color: #fff;
+ overflow: hidden;
+ z-index: 1;
+ }
+ }
+ }
+ .view:nth-child(1) {
+ top: 0; left: 0;
+ .char {
+ background-color: $theme-light-purple;
+ &::after { background-image: url(../images/calling/icons/yui_large.png); }
+ }
+ }
+ .view:nth-child(2) {
+ top: 0; right: 0;
+ .char {
+ background-color: $theme-mint;
+ &::after { background-image: url(../images/calling/icons/eriri_large.png); }
+ }
+ }
+ .view:nth-child(3) {
+ bottom: 0; left: 25%;
+ .char {
+ background-color: $theme-pink;
+ &::after { background-image: url(../images/calling/icons/gab_large.png); }
+ }
+ }
+ }
+
+ .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;
+ }
+ }
+
+ /*** end ***/
+ .calling__end {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ z-index: 6;
+
+ div {
+ width: 100%; height: 10%;
+ overflow: hidden;
+ &::after {
+ content: ""; display: block;
+ width: 100%; height: 100%;
+ background-color: $theme-mint;
+ transform: translateY(-101%);
+ }
+ }
+ }
+
+ .calling[data-state="start"] {
+ /*** bg ***/
+ .calling__bg {
+ div:nth-child(1):after,
+ div:nth-child(2):after,
+ div:nth-child(3):after,
+ div:nth-child(4):after { animation: slide-right 0.4s ease 0s forwards; }
+ div:nth-child(5):after,
+ div:nth-child(6):after,
+ div:nth-child(7):after,
+ div:nth-child(8):after { animation: slide-right 0.4s ease 0.1s forwards; }
+ div:nth-child(9):after,
+ div:nth-child(10):after,
+ div:nth-child(11):after,
+ div:nth-child(12):after { animation: slide-right 0.4s ease 0.2s forwards; }
+ div:nth-child(13):after,
+ div:nth-child(14):after,
+ div:nth-child(15):after,
+ div:nth-child(16):after { animation: slide-right 0.4s ease 0.3s forwards; }
+ }
+
+ /*** icons ***/
+ .calling__icons {
+ animation: fadeout 0.5s ease 6.6s forwards;
+ .icon-box .name { animation: fadeout 0.5s ease 6.6s forwards; }
+ .icon-box:nth-child(1) {
+ .icon {
+ animation:
+ scale0-0dot5 0.3s ease 2.5s alternate 2 forwards,
+ scale0-1 0.5s ease 3.1s forwards;
+ &::after {
+ animation:
+ scale0-0dot5 0.3s ease 3.3s alternate 2 forwards,
+ scale0-1 0.5s ease 3.9s forwards;
+ }
+ }
+ .name {
+ span { animation: slide-top 0.7s ease 4.5s forwards; }
+ &::after { animation: slide-right 0.3s ease 4.6s forwards; }
+ }
+ &::before { animation: calling__icon-frame-1 0.8s ease 4s forwards; }
+ &::after { animation: calling__icon-frame-2 0.8s ease 4.1s forwards; }
+ }
+ .icon-box:nth-child(2) {
+ .icon {
+ animation:
+ scale0-0dot5 0.3s ease 1.5s alternate 2 forwards,
+ scale0-1 0.5s ease 2.1s forwards;
+ &::after {
+ animation:
+ scale0-0dot5 0.3s ease 2.3s alternate 2 forwards,
+ scale0-1 0.5s ease 2.9s forwards;
+ }
+ }
+ .name {
+ span { animation: slide-top 0.7s ease 3.5s forwards; }
+ &::after { animation: slide-right 0.3s ease 3.6s forwards; }
+ }
+ &::before { animation: calling__icon-frame-1 0.8s ease 3s forwards; }
+ &::after { animation: calling__icon-frame-2 0.8s ease 3.1s forwards; }
+ }
+ .icon-box:nth-child(3) {
+ .icon {
+ animation:
+ scale0-0dot5 0.3s ease 3.5s alternate 2 forwards,
+ scale0-1 0.5s ease 4.1s forwards;
+ &::after {
+ animation:
+ scale0-0dot5 0.3s ease 4.3s alternate 2 forwards,
+ scale0-1 0.5s ease 4.9s forwards;
+ }
+ }
+ .name {
+ span { animation: slide-top 0.7s ease 5.5s forwards; }
+ &::after { animation: slide-right 0.3s ease 5.6s forwards; }
+ }
+ &::before { animation: calling__icon-frame-1 0.8s ease 5s forwards; }
+ &::after { animation: calling__icon-frame-2 0.8s ease 5.1s forwards; }
+ }
+ }
+
+ /*** controls-btn ***/
+ .calling__controls-btn {
+ animation: fadeout 0.5s ease 6.6s forwards;
+ .btn-1 {
+ div:nth-child(1):after { animation: slide-left 0.6s ease 0.7s forwards; }
+ div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.7s forwards; }
+ div:nth-child(3):after { animation: slide-right 0.6s ease 0.7s forwards; }
+ div:nth-child(4):after { animation: slide-top 0.6s ease 0.7s forwards; }
+ .fa-phone { animation: calling__show-btn-1 0.7s ease 1s forwards; }
+ }
+ .btn-2 {
+ animation: calling__press-btn 0.3s ease 5.9s alternate 2 forwards;
+ div:nth-child(1):after { animation: slide-left 0.6s ease 0.9s forwards; }
+ div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.9s forwards; }
+ div:nth-child(3):after { animation: slide-right 0.6s ease 0.9s forwards; }
+ div:nth-child(4):after { animation: slide-top 0.6s ease 0.9s forwards; }
+ .fa-phone { animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
+ }
+ .touch { animation: calling__touch-btn 0.6s ease 5.9s forwards; }
+ }
+
+ /*** controls-bar ***/
+ .calling__controls-bar {
+ animation: calling__show-controls-bar 0.4s ease 6.6s forwards;
+ div:nth-child(1) {
+ animation:
+ fadein 0.8s ease 7s forwards,
+ scale0-1 0.8s ease 7s forwards;
+ }
+ div:nth-child(2) {
+ animation:
+ fadein 0.8s ease 7.4s forwards,
+ scale0-1 0.8s ease 7.4s forwards;
+ }
+ div:nth-child(3) {
+ animation:
+ fadein 0.8s ease 7.2s forwards,
+ scale0-1 0.8s ease 7.2s forwards;
+ }
+ }
+
+ /*** say ***/
+ .calling__say {
+ .line:nth-child(1) { animation: slide-right 1s ease 11s forwards; }
+ .line:nth-child(2) { animation: slide-right 1s ease 11.2s forwards; }
+ .line:nth-child(3) { animation: slide-right 1s ease 11.4s forwards; }
+ .line:nth-child(4) { animation: slide-right 1s ease 11.6s forwards; }
+ .img { animation: calling__show-say 0.5s ease 11.9s forwards; }
+ }
+
+ /*** live-view ***/
+ .calling__live-view {
+ .view:nth-child(1) {
+ .char {
+ animation: calling__show-live-view 0.4s ease 8s forwards;
+ &::after {
+ animation:
+ fadein 0.3s ease 8.8s forwards,
+ slide-top 0.5s ease 8.8s forwards;
+ }
+ }
+ .name {
+ span { animation: width0-100 0.3s ease 9.7s forwards; }
+ &::before { animation: calling__char-name-frame-1 0.6s ease 10s forwards; }
+ &::after { animation: calling__char-name-frame-2 0.6s ease 10s forwards; }
+ }
+ }
+ .view:nth-child(2) {
+ .char {
+ animation: calling__show-live-view 0.4s ease 8.2s forwards;
+ &::after {
+ animation:
+ fadein 0.3s ease 9s forwards,
+ slide-right 0.5s ease 9s forwards;
+ }
+ }
+ .name {
+ span { animation: width0-100 0.3s ease 9.9s forwards; }
+ &::before { animation: calling__char-name-frame-1 0.6s ease 10.2s forwards; }
+ &::after { animation: calling__char-name-frame-2 0.6s ease 10.2s forwards; }
+ }
+ }
+ .view:nth-child(3) {
+ .char {
+ animation: calling__show-live-view 0.4s ease 8.4s forwards;
+ &::after {
+ animation:
+ fadein 0.3s ease 9.2s forwards,
+ slide-left 0.5s ease 9.2s forwards;
+ }
+ }
+ .name {
+ span { animation: width0-100 0.3s ease 10.1s forwards; }
+ &::before { animation: calling__char-name-frame-1 0.6s ease 10.4s forwards; }
+ &::after { animation: calling__char-name-frame-2 0.6s ease 10.4s forwards; }
+ }
+ }
+ }
+
+ /*** end ***/
+ .calling__end {
+ div:nth-child(1):after { animation: slide-bottom 0.3s ease 12.6s forwards; }
+ div:nth-child(2):after { animation: slide-bottom 0.3s ease 12.65s forwards; }
+ div:nth-child(3):after { animation: slide-bottom 0.3s ease 12.75s forwards; }
+ div:nth-child(4):after { animation: slide-bottom 0.3s ease 12.8s forwards; }
+ div:nth-child(5):after { animation: slide-bottom 0.3s ease 12.85s forwards; }
+ div:nth-child(6):after { animation: slide-bottom 0.3s ease 12.9s forwards; }
+ div:nth-child(7):after { animation: slide-bottom 0.3s ease 12.95s forwards; }
+ div:nth-child(8):after { animation: slide-bottom 0.3s ease 13.0s forwards; }
+ div:nth-child(9):after { animation: slide-bottom 0.3s ease 13.05s forwards; }
+ div:nth-child(10):after { animation: calling__end 0.3s ease 13.1s forwards; }
+ }
+ }
+}
diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss
index 37ba31a..db89c7f 100644
--- a/src/scss/modules/pc/_gab-animation.scss
+++ b/src/scss/modules/pc/_gab-animation.scss
@@ -289,9 +289,10 @@
&::after {
content: ""; display: block;
position: absolute;
- top: 0; left: 0;
+ bottom: 0; left: 0;
width: 100%; height: 100%;
background-color: $theme-bg;
+ border-radius: 50%;
}
}
.char-1 { background-image: url(../images/gab-animation/name/1.png); }
@@ -696,7 +697,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 9.2s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.2s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.2s forwards; }
- .char:after { animation: slide-top 1.8s ease-out 9.2s reverse forwards; }
+ .char:after { animation: height0-100 1.8s ease-out 9.2s reverse forwards; }
}
.paint:nth-child(2) {
animation: gab-animation__fall-paint-2 0.2s ease 10s forwards;
@@ -704,7 +705,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 10.2s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.2s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.2s forwards; }
- .char:after { animation: slide-top 1.8s ease-out 10.2s reverse forwards; }
+ .char:after { animation: height0-100 1.8s ease-out 10.2s reverse forwards; }
}
.paint:nth-child(3) {
animation: gab-animation__fall-paint-1 0.2s ease 8.5s forwards;
@@ -712,7 +713,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 8.7s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 8.7s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 8.7s forwards; }
- .char:after { animation: slide-top 1.8s ease-out 8.7s reverse forwards; }
+ .char:after { animation: height0-100 1.8s ease-out 8.7s reverse forwards; }
}
.paint:nth-child(4) {
animation: gab-animation__fall-paint-2 0.2s ease 10.5s forwards;
@@ -720,7 +721,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 10.7s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 10.7s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 10.7s forwards; }
- .char:after { animation: slide-top 1.8s ease-out 10.7s reverse forwards; }
+ .char:after { animation: height0-100 1.8s ease-out 10.7s reverse forwards; }
}
.paint:nth-child(5) {
animation: gab-animation__fall-paint-1 0.2s ease 9.5s forwards;
@@ -728,7 +729,7 @@
div:nth-child(2):after { animation: slide-bottom 1s ease 9.7s forwards; }
div:nth-child(3):after { animation: slide-bottom 1.8s ease 9.7s forwards; }
div:nth-child(4):after { animation: slide-bottom 0.9s ease 9.7s forwards; }
- .char:after { animation: slide-top 1.8s ease-out 9.7s reverse forwards; }
+ .char:after { animation: height0-100 1.8s ease-out 9.7s reverse forwards; }
}
.frame-top {