Stretchy Headers

ionic-v1
1

Hi there,

I’d like to implement a Stretchy Header Functionality as seen in this GIF:

Currently, what I do on device is to call a Scope Function On Scroll and Adjust the Image Height utilising CSS Calc Function, like so:

VIEW:

/* Call a Function on Scroll to Enlarge, and on Release to Reset Header.  */

<ion-content on-scroll="onScroll()" on-release="onRelease()">


//Actual Image to be Scrolled when Rubberband Scrolling up, similarly to the GIF: 

<div id="header_image" ng-style="{'background' : url('someimage.jpg') center center', 'width' : '100%', 'height' : 'calc(40% + '+dynamic_height+'px)'}"></div>

Controller:

$scope.onScroll = function() {

 //Only do funny stuff when Overscrolling on iOS

 if ($ionicScrollDelegate.getScrollPosition().top < 0)
 {
   //Adjust Height of Header by Scrolled Value
   $scope.dynamic_height = ($ionicScrollDelegate.getScrollPosition().top*-1);
   $scope.$apply();
 }
};

I haven’t yet implemented the Release Function which is supposed to be run, when the User lets go of the Scrolling, and resets the Header image to the initial height (in this case: 40%+0px).

This current Solution is not properly working as the Content resets scroll Position to 0 each time we overscroll, thus resulting in Flickering. I’d be willing to setup a Codepen, but maybe someone can come up with a ready solution already?

2

I have tried and tried but iOS seems buggy here…

i.e. Dynamically changing the CSS of an Element while rubberband scrolling up seems to cause a Flicker of some sort, due to the WebView jumping back to Scrollposition 0 for a second.

Any fix available for this?

3

Hi,
I would recommend a different approach. Instead of changing the height of the element, use transform to translate (and scale if neccesary) to achive the same effect.

Also, to trigger hardware acceleration and have smooth animations without flickering, use translate3d or translateZ(0).

Take a look at this post that describes in more detail how to enable GPU acceleration: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

4

Thank you for the Idea. I tried it, but it doesn’t change the fact that Flickering still occurs. Like I said, as soon as I apply CSS while scrolling (even with translate3d) the whole Page resets to Scroll Position 0 for a brief moment. I don’t know where this is coming from.

5

@adrianmk did you find a solution for this, would really be interested. Thanks.!

6

I’m interested in this also

7

Hey there!
I used this code in my project:

$timeout(function(){
		var scroll = $ionicScrollDelegate.$getByHandle('scroll_bounce_handle');
		var avatar = angular.element(document.querySelector('.profile__avatar'));
		scroll.getScrollView().onScroll = function() {
			var Y = scroll.getScrollPosition().top;
			var scale = (Y <= 0) ? (Math.abs(Y) / 150) + 1 : 1;
			avatar.css('-webkit-transform', 'scale('+scale+','+scale+')');
		}
	});


<div class="profile__avatar"></div>
	<ion-content delegate-handle="scroll_bounce_handle">
		<div class="profile__avatar-placeholder"></div>
</ion-content>

You need to use delegate-handle, otherwise you will get always getScrollPosition().top == 0 (related to https://github.com/driftyco/ionic/issues/3360) and it will not work.
On the next step I’ll make a small directive and post it here.

1 Like
9

Hello! … does anyone have a stretchy headers tutorial for ionic 4 ?