andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

it works

Browse source
This commit is contained in:
Schmelczer András 2019-12-30 13:57:42 +01:00
parent 2ee4e36888
commit 82a0ce6ec0
5 changed files with 65 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/page/background/background.scss
View file

@ -1,32 +1,43 @@
@import "../../style/vars";
@import "../../style/mixins";
#background {
#background-container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
-webkit-overflow-scrolling: touch;
perspective: 5px;
perspective-origin: center center;
overflow: hidden;
will-change: width, height;
transition: height $long-transition-time, width $long-transition-time;
div {
border-radius: 100px;
position: absolute;
left: -1000vh;
top: -1000vh;
margin: 1000vh;
width: 7px;
#background {
overflow: hidden;
will-change: width, height;
transition: height $long-transition-time, width $long-transition-time;
transform-style: preserve-3d; // really important for performance on mobile devices
transition: transform $long-transition-time, opacity $long-transition-time;
will-change: transform, opacity;
animation: fade-in 1s linear;
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
div {
position: -webkit-sticky;
border-radius: 100px;
position: absolute;
left: 0;
top: 0;
width: 7px;
transition: transform $long-transition-time, opacity $long-transition-time;
will-change: transform, opacity;
animation: fade-in 1s linear;
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
}