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

14
src/style/atoms/_button-outline.scss
View File

@@ -1,21 +1,22 @@
// Button: Outline
.button-outline {
overflow: hidden;
position: relative;
display: inline-flex;
align-items: center;
height: 32px;
padding: 1px 16px 0;
background: none;
font-family: $font-sans-sb;
font-size: rem(14px);
color: #fff;
background: none;
border: 2px solid #fff;
border-radius: 50vh;
overflow: hidden;
text-decoration: none;
cursor: pointer;
outline: none;
transition: all 275ms $ease-cubic;
will-change: border, color;
@include breakpoint (sm) {
height: 40px;
@@ -36,11 +37,12 @@
top: 50%;
left: 0;
right: 0;
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;
}
// Disabled
@@ -56,11 +58,11 @@
span {
opacity: 0;
transform: translate3d(0, 100%, 0);
transform: translateY(100%);
}
&:after {
opacity: 1;
transform: translate3d(0, -50%, 0);
transform: translateY(-50%);
}
}
}

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%);
}
}
}

4
src/style/atoms/_toggle.scss
View File

@@ -20,6 +20,7 @@
justify-content: center;
outline: none;
transition: color 150ms $ease-inout;
will-change: color;
}
button {
span {
@@ -80,6 +81,7 @@
height: 100%;
background-color: $color-primary;
transition: all 500ms $ease-quart;
will-change: width, left;
span {
content: attr(data-text);
@@ -87,4 +89,4 @@
margin: 0;
}
}
}
}