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

30
src/style/atoms/_button-control.scss
View File

@@ -14,6 +14,7 @@
cursor: pointer;
outline: none;
transition: background-color 350ms $ease-quart;
will-change: background-color;
@include breakpoint (sm) {
width: 56px;
@@ -22,11 +23,12 @@
// Icon
.icon {
overflow: hidden;
display: block;
width: 13px;
height: auto;
transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
overflow: hidden;
will-change: transform;
@include breakpoint (sm) {
width: 20px;
@@ -72,34 +74,34 @@
// To left
&.dir-left {
.icon[aria-hidden] {
transform: translate3d(100%, -50%, 0);
transform: translate(100%, -50%);
}
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(-100%, 0, 0);
transform: translate(-100%, 0);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
transform: translate(-50%, -50%);
}
}
}
// To right
&.dir-right {
.icon[aria-hidden] {
transform: translate3d(-150%, -50%, 0);
transform: translate(-150%, -50%);
}
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(100%, 0, 0);
transform: translate(100%, 0);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(-50%, -50%, 0);
transform: translate(-50%, -50%);
}
}
}
@@ -107,17 +109,17 @@
&.dir-top {
.icon[aria-hidden] {
left: auto;
transform: translate3d(0, -150%, 0);
transform: translate(0, -150%);
}
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, 100%, 0);
transform: translate(0, 100%);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(0, -50%, 0);
transform: translate(0, -50%);
}
}
}
@@ -125,17 +127,17 @@
&.dir-bottom {
.icon[aria-hidden] {
left: auto;
transform: translate3d(0, 150%, 0);
transform: translate(0, 150%);
}
&:hover, &:focus {
.icon:not([aria-hidden]) {
opacity: 0;
transform: translate3d(0, -100%, 0);
transform: translate(0, -100%);
}
.icon[aria-hidden] {
opacity: 1;
transform: translate3d(0, -50%, 0);
transform: translate(0, -50%);
}
}
}
@@ -149,6 +151,7 @@
overflow: visible;
background-color: rgba($color-lightpurple, 0.5);
transition: background-color 150ms $ease-inout;
will-change: background-color;
// Icon
svg[fill] {
@@ -175,6 +178,7 @@
animation-play-state: paused;
animation-delay: 50ms;
transition: stroke 150ms $ease-inout;
will-change: stroke;
}
// Hover