Recreating an animation using jQuery and CSS

Question

I've been working on a scrolling effect for my site that has been driving me crazy, and it's probably not even worth it but I can't stop now.

I have been able to simulate the effect using adobe edge and muse. Can anyone think of a simpler method of creating this effect? The animation can be seen here. As you scroll, the header shape changes and resizes. I have tried doing this with svg animate, div rotation animate, etc. with no luck.

Any help would be appreciated.

Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! — j08691, Oct 07 '15 at 21:19
I have tried that as well... http://stackoverflow.com/questions/32234007/animating-shape-using-snap-svg-and-scrollmagic — Omid, Oct 07 '15 at 21:53

Sabrina · Accepted Answer · 2015-10-08T03:56:41.510

Normally we don't provide full solutions for questions, but I had some free time and this was a pretty fun project. If my answer works for you I hope you'll accept it.

I'm sure there are more efficient ways to do this (manipulating an SVG for example), but I kept this as succinct as I possibly could. This is using CSS and Javascript / jQuery. I'll let the comments in the javascript portion do the explaining.

HTML

<div id="animation">
  <div id="box"></div>
  <div id="ang"></div>
</div>

CSS

#animation {
  width: 500px;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -250px;
}

#box {
  width: 500px;
  height: 125px;
  background: #333;
}

#ang {
  width: 0;
  height: 0;
  border-top: 175px solid #333;
  border-right: 500px solid transparent;
}

Javascript

$(window).scroll(function() {
  var pos = $(window).scrollTop(), // Current scroll position
      max = 300, // How quickly we want the animation to finish (in pixels)
      box = 50, // Collapsed height of the box
      ang = 0; // Collapsed height of the angle

  /* Only make changes if we are within the limit of our max variable
   * If this condition is not met, the box and angle will be collapsed
   * I found this necessary because scrollTop doesn't produce consistent
   * values and quite often the box wouldn't fully collapse */
  if (pos <= max) {
    // Max height - (scroll percentage x (max height - min height))
    box = 125 - (pos / max * 75);
    ang = 175 - (pos / max * 175);
  }

  // Adjust the height of the box and the angle
  $('#box').css({ 'height': box + 'px' });
  $('#ang').css({ 'border-top-width': ang + 'px' });
});

See my JS Bin for a demo.

Recreating an animation using jQuery and CSS

1 Answers1