Elastic image

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.


This is impressive. well done to you.

1 Like

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.

1 Like


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