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

Carousel: Add a transition on title when changing photo

Browse Source
This commit is contained in:
Félix Péault
2020-02-26 15:58:22 +01:00
parent 17c1e3e930
commit fab89736ed
3 changed files with 62 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,6 +44,8 @@
// Photo
&--photo {
$duration: 0.9s;
opacity: 0;
overflow: hidden;
position: absolute;
@@ -54,7 +56,7 @@
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;
transition: transform $duration $ease-quart, opacity $duration $ease-quart;
will-change: transform, opacity;
@include breakpoint (sm) {
@@ -179,16 +181,23 @@
}
}
// Information
/*
** Information
*/
&__information {
position: relative;
z-index: 3;
// Location
&--location {
text-align: center;
.street {
margin-top: 24px;
color: #fff;
width: 100%;
position: relative;
margin-top: 32px;
height: 30px;
@include breakpoint (sm) {
margin-top: pxVW(80);
@@ -196,16 +205,43 @@
@include breakpoint (xl) {
margin-top: 72px;
}
span {
$distance: 40%;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
white-space: nowrap;
transform: translateY(-$distance);
opacity: 0;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
&.prev {
transform: translateY(-$distance);
}
&.active {
transform: translateY(0);
opacity: 1;
}
&.next {
transform: translateY($distance);
}
}
}
.state {
margin-top: 4px;
color: rgba($color-tertiary, 0.5);
margin-top: 6px;
}
}
}
// Dots for slider (mobile)
/*
** Dots for slider (mobile)
*/
&__dots {
display: none;