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

98
src/style/_animations.scss
View File

@@ -3,7 +3,7 @@
========================================================================== */
// Parallax title: Translate X
.title-parallax {
transform: translate3d(var(--translateX), 0, 0);
transform: translateX(var(--translateX));
will-change: transform;
}
@@ -17,14 +17,16 @@
overflow: hidden;
}
// Translate each letter from top/bottom
// Translate each letter from a direction
[data-aos="letters-translate-top"],
[data-aos="letters-translate-bottom"] {
white-space: nowrap;
span {
display: inline-block;
transition: all 1000ms $ease-quart;
transition: transform 1000ms $ease-quart;
will-change: transform;
@for $i from 1 to 8 {
&:nth-child(#{$i}) {
@@ -35,18 +37,66 @@
&.aos-animate {
span {
transform: translate3d(0, 0, 0);
transform: translate(0, 0);
}
}
}
[data-aos="letters-translate-top"] {
span {
transform: translate3d(0, -100%, 0);
transform: translate(0, -100%);
}
}
[data-aos="letters-translate-bottom"] {
span {
transform: translate3d(0, 100%, 0);
transform: translate(0, 100%);
}
}
// Carousel prev/active/next photos
[data-aos="carousel-prev"] {
transform: translate(-16%, -4%) rotate(-3deg) scale(0.8);
opacity: 0;
transition-duration: 1.6s;
transition-delay: 450ms;
&.aos-animate {
transform: translate(-9%, -1%) rotate(-1deg) scale(0.9);
opacity: 1;
}
}
[data-aos="carousel-active"] {
transform: scale(0.8);
opacity: 0;
transition-delay: 400ms;
&.aos-animate {
transform: scale(1);
opacity: 1;
}
}
[data-aos="carousel-next"] {
transform: translate(16%, -4%) rotate(3deg) scale(0.8);
opacity: 0;
transition-duration: 1.6s;
transition-delay: 500ms;
&.aos-animate {
transform: translate(9%, -1%) rotate(1deg) scale(0.9);
opacity: 1;
}
}
// Scale down and Fade in
[data-aos="scale-down-fade-in"] {
transform: scale(1.1);
opacity: 0;
transition: transform 2s $ease-quart, opacity 2s $ease-quart;
will-change: transform, opacity;
&.aos-animate {
transform: scale(1);
opacity: 1;
}
}
@@ -61,27 +111,33 @@
100% { transform: rotate(360deg); }
}
// Spinning globe (small)
/*
** Spinning globe
*/
@keyframes moveContinents {
0% { transform: translate(0,0); }
100% { transform: translate(-80.26px, 28.2px); }
}
.anim-spinGlobe {
animation: moveContinents 1.7s linear infinite;
animation-play-state: paused;
}
// Small
@keyframes moveContinentsSmall {
0% { transform: translate3d(0,0,0); }
100% { transform: translate3d(-96.95px, 0, 0); }
0% { transform: translate(0,0); }
100% { transform: translate(-96.95px, 0); }
}
.anim-spinGlobeSmall {
animation: moveContinentsSmall 1.5s linear infinite;
animation-play-state: paused;
}
// Spinning globe
@keyframes moveContinents {
0% { transform: translate3d(0,0,0); }
100% { transform: translate3d(-80.26px, 28.2px, 0); }
}
.anim-spinGlobe {
animation: moveContinents 1.7s linear infinite;
animation-play-state: paused;
}
// Layout: List
/*
** Layout
*/
// List
@keyframes layoutListOdd {
0% { transform: translateX(0); }
100% { transform: translateX(4px); }
@@ -91,7 +147,7 @@
100% { transform: translateX(-4px); }
}
// Layout: Grid
// Grid
@keyframes layoutGridOdd {
0% { transform: translateY(0); }
100% { transform: translateY(3px); }
@@ -99,4 +155,4 @@
@keyframes layoutGridEven {
0% { transform: translateY(0); }
100% { transform: translateY(-3px); }
}
}

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

1
src/style/molecules/_pagination.scss
View File

@@ -45,6 +45,7 @@
line-height: 0.85;
transform: translate3d(0, -190%, 0);
transition: transform 250ms $ease-cubic;
will-change: transform;
}
}

2
src/style/molecules/_photo.scss
View File

@@ -84,7 +84,7 @@
background-color: $color-primary;
display: block;
z-index: 3;
transition: all 150ms ease-in-out;
transition: opacity 150ms $ease-inout;
}
}

6
src/style/organisms/_photos.scss
View File

@@ -105,6 +105,12 @@
}
}
}
// Number
&__image--number {
transform: translate(-50%, var(--translate));
will-change: transform;
}
}
// Pagination

6
src/style/tools/_mixins.scss
View File

@@ -28,19 +28,19 @@
// Center vertically
@mixin center-y {
top: 50%;
transform: translate3d(0,-50%,0);
transform: translate(0, -50%);
}
// Center horizontally
@mixin center-x {
left: 50%;
transform: translate3d(-50%,0,0);
transform: translate(-50%, 0);
}
// Center vertically and horizontally
@mixin center-xy {
top: 50%; left: 50%;
transform: translate3d(-50%,-50%,0);
transform: translate(-50%, -50%);
}
// Smooth fonts