Hello, I'm trying to make Javascript a function that gives zoom slow in my image, that is, increasing my background-size slowly, to give 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))
}
}
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 for you to see how the effect is: link
I tested it here and apparently it 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 zoom function I call the zoom function 200 times, increasing the time between them.