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

WIP attempt to fix page transitions, Several edits
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-04-02 16:07:16 +02:00
parent 6f409c5331
commit 730eb75457
34 changed files with 386 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,7 +78,7 @@
background-color: $color-secondary;
svg {
fill: #fff !important;
fill: #fff;
}
.anim {
animation-play-state: running;

2
src/style/atoms/_icon-globe.scss
View File

@@ -19,7 +19,7 @@
}
// Animate by default
&--animated {
&.is-animated {
.anim {
animation-play-state: running;
}

5
src/style/layouts/_main.scss Normal file
View File

@@ -0,0 +1,5 @@
// Main page
.housesof {
transition: opacity 0.4s $ease-quart;
will-change: opacity;
}

195
src/style/organisms/_carousel.scss
View File

@@ -1,6 +1,11 @@
// Carousel
.carousel {
background-color: $color-primary;
overflow: hidden;
@include breakpoint (sm) {
overflow: visible;
}
.wrap {
max-width: 1280px;
@@ -52,7 +57,6 @@
&__photo {
$duration: 1s;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
top: 0;
@@ -60,21 +64,78 @@
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
will-change: transform, opacity, top, left;
@include breakpoint (sm) {
border-radius: $radius;
// Active photo
&.is-active {
opacity: 1;
z-index: 10;
transform: scale(1);
img {
opacity: 1;
}
}
img {
opacity: 0;
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
// Previous & next photo
&.is-prev, &.is-next {
opacity: 1;
img {
opacity: 1;
}
picture:before {
@include breakpoint (sm) {
opacity: 0.4;
}
}
}
// Previous photo
&.is-prev {
z-index: 9;
transform: translate(-40%, 0) scale(0.85);
@include breakpoint (sm) {
z-index: 8;
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
}
// Hover
&.hover {
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
}
}
// Next photo
&.is-next {
z-index: 8;
transform: translate(40%, 0) scale(0.85);
@include breakpoint (sm) {
z-index: 9;
transform: translate($distance, -1%) rotate($angle) scale($scale);
}
// Hover
&.hover {
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
}
}
}
// Picture
&__picture {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
@include breakpoint (sm) {
border-radius: $radius;
}
// Overlay
@@ -91,62 +152,13 @@
background-color: $color-primary;
}
// Active photo
&--active {
opacity: 1;
z-index: 10;
transform: scale(1);
img {
opacity: 1;
}
}
// Previous & next photo
&--prev, &--next {
opacity: 1;
img {
opacity: 1;
}
&:before {
@include breakpoint (sm) {
opacity: 0.4;
}
}
}
// Previous photo
&--prev {
z-index: 9;
transform: translate(-40%, 0) scale(0.85);
@include breakpoint (sm) {
z-index: 8;
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
}
// Hover
&.hover {
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
}
}
// Next photo
&--next {
z-index: 8;
transform: translate(40%, 0) scale(0.85);
@include breakpoint (sm) {
z-index: 9;
transform: translate($distance, -1%) rotate($angle) scale($scale);
}
// Hover
&.hover {
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
}
img {
opacity: 0;
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
}
}
@@ -193,7 +205,7 @@
/*
** Information
** Informations
*/
&__infos {
position: relative;
@@ -232,14 +244,14 @@
}
// States
&--prev {
&.is-prev {
transform: translateY(-$distance);
}
&--active {
&.is-active {
transform: translateY(0);
opacity: 1;
}
&--next {
&.is-next {
transform: translateY($distance);
}
@@ -312,44 +324,3 @@
}
}
}
/*
** Zoomer
*/
.zoomer {
opacity: 0;
pointer-events: none;
position: absolute;
z-index: 101;
top: 0;
right: 0;
left: 0;
bottom: 0;
&.show {
opacity: 1;
pointer-events: auto;
}
// Image
&__image {
width: 100%;
height: 100%;
overflow: auto;
img {
display: block;
height: 100%;
width: auto;
}
}
// Button
.button-control {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
}
}

4
src/style/organisms/_footer.scss
View File

@@ -38,6 +38,7 @@
@include breakpoint (sm) {
display: flex;
align-items: center;
padding-top: 6px;
}
li {
@@ -49,6 +50,7 @@
display: flex;
justify-content: center;
margin-bottom: 32px;
margin-top: 3px;
@include breakpoint (sm) {
margin-bottom: 0;
@@ -56,7 +58,7 @@
}
li {
margin: 3px 20px 0;
margin-right: 20px;
}
a {
display: block;

1
src/style/organisms/_locations.scss
View File

@@ -1,6 +1,7 @@
.browse {
margin-top: 72px;
margin-bottom: 72px;
overflow-x: hidden;
@include breakpoint (sm) {
margin-top: 120px;

6
src/style/pages/_homepage.scss
View File

@@ -50,10 +50,8 @@
}
// Photos
.gallery__photo {
&:before {
background-color: $color-secondary;
}
.gallery__picture:before {
background-color: $color-secondary;
}
}
}

1
src/style/style.scss
View File

@@ -37,6 +37,7 @@
@import "organisms/footer";
// Layouts
@import "layouts/main";
@import "layouts/explore";
// Pages