-2

Quero colocar um efeito de zoom ou a imagem ir surgindo com JavaScript. No HTML tem uma div, e seu fundo são as imagens. Com a JS eu mudo as imagens de segundos em segundos. Mas as imagens estão aparecendo de forma muito "abrupta" e eu gostaria de colocar um efeito de surgir ou zoom a cada vez que a imagem for trocada.

var time = 0;
setInterval(mudarDiv, 3000);

function mudarDiv(){
  var div = document.getElementById("slide");
  var txt = document.getElementById("titulo");

  switch(time){
    case 1: 
        div.src = div.style.backgroundImage = "url('img/carro.jpg')";
        
        txt.src = txt.innerHTML="Proteja seu carro!";
        break;
    case 2:
        div.src = div.style.backgroundImage = "url('img/emprego.jpg')";
        txt.src = txt.innerHTML="Seguro desemprego ideal!";
        break;
    case 3:
        div.src = div.style.backgroundImage = "url('img/vida.jpg')";
        txt.src = txt.innerHTML="Sua família mais segura!";
        break;
    case 4: 
        div.src = div.style.backgroundImage = "url('img/casa.jpg')";
        txt.src = txt.innerHTML="O Seguro ideal para sua casa!";
        break;
    case 5:
      time = 0;  
  }
  time++;
}

1 Resposta 1

-2

Já tentou efetuar essa função com css creio que seja mais fácil criando uma classe e criando o formato do zoom exemplo abaixo

.zoom {
    overflow: hidden;
}

.zoom img {
    max-width: 100%;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.zoom:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.text-item {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

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 .