How to do slow zoom/zoom effect?

Asked

Viewed 1,156 times

3

Hello, I’m trying to make in Javascript a function that gives a zoom very slow in my image, ie increasing my background-size slowly, to give the impression of movement in the image.

I tried to do this function, but when running the site, I was without any success.

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

  • uses the this.is(":hover") = this.style.scale(2); and in the css of a transition:scale Ns ease-in-out; (only using Hover as an example, you can peacefully use other native attributes/properties/functions)

  • http://www.w3schools.com/css/css3_2dtransforms.asp

2 answers

3


I use CSS Transform for this purpose

.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%
}

I made this jsfiddle so you can see how it works: https://jsfiddle.net/2utzegxf/1/

  • 1

    an alternative is also to change the scale of the element :)

  • The effect did not work as expected here :/ My css error in part of background-size 20s and also only when I put the mouse on top of the image that the zoom happens. And yet the zoom is changing to background-size: 150% straight, getting pretty weird. Any solution?

  • I traveled in mayonnaise, put Transform instead of Transition ... I will review the code and update the answer

  • Now it is working =)

1

I tested it here and it apparently worked with this code:

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();

Where in the zoom function I add 1 px each time it is called, and in the zoomLento function I call the zoom function 200 times, increasing the time between them.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.