pullAndZoom.js is a library that zoom the header while pulling a scrollable div, it mimic the behaviour of the profile card of the iOs native Twitter app. A small gif is worth a thousand words:
The library requires iScroll to work properly on Chrome; on iOs it uses the native scroll. If the browser is not supported everything degrades gracefully to a standard scroll.
To use this library you need to initialize it as follow:
window.addEventListener('load',function(){
new pullAndZoom({
// the wrapper of the scrolling area
mainPage: document.getElementById('mainpage'),
// the wrapper of the zooming area
backgroundImage: document.getElementById('background_image')
}).ping();
});
Please refer to demo.html and demo.css in this repository for an example of the HTML and CSS structure required by this library.
A working demo is available here: pullAndZoom working demo, you can also use this short URL: bit.ly/tws-demo