diff --git a/public/images/gab-animation/comic/1.png b/public/images/gab-animation/comic/1.png new file mode 100644 index 0000000..a497788 Binary files /dev/null and b/public/images/gab-animation/comic/1.png differ diff --git a/public/images/gab-animation/comic/2.png b/public/images/gab-animation/comic/2.png new file mode 100644 index 0000000..cad36d7 Binary files /dev/null and b/public/images/gab-animation/comic/2.png differ diff --git a/public/images/gab-animation/comic/3.png b/public/images/gab-animation/comic/3.png new file mode 100644 index 0000000..b78565f Binary files /dev/null and b/public/images/gab-animation/comic/3.png differ diff --git a/public/images/gab-animation/comic/4.png b/public/images/gab-animation/comic/4.png new file mode 100644 index 0000000..6a755b0 Binary files /dev/null and b/public/images/gab-animation/comic/4.png differ diff --git a/public/images/gab-animation/comic/bg.png b/public/images/gab-animation/comic/bg.png new file mode 100644 index 0000000..f20bf65 Binary files /dev/null and b/public/images/gab-animation/comic/bg.png differ diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss index 0769c64..340312f 100644 --- a/src/scss/keyframes/pc/_gab-animation.scss +++ b/src/scss/keyframes/pc/_gab-animation.scss @@ -157,3 +157,14 @@ from { width: 10px; left: calc(50% - 5px); } to { width: 100%; left: 0; } } + +@keyframes gab-animation__camera { + from { perspective: 20px; } + to { perspective: 400px; } +} +@keyframes gab-animation__show-layer { + 0% { transform: translateY(-100%); } + 70% { transform: translateY(0%); } + 85% { transform: translateY(-10px); } + 100% { transform: translateY(0%); } +} diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss index 274d1d3..d00deea 100644 --- a/src/scss/modules/pc/_gab-animation.scss +++ b/src/scss/modules/pc/_gab-animation.scss @@ -371,6 +371,65 @@ } } + .gab-animation__camera { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + perspective: 20px; + z-index: 2; + + .layer { + position: absolute; + top: calc(50% - 225px); left: calc(50% - 325px); + width: 650px; height: 450px; + border-radius: 30px; + overflow: hidden; + box-shadow: 0 0 10px #aaa; + + &::before, + &::after { + content: ""; display: block; + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + box-sizing: border-box; + } + &::before { + background-size: cover; + background-position: center; + } + &::after { + border: solid 25px #fff; + box-shadow: 0 0 10px #aaa inset; + } + } + .layer-1 { + transform: translateZ(20px) scale(calc(1 - (20 / 100))); + &::before { background-image: url(../images/gab-animation/comic/1.png); } + } + .layer-2 { + transform: translateZ(120px) scale(calc(1 - (120 / 200))); + &::before { + transform: translateY(-100%); + background-image: url(../images/gab-animation/comic/2.png); + } + } + .layer-3 { + transform: translateZ(220px) scale(calc(1 - (220 / 300))); + &::before { + transform: translateY(100%); + background-image: url(../images/gab-animation/comic/3.png); + } + } + .layer-4 { + transform: translateZ(320px) scale(calc(1 - (320 / 400))); + &::before { + transform: translateY(-100%); + background-image: url(../images/gab-animation/comic/4.png); + } + } + } + /************************************************************************************************* * animation *************************************************************************************************/ @@ -609,5 +668,12 @@ } } } + + .gab-animation__camera { + animation: gab-animation__camera 2.8s ease-in-out 15.2s forwards; + .layer-2:before { animation: slide-bottom 0.6s ease 16.2s forwards; } + .layer-3:before { animation: slide-top 0.6s ease 16.6s forwards; } + .layer-4:before { animation: gab-animation__show-layer 0.8s ease 17.1s forwards; } + } } }