Skip to content

Instantly share code, notes, and snippets.

@gonzalovazquez
Last active March 11, 2016 06:28
Show Gist options
  • Save gonzalovazquez/6244341 to your computer and use it in GitHub Desktop.
Save gonzalovazquez/6244341 to your computer and use it in GitHub Desktop.
A very nifty scroll to play script insipired by Vine.From http://jsbin.com/ocupor/1/edit
var video = document.getElementById('video'),
info = document.getElementById('info'),
fraction = 0.8;
function checkScroll() {
var x = video.offsetLeft,
y = video.offsetTop,
w = video.offsetWidth,
h = video.offsetHeight,
r = x + w, //right
b = y + h, //bottom
visibleX,
visibleY,
visible;
if (window.pageXOffset >= r ||
window.pageYOffset >= b ||
window.pageXOffset + window.innerWidth < x ||
window.pageYOffset + window.innerHeight < y
) {
info.innerHTML = '0%';
return;
}
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
info.innerHTML = Math.round(visible * 100) + '%';
if (visible > fraction) {
video.play();
} else {
video.pause();
}
}
checkScroll();
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment