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

Attempting CSS-only parallax, take 3

Browse Source
This commit is contained in:
James Barnsley
2018-10-22 21:27:48 +13:00
parent ba3758fde9
commit 0f2fb3c991
10 changed files with 317 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/scss/components/_images.scss
View File

@ -63,12 +63,62 @@
}
}
html,
body {
overflow: hidden;
}
main {
perspective: 2px;
transform-style: preserve-3d;
overflow-y: scroll;
height: 100vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.intro {
overflow: hidden;
}
.parallax {
height: 50vh;
width: 100%;
height: 100%;
overflow: hidden;
background: colour(dark_grey);
position: relative;
position: absolute;
top: -30%;
right: -10px;
bottom: -10px;
left: -10px;
transform: translateZ(-2px) scale(2);
z-index: -1;
&__image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
&__overlay {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background-image: linear-gradient(rgba(24,24,24,0), rgba(24,24,24,1));
z-index: 1;
transform: translateZ(2px) scale(0.5);
}
canvas {
width: 110%;