flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add parallax and reveal effects + performances on transitions

Browse Source
This commit is contained in:
Félix Péault
2020-02-17 22:38:51 +01:00
parent 0174ba08f2
commit 615182d6fb
12 changed files with 168 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/style/atoms/_button.scss
View File

@@ -16,6 +16,7 @@
outline: none;
cursor: pointer;
transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
will-change: background-color, color;
@include breakpoint (sm) {
height: 48px;
@@ -58,10 +59,11 @@
top: 50%;
left: 0;
width: 100%;
transform: translate3d(0, -120%, 0);
transform: translateY(-120%);
}
span, &:after {
transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
will-change: transform, opacity;
}
// Button has an icon (offset the hovered text)
@@ -86,14 +88,14 @@
}
span {
opacity: 0;
transform: translate3d(0, 100%, 0);
transform: translateY(100%);
}
&:after {
opacity: 1;
transform: translate3d(0, -47%, 0);
transform: translateY(-47%);
@include breakpoint (sm) {
transform: translate3d(0, -50%, 0);
transform: translateY(-50%);
}
}
}