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

Create a functioning carousel

Browse Source 
Thanks a million to Grafikart!
This commit is contained in:
Félix Péault
2020-02-17 22:33:44 +01:00
parent 6551aa738a
commit 6fb6937c1a
4 changed files with 172 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
// Carousel
.carousel {
background-color: $color-primary;
transform: translateZ(0);
.wrap {
max-width: 1280px;
@@ -12,7 +11,10 @@
}
}
// Gallery
/*
** Gallery
*/
.gallery {
position: relative;
z-index: 2;
@@ -25,96 +27,122 @@
max-width: 100%;
}
// Variables
$scale: 0.9;
$angle: 1deg;
$angleHover: 1.25deg;
$distance: 9%;
$distanceHover: 10%;
$radius: 8px;
// Images
&__images {
position: relative;
height: 0;
padding-bottom: calc(100% / 1.5); // Ratio 3.2
user-select: none;
// Photo
&--photo {
opacity: 0;
overflow: hidden;
position: absolute;
display: block;
background-color: $color-primary;
box-shadow: 0 15px 60px rgba(#000, 0.3);
transition: transform 600ms $ease-quart;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale($scale);
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: transform 600ms $ease-quart, opacity 600ms $ease-quart;
will-change: transform, opacity;
@include breakpoint (sm) {
border-radius: 8px;
border-radius: $radius;
}
img {
opacity: 0;
position: relative;
z-index: 1;
display: block;
height: auto;
width: 100%;
opacity: 0.6;
transition: opacity 600ms $ease-quart;
height: auto;
}
// Temp hiding
&:nth-of-type(4), &:nth-of-type(5) {
display: none;
// Overlay
&:before {
opacity: 0;
content: "";
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-primary;
}
}
// Active photo
.active {
opacity: 1;
z-index: 10;
top: 50%;
left: 50%;
width: 100%;
transform: translate3d(-50%, -50%, 0);
transform: scale(1);
img {
opacity: 1;
}
}
// Variables
$hoverAngle: 1.25deg;
$hoverDistance: 7%;
// Previous & next photo
.prev, .next {
opacity: 1;
img {
opacity: 1;
}
&:before {
opacity: 0.4;
}
}
// Previous photo
.prev {
z-index: 8;
@include breakpoint (sm) {
top: 50%;
transform: translate3d(-6%, -50%, 0) rotate(-1deg);
width: 85%;
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
}
// Hover
&.hover {
transform: translate3d(-$hoverDistance, -50%, 0) rotate(-$hoverAngle);
img {
opacity: 0.8;
}
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
}
}
// Next photo
.next {
z-index: 9;
@include breakpoint (sm) {
top: 50%;
right: 0;
transform: translate3d(6%, -50%, 0) rotate(1deg);
width: 85%;
transform: translate($distance, -1%) rotate($angle) scale($scale);
}
// Hover
&.hover {
transform: translate3d($hoverDistance, -50%, 0) rotate($hoverAngle);
img {
opacity: 0.8;
}
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
}
}
}
}
// Controls (arrows)
/*
** Controls (arrows)
*/
&__controls {
display: none;
@@ -237,8 +265,6 @@
&__image {
width: 100%;
height: 100%;
// display: flex;
// justify-content: center;
overflow: auto;
img {

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

@@ -48,12 +48,10 @@
}
}
// Gallery
.gallery {
&__images {
&--photo {
background-color: $color-secondary;
}
// Photos
.gallery__images--photo {
&:before {
background-color: $color-secondary;
}
}
}

14
src/style/pages/_viewer.scss
View File

@@ -13,7 +13,10 @@
width: 100%;
}
// Top part
/*
** Top part
*/
&__top {
position: absolute;
z-index: 10;
@@ -57,13 +60,16 @@
}
}
// Carousel
/*
** Carousel
*/
.carousel {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate3d(0, -37%, 0);
transform: translateY(-37%);
margin: 0;
@include breakpoint (sm) {
@@ -83,7 +89,7 @@
// Specific box shadow for images
&__images {
&--photo {
box-shadow: 0 16px pxVW(40) rgba(#2E025C, 0.4);
box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
}
}
}