Skip to content

Instantly share code, notes, and snippets.

@haydenbleasel

haydenbleasel/transfade.js

Last active July 14, 2019 10:23
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save haydenbleasel/9301427 to your computer and use it in GitHub Desktop.
Save haydenbleasel/9301427 to your computer and use it in GitHub Desktop.
Download ZIP
Medium-style vertical fading parallax scroll modifier for Stellar.js
Raw
transfade.js
// Custom transform and opacity modifier for Stellar.js
$.stellar.positionProperty.transfade = {
setPosition: function(element, newLeft, originalLeft, newTop, originalTop) {
var distance = newTop - originalTop;
var rate = $(window).height() / 5;
element.css('transform', 'translate3d(0, ' + distance + 'px, 0').css('opacity', 1 - (distance / rate));
}
};
@FalkoJoseph
Copy link

Awesomecake.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment