É possível fazer este efeito com CSS? – css imagem animate

Pergunta:


Com efeito demonstrado no vídeo abaixo Sony Spherize faz parecer como se o personagem da foto estivesse “respirando”, existe alguma forma de fazer igual, ou simular algo parecido com CSS?

Efeito

Link para o vídeo:

https://youtu.be/e-jWOFOGgwM

Ou o mais correto seria criar um GIF da animação do vídeo e colocar no HTML?

Obs: No vídeo está um pouco exagerado o efeito, mas acredito que dê pra entender sobre o que estou falando.

Abaixo a imagem que sofre o efeito simulando a “respiração” no vídeo

Personagem Goku

Autor da pergunta Leo Letto

Em princípio, não tem muito o que fazer com CSS neste caso, e provavelmente seria melhor uma animação ou vídeo embedded.

Pra não ficar completamente sem solução, montei um exemplo de manipulação de imagem com JS e 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);
}

Aproveitei um pouco da fórmula deste endereço, mas praticamente refiz o resto de forma à função ficar “regulável” por um parâmetro.

Vale notar que é uma prova de conceito, e que para animação, este tipo de distorção é um bocado custoso para justificar seu uso.

Teste “ao vivo” no CODEPEN.

Bom, não sei como distorcer e nem se é possivel, mas o mais proximo que cheguei foi disso:

.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">

Espero que isso ajude em algo!!

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *