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

🐛 Setup page transitions

Browse Source 
Bugged for some reason, the old page stays before the new page loading at the end
This commit is contained in:
Félix Péault
2021-11-17 21:54:22 +01:00
parent 1b181b92fc
commit 8b4070aeb2
12 changed files with 140 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/style/pages/_location.scss
View File

@@ -6,7 +6,6 @@
.location-page__intro {
position: relative;
background: $color-primary;
// padding-top: clamp(100px, 25vw, 400px);
@include bp (sm) {
padding-top: clamp(40px, 14vw, 320px);
@@ -154,19 +153,29 @@
position: absolute;
z-index: 1;
top: 0;
left: 50%;
left: 0;
right: 0;
width: clamp(320px, 100vw, 2560px);
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
transform: translate3d(-50%, 0, 0);
margin: 0 auto;
overflow: hidden;
transform-origin: top center;
div {
width: 100%;
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
transform: translate3d(0, var(--parallax-y), 0);
transition: transform 0.7s var(--ease-quart);
will-change: transform, opacity;
@include bp (sm) {
background-image: var(--illus-desktop);
}
@include bp (xl) {
background-image: var(--illus-desktop-2x);
@include bp (sm) {
background-image: var(--illus-desktop);
}
@include bp (xl) {
background-image: var(--illus-desktop-2x);
}
}
}