Having just started develop my first app in Ionic, I tried to implement the image effect seen in many iOS apps, where the top image has this elastic effect when scrolling.
Codepen Demo: http://codepen.io/olach/full/xGGWeW/
Codepen Editor: http://codepen.io/olach/pen/xGGWeW
Having not yet much experience with Ionic and Angular, the quality of the demo could be improved. If someone would like to build upon this demo into something production ready, feel free to do so.
After building my own demo, I found this demo which has a similiar effect:
From that demo I have modified my own demo to also use Translate3D and Scale which improves performance. No browser repaints needed.
Ionic Playground: http://play.ionic.io/app/a9a6aa622475
Codepen Demo: http://s.codepen.io/olach/debug/pJjaEV
Codepen Editor: http://codepen.io/olach/pen/pJjaEV
As I said, I’m no Angular expert, but I think I have written the directive according to the specs.
Hi,
Thank you for your demo it’s work fine. But i see a problem when i load data from outside.
For working perfectly you must add $timeout function like that: http://play.ionic.io/app/7cb4e7367328