Menu
Chrome and other browsers have overscroll (also called elastic scroll, or rubber band scroll) for the html element. (See here or here.)
I want an image in the html overscroll as an Easter egg, a bit like the Slack for iOS Easter egg. (See "You are up to date." in the screenshot.)
The CSS
html { background: green; } gives the overflow a color. An image does not work:
html { background: url(image.png); } How can I put an image in the html overflow?
702
You can achieve this result on Safari (I failed to achieve this on other browsers).
<html> <body> <div class="body-wrapper"> Content goes here </div> </body> </html> /* --- Reset rubber effect on the 'html' tag --- */ html { overflow: hidden; height: 100%; } body { height: 100%; overflow: auto; } /* ------------ end reset ------------ */ html { background-color: white; background-image: url("http://www.freebordersandclipart.com/images/EasterEggThree.png"); background-repeat: no-repeat; background-size: 6%; background-attachment: fixed; background-position: 50% 10px; } .body-wrapper { background-color: white; } You must remove the default rubber effect on the html element (since you can't put graphic on the html parent element - there isn't an html parent). body has got a rubber effect and transparent background - lack of background is important since the rubber effect expand this colour and can overlap the Easter egg graphic. .body-wrapper has got background colour to hide the Easter egg.
Here you can see the effect (on the desktop it works only on Safari).
153
There is a cross-browser touch-friendly solution that every front-end developer should know: iScroll by Matteo Spinelli (http://cubiq.org/iscroll-5).
He created a cross-browser simulation of the rubber band effect, that is fully stylable. iScroll can be used for this purpose (as well as many others). I personally use it mostly to create overflow on divs in mobile devices, as they are normally not allowed.
Here is an old-school easter egg using a background image on the #wrapper: http://codepen.io/anon/pen/OXMmgr... JIPPY....JIPPY JIPPY JIPPY!
PS. If you want something that works on 'regular' scroll-wheel scrolling, try this repo: https://github.com/ftlabs/ftscroller
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
