MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zupdate: ガヴリールロゴにスタイルを適用

Browse Source
This commit is contained in:
yuki540 2018-04-12 14:25:41 +09:00
parent 6287533c69
commit 19ec8d8271
8 changed files with 139 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/gab-animation/name/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
public/images/gab-animation/name/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/images/gab-animation/name/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/images/gab-animation/name/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/gab-animation/name/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

8
src/scss/keyframes/_common.scss
View File

@ -18,6 +18,14 @@
from { transform: translateX(100%); }
to { transform: translateX(0%); }
}
@keyframes slide-top {
from { transform: translateY(100%); }
to { transform: translateY(0%); }
}
@keyframes slide-bottom {
from { transform: translateY(-100%); }
to { transform: translateY(0%); }
}
@keyframes scale10 {
from { transform: scale(1); }
to { transform: scale(10); }

11
src/scss/keyframes/pc/_gab-animation.scss
View File

@ -124,3 +124,14 @@
from { transform: scale(3) rotate(35deg); opacity: 0; }
to { transform: scale(0.7) rotate(-8deg); opacity: 1; }
}
@keyframes gab-animation__fall-paint-1 {
0% { top: -100px; transform: scaleX(1); }
60% { transform: scaleX(1); }
100% { top: calc(50% - 70px); transform: scaleX(1.2); }
}
@keyframes gab-animation__fall-paint-2 {
0% { top: -100px; transform: scaleX(1); }
60% { transform: scaleX(1); }
100% { top: calc(50% - 30px); transform: scaleX(1.2); }
}

120
src/scss/modules/pc/_gab-animation.scss
View File

@ -230,6 +230,83 @@
}
}
.gab-animation__palette {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
.paint {
position: absolute; top: -100px;
width: 100px; height: 100px;
border-radius: 50%;
background-color: $theme-bg;
div {
position: absolute;
top: 50%;
overflow: hidden;
&::after {
content: ""; display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: $theme-bg;
transform: translateY(-100%);
}
}
div:nth-child(1) {
left: calc(50% - 5px);
width: 10px; height: 120px;
&::after { border-radius: 10px; }
}
div:nth-child(2) {
left: 2px;
width: 18px; height: 70px;
&::after { border-radius: 15px; }
}
div:nth-child(3) {
right: 20px;
width: 15px; height: 75px;
&::after { border-radius: 10px; }
}
div:nth-child(4) {
right: 0px;
width: 10px; height: 50px;
&::after { border-radius: 10px; }
}
.char {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 50%;
overflow: hidden;
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
&::after {
content: ""; display: block;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: $theme-bg;
}
}
.char-1 { background-image: url(../images/gab-animation/name/1.png); }
.char-2 { background-image: url(../images/gab-animation/name/2.png); }
.char-3 { background-image: url(../images/gab-animation/name/3.png); }
.char-4 { background-image: url(../images/gab-animation/name/4.png); }
.char-5 { background-image: url(../images/gab-animation/name/5.png); }
}
.paint:nth-child(1) { left: calc(50% - 330px); }
.paint:nth-child(2) { left: calc(50% - 190px); }
.paint:nth-child(3) { left: calc(50% - 50px); }
.paint:nth-child(4) { left: calc(50% + 90px); }
.paint:nth-child(5) { left: calc(50% + 230px); }
}
/*************************************************************************************************
* animation
*************************************************************************************************/
@ -390,5 +467,48 @@
div:nth-child(2):after { animation: slide-right 0.7s ease 7.8s forwards; }
}
}
.gab-animation__palette {
.paint:nth-child(1) {
animation: gab-animation__fall-paint-1 0.2s ease 9s forwards;
div:nth-child(1):after { animation: slide-bottom 2s ease 9.2s forwards; }
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; }
}
.paint:nth-child(2) {
animation: gab-animation__fall-paint-2 0.2s ease 10s forwards;
div:nth-child(1):after { animation: slide-bottom 2s ease 10.2s forwards; }
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; }
}
.paint:nth-child(3) {
animation: gab-animation__fall-paint-1 0.2s ease 8.5s forwards;
div:nth-child(1):after { animation: slide-bottom 2s ease 8.7s forwards; }
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; }
}
.paint:nth-child(4) {
animation: gab-animation__fall-paint-2 0.2s ease 10.5s forwards;
div:nth-child(1):after { animation: slide-bottom 2s ease 10.7s forwards; }
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; }
}
.paint:nth-child(5) {
animation: gab-animation__fall-paint-1 0.2s ease 9.5s forwards;
div:nth-child(1):after { animation: slide-bottom 2s ease 9.7s forwards; }
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; }
}
}
}
}