Skip to content
Snippets Groups Projects
Commit d0e96444 authored by derheap's avatar derheap
Browse files

Now with parallax!

parent 901b24c2
Branches
Tags 2020
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/bg-all-layers-no-parallax/css/parallax-bg.css
+ 12
− 38
View file @ d0e96444
...@@ -11,6 +11,7 @@ header { ...@@ -11,6 +11,7 @@ header {
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
overflow: hidden;
} }
main { main {
...@@ -42,8 +43,8 @@ main { ...@@ -42,8 +43,8 @@ main {
} }
.rc3-bg-L05-collages { .rc3-bg-L05-collages {
position: absolute; -position: absolute;
height: 100%; -height: 100%;
width: 100%; width: 100%;
z-index: -5; z-index: -5;
} }
...@@ -145,43 +146,16 @@ main { ...@@ -145,43 +146,16 @@ main {
position: fixed; position: fixed;
z-index: -10; z-index: -10;
height: 105%; height: 105%;
height: 105vh;
width: 100%; width: 100%;
width: 100vw;
}
@xsupports (perspective: 1px) {
.rc3-bg-container {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.rc3-bg-L04 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(0);
} }
.rc3-bg-L05 { #debug {
position: absolute; position: fixed;
top: 0; z-index: 9999;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-2px);
}
.rc3-bg-L06 {
position: absolute;
top: 0; top: 0;
right: 0;
bottom: 0;
left: 0; left: 0;
transform: translateZ(-3px); height: 2em;
} width: 50%;
background-color: white;
color: black;
} }
src/bg-all-layers-no-parallax/css/parallax-bg.scss
+ 12
− 37
View file @ d0e96444
...@@ -11,6 +11,7 @@ header { ...@@ -11,6 +11,7 @@ header {
position:fixed; position:fixed;
width:100%; width:100%;
z-index:1; z-index:1;
overflow:hidden;
} }
main { main {
...@@ -56,8 +57,8 @@ $gradient-yellowgreen: #B2FF7C; ...@@ -56,8 +57,8 @@ $gradient-yellowgreen: #B2FF7C;
// Collage #1 // Collage #1
.rc3-bg-L05-collages { .rc3-bg-L05-collages {
position:absolute; -position:absolute;
height: 100%; -height: 100%;
width: 100%; width: 100%;
z-index:-5; z-index:-5;
} }
...@@ -168,42 +169,16 @@ $gradient-yellowgreen: #B2FF7C; ...@@ -168,42 +169,16 @@ $gradient-yellowgreen: #B2FF7C;
position:fixed; position:fixed;
z-index:-10; z-index:-10;
height:105%; height:105%;
height:105vh;
width:100%; width:100%;
width:100vw;
}
@xsupports(perspective: 1px) {
.rc3-bg-container {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
} }
.rc3-bg-L04 { #debug {
position: absolute; position:fixed;
top: 0; z-index:9999;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(0);
}
.rc3-bg-L05 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-2px);
}
.rc3-bg-L06 {
position: absolute;
top:0; top:0;
right: 0;
bottom: 0;
left:0; left:0;
transform: translateZ(-3px); height:2em;
} width: 50%;
background-color: white;
color:black;
} }
src/bg-all-layers-no-parallax/index.html
+ 43
− 31
View file @ d0e96444
...@@ -14,34 +14,7 @@ ...@@ -14,34 +14,7 @@
document.querySelector('html').classList.add('js'); document.querySelector('html').classList.add('js');
}); });
</script> </script>
<style>
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
</style>
</head> </head>
<body > <body >
<div class=""> <div class="">
...@@ -51,11 +24,10 @@ ...@@ -51,11 +24,10 @@
<div class="rc3-bg-L07"></div> <div class="rc3-bg-L07"></div>
<div class="rc3-bg-L06"></div> <div class="rc3-bg-L06"></div>
<div class="rc3-bg-L05-collages "> <div class="rc3-bg-L05-collages ">
<div class="container rc3-bg-L05-container">
<div class="container rc3-bg-L05-container parallax__layer parallax__layer--base">
<div class="rc3-bg-L05-collage--01-googles"></div> <div class="rc3-bg-L05-collage--01-googles"></div>
<div class="rc3-bg-L05-collage--02-hand"></div> <div class="rc3-bg-L05-collage--02-hand"></div>
<div class="rc3-bg-L05-collage--03-baby"></div> <!--<div class="rc3-bg-L05-collage--03-baby"></div>-->
</div> </div>
</div> </div>
...@@ -75,6 +47,7 @@ ...@@ -75,6 +47,7 @@
<header id="header" > <header id="header" >
<div class="rc3-header container mb-3 mt-6"> <div class="rc3-header container mb-3 mt-6">
<a class="rc3-logo" href="http://localhost:8000/index"> <a class="rc3-logo" href="http://localhost:8000/index">
<img src="02a_Logo_web_200px_still.png" alt="Remote Chaos Experience logo" title="Remote Chaos Experience logo"> <img src="02a_Logo_web_200px_still.png" alt="Remote Chaos Experience logo" title="Remote Chaos Experience logo">
...@@ -140,6 +113,7 @@ ...@@ -140,6 +113,7 @@
</form> </form>
</div> </div>
</div> </div>
</header> </header>
...@@ -375,4 +349,42 @@ recorded will be open sourced and will be made avaialable to download.</p></sect ...@@ -375,4 +349,42 @@ recorded will be open sourced and will be made avaialable to download.</p></sect
</div> </div>
<div class="rc3-bg-L03"></div> <div class="rc3-bg-L03"></div>
<div class="rc3-bg-L01"></div> <div class="rc3-bg-L01"></div>
<!--<div id="debug"></div>-->
<script>
let lastPos;
const debug = document.querySelector('#debug');
const body = document.querySelector('body');
const layer01 = document.querySelector('.rc3-bg-L01');
const layer05 = document.querySelector('.rc3-bg-L05-collages');
const layer06 = document.querySelector('.rc3-bg-L06');
const layer10 = document.querySelector('.rc3-bg-L10');
const height = body.clientHeight;
const maxScroll = height - window.innerHeight;
const setTransform = (el, factor) => {
if (el) {
el.style.transform ="translateY("+ window.scrollY * factor + "px)"
}
}
function step() {
if (!lastPos)
lastPos = window.scrollY;
if (lastPos !== window.scrollY) {
scrollFactor = window.scrollY / height
//debug.innerText = window.scrollY +" / " + height + " / " + maxScroll;
setTransform(layer01,1.2);
setTransform(layer05,0.8);
setTransform(layer06,0.5);
setTransform(layer10,-0.04);
}
lastPos = window.scrollY;
if (window.scrollY > maxScroll) {
window.scrollTo(0,maxScroll);
}
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
</script>
</body></html> </body></html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutzerklärung