As shown in the video below, Sony Spherize makes it look like the character in the photo is "breathing", is there any way to do the same, or simulate something like CSS?
Linktovideo:
link
Or would it be better to create a GIF of the video animation and put it in HTML?
Obs: In the video the effect is a bit exaggerated, but I believe you can understand what I'm talking about.
Below the image that suffers the effect simulating the "breath" in the video
In principle, you do not have much to do with CSS in this case, and an embedded video or animation would probably be better.
In order not to be completely without solution, I set up an example of image manipulation with JS and Canvas:
function distorce(idOriginal, idDistorcido, porcentagem) {
var original = document.getElementById(idOriginal);
var ctx = original.getContext('2d');
var pxO= ctx.getImageData(0, 0, canvas.width, canvas.height);
var distorcido = document.getElementById(idDistorcido);
var ctx = distorcido.getContext('2d');
var pxD = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < original.height; y++) {
for(var x = 0; x < original.width; x++) {
var cx = x-original.width/2;
var cy = y-original.height/2;
var r = Math.sqrt(cx*cx+cy*cy);
var maxr = Math.min(original.width,original.height)/2;
if (r>maxr) {
var dx = x;
var dy = y;
} else {
var a = Math.atan2(cx,cy);
var k = (r/maxr)*(r/maxr)*porcentagem/200+(200-porcentagem)/200;
var dx = Math.floor(Math.cos(a)*r*k+maxr);
var dy = Math.floor(Math.sin(a)*r*k+maxr);
}
pxD.data[(x+y*original.width)*4 ] = pxO.data[(dx+dy*original.width)*4 ];
pxD.data[(x+y*original.width)*4+1] = pxO.data[(dx+dy*original.width)*4+1];
pxD.data[(x+y*original.width)*4+2] = pxO.data[(dx+dy*original.width)*4+2];
pxD.data[(x+y*original.width)*4+3] = pxO.data[(dx+dy*original.width)*4+3];
}
}
ctx.putImageData(pxD, 0, 0);
}
I took some of the formula from this address , but practically remake the rest so that the function is "adjustable" by a parameter.
Worth noting is a proof of concept, and that for animation, this kind of distortion is a bit costly to justify its use.
Live test CODEPEN .
Well, I do not know how to distort or even if it's possible, but the next thing I came up with was:
.img{ height:320px; animation: 3s movimenta infinite;}
@keyframes movimenta{
0%{ height:320px}
50%{ height:360px}
100%{ height:320px}
}<img src="http://i.imgur.com/oXf2YdI.png"class="img">I hope this helps with something !!