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

Animate parallax on load; Experimental Link scrolls to top

Browse Source
This commit is contained in:
James Barnsley
2018-10-24 21:15:57 +13:00
parent 00811f7084
commit 42414b25d3
11 changed files with 10682 additions and 13769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,59 +66,3 @@
.playback-controls {
z-index: 3;
}
.parallax {
overflow: hidden;
background: colour(dark_grey);
position: absolute;
top: -10%;
right: -10px;
left: -10px;
height: 100%;
transform: translateZ(-50px) scale(2);
transform-origin: bottom center;
z-index: -1;
max-height: 80vh;
&__image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-color: lighten(colour(dark_grey), 10%);
}
&__overlay {
content: '';
display: block;
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 100%;
background-image: linear-gradient(rgba(24,24,24,0), rgba(24,24,24,1));
z-index: 1;
}
&--blur {
.parallax__image {
@include blur();
}
}
.light-theme & {
background: colour(white);
&__image {
background-color: colour(white);
}
&__overlay {
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
}
}
}

68
src/scss/components/_parallax.scss Executable file
View File

@ -0,0 +1,68 @@
$parallax: 'parallax';
.#{$parallax} {
overflow: hidden;
position: absolute;
top: -10%;
right: -10px;
left: -10px;
height: 100%;
transform: translateZ(-50px) scale(2);
transform-origin: bottom center;
z-index: -1;
max-height: 80vh;
background-color: lighten(colour(dark_grey), 10%);
&__image {
@include animate(0.5s);
position: absolute;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
opacity: 0;
}
&__overlay {
content: '';
display: block;
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 100%;
background-image: linear-gradient(rgba(24,24,24,0), rgba(24,24,24,1));
z-index: 1;
}
&--blur {
.#{$parallax} {
&__image {
@include blur();
}
}
}
&--loaded {
.#{$parallax} {
&__image {
opacity: 1;
}
}
}
.light-theme & {
background: colour(white);
&__image {
background-color: colour(white);
}
&__overlay {
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
}
}
}