Created
September 5, 2021 14:36
-
-
Save manifestinteractive/f22f03cadb032288bf7e6ecb3de109a4 to your computer and use it in GitHub Desktop.
Fun little easter egg for touch devices that uses overscroll ( rubber banding that happens past scroll bottom ) to reveal hidden content
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Usage: | |
* | |
* const overscroll = new Overscroll(); | |
* overscroll.init('/path/to/image.png'); | |
*/ | |
function Overscroll() { | |
// Check if this is a mobile device that can actually support overscroll | |
var supported = (typeof matchMedia !== 'undefined' && matchMedia('(hover: none)').matches); | |
var $elm; | |
this.init = function(imagePath) { | |
if (supported) { | |
// Create Image | |
$elm = document.createElement('img'); | |
$elm.src = imagePath; | |
// Initial Styling | |
$elm.style.position = 'fixed'; | |
$elm.style.zIndex = 1000; | |
$elm.style.bottom = '-10000px'; | |
// Update Styling after Loading Image | |
$elm.onload = function() { | |
this.style.left = 'calc(50% - ' + (this.width / 2) + 'px)'; | |
this.style.width = this.width + 'px'; | |
this.style.height = this.height + 'px'; | |
this.style.bottom = -(this.height) + 'px'; | |
}; | |
// Add it to Body | |
document.body.appendChild($elm); | |
// Listen for Scroll Event | |
window.addEventListener('scroll', this.scroll); | |
} | |
} | |
this.scroll = function() { | |
if (supported) { | |
var overscroll = (document.documentElement.scrollTop + window.innerHeight) - document.documentElement.scrollHeight; | |
var offset = 100; | |
var translate = overscroll - offset; | |
if (overscroll >= 0 && translate < $elm.height) { | |
$elm.style.transform = 'translateY(' + -(translate) + 'px )'; | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment