3

Olá, estou tentando fazer em Javascript uma função que dê um zoom bem lento na minha imagem, ou seja, aumentando meu background-size lentamente, para dar impressão de movimento na imagem.

Tentei fazer essa função, mas ao rodar o site, fiquei sem nenhum sucesso.

function zoomLento(){
     var imagem = document.getElementById("imagem");
    for (var i = 100; i <= 200; i++){
        setTimeout(function(){
            imagem.style.backgroundSize = i;
        }, 10 * (i / 10))
    }
} 
2
  • usa o this.is(":hover") = this.style.scale(2); e no css da um transition:scale Ns ease-in-out; (apenas usando hover como exemplo, tu pode usar tranquilamente outros atributos/propriedades/funções nativas) Commented 16/01/2017 às 12:43
  • w3schools.com/css/css3_2dtransforms.asp Commented 16/01/2017 às 12:45

2 Respostas 2

3

Eu uso CSS transform para esse efeito

.div-com-bg{
    width: 200px;
    height: 200px;
    background-image: url(https://placehold.it/200x200);
    background-size: 100%;
    background-position:center center;

    transition: background-size 1s ease-in;
    -moz-transition: background-size 1s ease-in;
    -ms-transition: background-size 1s ease-in;
    -o-transition: background-size 1s ease-in;
    -webkit-transition: background-size 1s ease-in;

}

.div-com-bg:hover,
.div-com-bg.ativado{
    background-size: 150%
}

Eu fiz esse jsfiddle pra você ver como fica o efeito: https://jsfiddle.net/2utzegxf/1/

4
  • 1
    uma alternativa também é alterar a scale do elemento :) Commented 16/01/2017 às 12:38
  • O efeito não funcionou como esperado aqui :/ O meu css acusou erro na parte do background-size 20s e também só quando eu boto o mouse em cima da imagem que o zoom acontece. E ainda o zoom ta trocando pra background-size: 150% direto, ficando bem estranho. Alguma solução?
    – Nicolas S.
    Commented 16/01/2017 às 23:42
  • Viajei na maionese, coloquei transform ao invés de transition ... vou revisar o código e atualizar a resposta Commented 17/01/2017 às 11:24
  • Agora sim ta funcionando =) Commented 17/01/2017 às 11:37
1

Testei aqui e aparentemente funcionou com este código:

function zoomLento(){
    var imagem = document.getElementById("imagem");
    for (var i = 100; i <= 200; i++){
        setTimeout(function(){
            zoom(imagem);
        }, 100 * (i / 10))
    }
}

function zoom(image){
    var width = image.width + 1;
    image.style.width = width + 'px';
    image.style.height = 'auto';
}

zoomLento();

Onde na função zoom eu adiciono 1 px cada vez que ela é chamada, e na função zoomLento eu chamo a função zoom 200 vezes, aumentando o tempo entre elas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .