9
Indeed demonstrated in the video below Sony Spherize makes it seem as if the photo character is "breathing", there is some way to do it the same, or simulate something similar to CSS?
Link to the video:
Or the most correct would be to create a video animation GIF and put in HTML?
Obs: In the video is a little exaggerated the effect, but I believe you can understand what I’m talking about.
Below the image that suffers the effect simulating the "breath" in the video
9
In principle, there isn’t much to do with CSS in this case, and it would probably be better to have an animation or video Embedded.
In order not to be completely unsolved, 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 a little bit of the formula of this address, but practically remade the rest so that the function is "adjustable" by a parameter.
It is worth noting that it is a proof of concept, and that for animation, this kind of distortion is a bit costly to justify its use.
Test "Live" on CODEPEN.
2
Well, I don’t know how to twist it and I don’t know if it’s possible, but the closest I’ve come is this:
.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 something!!
So I was thinking about doing something with Transform Scale, if it’s possible to do Scale just in the center, I haven’t tried it yet because I’m waiting to see if there’s something more appropriate.
Browser other questions tagged css image animate
You are not signed in. Login or sign up in order to post.
I find it difficult to do this way, a similar way would be to let it decrease and increase slightly. Otherwise I do not know...
– LocalHost
I don’t know much about HTML and CSS, you can use <a href="http://www.w3schools.com/tags/tag_map.asp">tag map</a> and together some Transform in css.
– Breno
It is possible to use this to map the image areas where I can apply a Scale animation?
– Leo Letto
@Leoletto believes so, never etste.
– Breno