8

Ask DN: Mimic iOS apps "stretchy" header on the web?

7 years ago from , Design/Development @ Twilio.

I'm trying to find some examples of responsive sites that have accomplished this stretchy header interaction on the web rather than in a native app.

Example: https://nrj.io/stretchy-uicollectionview-headers.

Also seen in the Yelp and Twitter apps. Any help would be awesome.

4 comments

  • Zarino ZappiaZarino Zappia, 7 years ago

    How about this?

    http://jsfiddle.net/zarino/3Vy84/

    I couldn't quite get it working with native scroll events, but the click-and-drag method proves it can be done relatively simply.

    5 points
  • Joe TurnerJoe Turner, 7 years ago

    It would be possible to "pull" the element, with a BG, but I'm not too sure on how one would achieve the stretching effect. It's a nice little task for a Saturday morning!

    1 point
    • Elliott ReganElliott Regan, 7 years ago

      First thing that comes to mind would be a vertically centered background-image, and adjust the height of the moon div with JS.

      0 points