Skip to main content
adicionou 29 caracteres ao conteúdo
Fonte Link
LeAndrade
  • 9mil
  • 11
  • 29
  • 52

Quero colocar um efeito de zoom ou a imagem ir surgindo com JavaScript. no 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')";

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++;
}

}`

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++;

}`

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++;
}
Fonte Link

Efeito em imagem com JavaScript

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++;

}`