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

Reveal photos on scroll on Location page

Browse Source
This commit is contained in:
Félix Péault
2021-11-18 22:06:29 +01:00
parent 7900c124d2
commit fd871d55f9
3 changed files with 93 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/style/organisms/_house.scss
View File

@@ -13,9 +13,11 @@
// Information
&__info {
--delay: 0.2s;
grid-column: 1 / span var(--columns);
margin-bottom: 32px;
padding: 0 20px;
overflow: hidden;
@include bp (mob-lg) {
max-width: min(540px, 85vw);
@@ -27,11 +29,20 @@
max-width: 800px;
}
h2 {
opacity: 0;
transform: translate3d(0, 25%, 0);
transition: transform 1.2s var(--ease-quart), opacity 1.2s var(--ease-quart);
transition-delay: var(--delay);
}
.info {
display: block;
margin-top: 16px;
color: $color-lightgray;
line-height: 1.5;
opacity: 0;
transition: opacity 1.2s var(--ease-quart);
transition-delay: var(--delay);
@include bp (sm) {
margin-top: 24px;
@@ -57,6 +68,8 @@
position: relative;
display: block;
grid-column: 1 / span 17;
opacity: 0;
transition: opacity 2s var(--ease-quart);
@include bp (sm) {
border-radius: 8px;
@@ -69,8 +82,40 @@
img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
height: 100%;
object-fit: cover;
transform: scale3d(1.125, 1.125, 1.125);
transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart);
will-change: transform;
}
// Scale down image on hover
a:hover {
img {
opacity: 0.6;
transform: scale3d(1.03, 1.03, 1.03) !important;
transition-duration: 1.2s;
}
}
}
// Visible state
&.is-visible {
.house__info {
h2 {
opacity: 1;
transform: translate3d(0,0,0);
}
.info {
opacity: 1;
}
}
.house__photo {
opacity: 1;
img {
transform: scale3d(1,1,1);
}
}
}