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

[wip] Add reducing side margin effect on Photos when scrolling

Browse Source
This commit is contained in:
Félix Péault
2021-10-12 22:12:24 +02:00
parent 56c523679b
commit db8f984739
3 changed files with 77 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -195,14 +195,36 @@
// Content Block
&__content {
background-color: $color-tertiary;
// margin: 0 12px;
--corners: 8px;
position: relative;
padding: 20px 0;
border-radius: 6px;
background-color: $color-tertiary;
@include bp (sm) {
margin: 0 30px;
padding: 64px 0;
border-radius: 8px;
}
&:before, &:after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
width: 25%;
height: 100%;
background: $color-tertiary;
transition: transform 0.8s var(--ease-quart);
}
&:before {
border-radius: var(--corners) 0 0 var(--corners);
left: 0;
transform: translate3d(calc(-1 * var(--margin-sides)), 0, 0);
}
&:after {
border-radius: 0 var(--corners) var(--corners) 0;
right: 0;
transform: translate3d(var(--margin-sides), 0, 0);
}
}