Looking for some ways to create UI like this

meta
1

Hello!

I’m looking for the way to create the User Interface like this app.

It’s like a when user pull the bottom element, it will stretch the photo on the top and zoom the image inside. Do you have any suggest to make this UI using ionic or css?

Thank you.

2

Should be fairly easy to use the on-scroll event on ion-content/ion-scroll to update the scroll panes background-size to create the zoom effect based on the event gesture distance. You would want to write a directive to handle this properly but here’s a quick and dirty way to achieve it.

<ion-content on-scroll="zoomBackground(event)">
...
</ion-content>

$scope.zoomBackground = function(e) {
    // Very crude but get's the idea across
    e.target.style['background-size'] = Math.round(100 + Math.abs(e.detail.scrollTop) / 8) + '%';
};
1 Like