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

Add photos reveal on scroll and loading on Photos page

Browse Source
This commit is contained in:
Félix Péault
2021-11-17 21:44:59 +01:00
parent 78cacbcd46
commit d37a88f1ae
2 changed files with 151 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/style/pages/_photos.scss
View File

@@ -2,7 +2,6 @@
.photos {
// Intro Section
&__intro {
overflow: hidden;
margin-bottom: clamp(32px, 7.5vw, 96px);
color: $color-text;
text-align: center;
@@ -14,7 +13,7 @@
line-height: 1;
@include bp (sm) {
margin: -100px 0 0;
margin: -100px 0 0 calc(-1 * clamp(24px, 6vw, 64px));
}
}
// Text
@@ -27,6 +26,13 @@
max-width: 524px;
}
}
// Passed scroll
&.is-passed {
@include bp (sm) {
padding-bottom: 72px;
}
}
}
// Filter
@@ -194,6 +200,37 @@
border-radius: 50vh;
}
}
/*
** States
*/
// Fixed when scrolled pass intro
&.is-over {
--top: 24px;
transform: translate3d(0, calc(-100% - var(--top)), 0);
pointer-events: none;
transition: transform 1.0s var(--ease-quart);
.filter__bar {
pointer-events: auto;
box-shadow: 0 10px 20px rgba(#000, 0.1);
}
@include bp (sm) {
position: fixed;
z-index: 10;
top: var(--top);
left: 0;
right: 0;
}
}
// Visible when scrolling back up
&.is-visible {
transform: translate3d(0,0,0);
pointer-events: auto;
}
}
// Content Block
@@ -265,6 +302,15 @@
// Photo
.photo {
position: relative;
opacity: 0;
transform: translate3d(0, 96px, 0);
transition: opacity 1.2s var(--ease-quart), transform 1.2s var(--ease-quart);
// Hidden state
&.is-visible {
opacity: 1;
transform: translate3d(0,0,0);
}
a {
display: block;
@@ -350,12 +396,12 @@
border-top-left-radius: 8px;
pointer-events: none;
opacity: 0;
transform: translate3d(12%, 23%, 0) rotate(-5deg);
transition: opacity 0.4s var(--ease-quart), transform 1.0s var(--ease-quart);
transform: translate3d(6%, 12%, 0) rotate(-1deg);
transition: opacity 0.5s var(--ease-quart), transform 0.9s var(--ease-quart);
&--small {
border-radius: 6px 6px 0 0;
transform: translate3d(8%, 12%, 0) rotate(-3deg);
transform: translate3d(6%, 12%, 0) rotate(-3deg);
}
}