secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Finally working - separated fixed and flexi height parallaxing to pull it off

Browse Source
This commit is contained in:
James Barnsley
2018-12-19 08:20:21 +13:00
parent fbbd254082
commit cf0ca4b2e1
11 changed files with 13817 additions and 10516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/scss/components/_parallax.scss
View File

@ -7,17 +7,19 @@ $parallax: 'parallax';
right: 0;
height: 100%;
max-height: 60vh;
z-index: -1;
&__image {
@include animate(0.5s);
width: 100%;
height: 100%;
position: absolute;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 30%;
opacity: 0;
transform: translateZ(-400px) scale(1.4);
transform-origin: top center;
}
&__overlay {
@ -32,9 +34,20 @@ $parallax: 'parallax';
z-index: 1;
}
&:not(&--boxed) {
&--flexible-height {
/**
* We need to apply the transform on the whole parallax. I think this is because
* our 'frame' is the entire <main> element, rather than a fixed-height sub-element
**/
transform: translateZ(-400px) scale(1.4);
transform-origin: top center;
overflow: hidden;
}
&--fixed-height {
.#{$parallax} {
&__overlay {
&__image {
transform: translateZ(-400px) scale(1.4);
transform-origin: top center;
}