pullAndZoom.js is a library that zoom the header while an user pull the body of a mobile page
JavaScript CSS
Latest commit 18541f3 May 11, 2014 @sandropaganotti grammar fixed
Permalink
Failed to load latest commit information.
.gitignore v1.0.0 May 11, 2014
LICENSE Initial commit May 11, 2014
README.md grammar fixed May 11, 2014
app.js v1.0.0 May 11, 2014
avatar.jpg v1.0.0 May 11, 2014
background.jpg v1.0.0 May 11, 2014
demo.css v1.0.0 May 11, 2014
demo.html v1.0.0 May 11, 2014
pullAndZoom.js v1.0.0 May 11, 2014

README.md

Pull and Zoom

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:

Chrome on Android

Demo on Android Chrome

Safari on iOs7

Demo on iPhone

Getting Started

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.

Working Demo

A working demo is available here: pullAndZoom working demo, you can also use this short URL: bit.ly/tws-demo