I've created a very plain version of page flip onscroll. I made it to look like turning the pages of a book. It looks OK on browsers I have (Firefox 52.9, Chrome 49, IE8). Though the effect doesn't work on IE8 and similar old browsers, it still doesn't look messy. I want to use this presentation method on a website.
- Are there any parts of the code that I need to create a fallback for?
- Could this page be faster?
- Are there any accessibility concerns?
- Are there any 'Best Coding Practices' that I need to include here?
- Any other improvements?
New Question:
- Will this effect make viewing a page uncomfortable on touch devices?
CodePen: https://codepen.io/ZechariahRaman/pen/NOYbXL/
var h = 0,
r = 1,
y = 0,
yh = 1,
section = document.getElementsByTagName("section"),
d = section[0];
function load() {
h = window.innerHeight;
r = 180 / h;
for (var i = section.length - 1; i >= 0; i--) {
section[i].style.position = "fixed";
}
}
function turn() {
y = window.pageYOffset;
if (y == 0) {
section[0].style.transform = "initial";
}
if (y >= 0 && y < h) {
yh = y;
d = section[0];
section[1].style.transform = "initial";
}
if (y >= h && y < h * 2) {
yh = y - h;
d = section[1];
}
d.style.transform =
"perspective(" + h * 5 + "px) rotate3d(1,0,0," + r * yh + "deg)";
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #274171;
height: 300vh;
}
section {
transform-origin: top;
transition: all 0.3s ease;
}
#p1 {
z-index: 3;
background-color: #d9bd75;
}
#p2 {
z-index: 2;
background-color: #67a893;
}
#p3 {
z-index: 1;
background-color: #353cc9;
}
.page {
margin: 1vh 9vw;
height: 98vh;
width: 80vw;
display: flex;
}
p {
margin: auto;
font-size: 5em;
padding: 0.5em;
color: #fff;
background-color: rgba(19, 41, 79, 0.7);
}
<body onload="load()" onresize="load()" onscroll="turn()">
<section id="p1" class="page">
<p>Hi</p>
</section>
<section id="p2" class="page">
<p>Short Story</p>
</section>
<section id="p3" class="page">
<p>The End</p>
</section>
</body>