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

Merge pull request #12 from yuki540net/feature/end-animation__tablet

Browse Source 
add: タブレット用のスタイルシートを追加
This commit is contained in:
yuki540 2018-04-17 21:30:54 +09:00 committed by GitHub
commit 79035d8038
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 194 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/scss/keyframes/tablet/_end-animation.scss Normal file
View File

194
src/scss/modules/tablet/_end-animation.scss Normal file
View File

@ -0,0 +1,194 @@
@include tablet-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; }
}
}
}
}