|
<!-- |
|
|
|
|
|
BAD EXEMPLE WITH window.onscroll |
|
BAD EXEMPLE WITH window.onscroll |
|
BAD EXEMPLE WITH window.onscroll |
|
|
|
|
|
--> |
|
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset='utf-8'> |
|
<title>Slow scroll effect</title> |
|
<link rel="stylesheet" href="fse.css"> |
|
</head> |
|
<body> |
|
<div id="wrapper"> |
|
<section> |
|
<article> |
|
<h1>SCROLL DOWN</h1> |
|
</article> |
|
</section> |
|
<section class="stick"> |
|
<article> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
|
|
</article> |
|
</section> |
|
<section class="stick"> |
|
<article> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
</article> |
|
</section> |
|
<section> |
|
<article> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod |
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, |
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo |
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse |
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non |
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
|
</article> |
|
</section> |
|
</div> |
|
<script> |
|
|
|
|
|
|
|
// BAD CODE ! |
|
// This is the counter example |
|
|
|
|
|
|
|
|
|
|
|
var lastPosition = -1 |
|
, wHeight = window.innerHeight |
|
, wrapper = document.getElementById("wrapper") |
|
, elements = document.getElementsByTagName("section") |
|
, size = elements.length |
|
, matrix = [] |
|
|
|
// Pre calculate sizes to get better perfs |
|
function sizes(){ |
|
wHeight = window.innerHeight |
|
var i = 0 |
|
for (i =0; i<size; i++){ |
|
matrix[i] = matrix[i] || { el: elements[i] } |
|
|
|
// Reinit |
|
matrix[i].el.style.display = "block" |
|
lastPosition = -1 |
|
|
|
matrix[i].height = matrix[i].el.offsetHeight |
|
matrix[i].start = matrix[i-1] ? matrix[i-1].stop : 0 |
|
matrix[i].stop = matrix[i-1] ? matrix[i-1].stop + matrix[i].height : matrix[i].height |
|
matrix[i].isScroll = matrix[i].el.className.indexOf("stick") < 0 |
|
|
|
// If it's sticked but higher than the screen... |
|
if (matrix[i].height - wHeight > 0) matrix[i].gap = matrix[i].height - wHeight |
|
|
|
// Let's find a index |
|
matrix[i].el.style.zIndex = !matrix[i].isScroll ? 10 - i : 100 - i |
|
} |
|
wrapper.style.height = matrix[i-1].stop + "px" |
|
} |
|
window.onresize = sizes |
|
|
|
function setTop(m, t){ |
|
console.log(t) |
|
m.el.style.top = t + "px" |
|
} |
|
|
|
function loop(){ |
|
lastPosition = window.pageYOffset |
|
var i = 0 |
|
for (i =0; i<size; i++){ |
|
// Is it visible right now? |
|
if (lastPosition >= matrix[i].start - wHeight && lastPosition <= matrix[i].stop){ |
|
matrix[i].el.style.display = "block" |
|
if ( |
|
// Is it scrolling? |
|
(matrix[i].isScroll) || |
|
// Or is it stick, but higher than window? |
|
(!matrix[i].isScroll && matrix[i].gap && lastPosition >= matrix[i].start) |
|
) |
|
setTop(matrix[i], matrix[i].start - lastPosition) |
|
} else { |
|
matrix[i].el.style.display = "none" |
|
} |
|
} |
|
} |
|
|
|
// Let's go |
|
sizes() |
|
window.onscroll = loop |
|
|
|
</script> |
|
<style type="text/css"> |
|
section { |
|
transform: none; |
|
-moz-transform: none; |
|
-webkit-transform: none; |
|
} |
|
</style> |
|
</body> |
|
</html> |
Thanks for these insights.
Question though:
Why?
If something did change, these calculations are needed. If we are scrolling, stuff changes all the time... so if we can get smooth animation while stuff is changing, why skip the calculations if they are not needed since we are effectively already fast enough?
It seems to me that if we are fast enough when stuff is changing this optimization would be invisible, whereas is we are not fast enough when things are changing, this optimization isn't going to help us anyway.