search

oblador / angular-parallax

Lightweight & performant parallax scrolling for angular.js.
http://oblador.github.io/angular-parallax/
MIT License
203 stars 44 forks source link

Example with opacity? #12

Open nickjuntilla opened 10 years ago

nickjuntilla commented 10 years ago

All your examples are with the background. May you please show an example with opacity?

benjamincharity commented 9 years ago

I had to just create my own based on the custom animation docs.

$scope.myOpacity = function(elementPosition) {
  var factor = -0.2;
  var pos = (Math.max(elementPosition.elemY*factor, 0));
  var opacity = pos / 100;

  return {
    opacity: 1 - opacity,
  };
}

Then use it as such:

<img
  src="/my/image/path.jpg"
  alt=""
  du-parallax
  custom="myOpacity"
/>