1

How do I blur an image in famous? A CSS equivalent of -webkit-filter: blur(5px);.

Bonus points for an example of how to do it within the famous/angular combination.

I was hoping for something like: 

<fa-modifier fa-blur="5">
    <fa-image-surface fa-image-url="coolimage.png" fa-size="[640,320]">
    </fa-image-surface>
</fa-modifier>

After certain actions I'd love to be able to animate from blur to "un-blurred".

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
sday
  • 1,041
  • 14
  • 22
  • As @sday said, CSS is the only way. This is because Famo.us is simply manipulating CSS when it moves Surfaces (divs) around in the page using matrix3d. Opacity just manipulates CSS. Blur is also CSS, but Famo.us has no functions or methods to manipulate it yet, so you can do it yourself manually in the `properties` of a Surface. The new mixed mode that comes out this month will make it possible to render things onto Planes (WebGL Canvas Surfaces for all intents and purposes) and once in WebGL, you can do anything you want with shaders. – trusktr Oct 13 '14 at 04:15
  • Oh, as you yourself said in your own answer. ;P – trusktr Oct 13 '14 at 06:33

2 Answers2

1

So far the only way I've found is to use css.

    <fa-image-surface class="{{blurClass}}" fa-image-url="coolimage.png" fa-size="[640,320]" fa-click="imageClick()">
    </fa-image-surface>

in controller

$scope.blurClass = "blur-in";  // start with no blur
$scope.imageClick = function() {
    $scope.blurClass = "blur-out"; // animate to a blur
}

In .css

.blur-out {
    -webkit-filter: blur(8px);
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.blur-in {
    -webkit-filter: blur(0px);
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}
sday
  • 1,041
  • 14
  • 22
0

Use the fa-canvas-surface, draw an image to the canvas and then use one of the blur algorithms out there. I have seen layering issues with CSS filters and z transforms in some browsers, which prompted me to take the canvas approach. This StackBlur from Quasimondo looks way better than blur CSS filter.

Quasimondo's StackBlur http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

steveblue
  • 455
  • 4
  • 19