javascript - Imagen fade in

TickTack · 19 Febrero 2019, 15:32 PM

Hola a todos,

aqui podran ustedes dejar que una imagen de su elección se "haga grande"; e. s.: al
comienzo la imagen no es visible en sus páginas principales, pero crece dentro de
poco tiempo hacia el tamaño configurado.

En este javascript pueden configurar tres parametros: la anchura, la altura y la URL
de la imagen. Cuando la imagen se haya cargado en sus páginas principales, se hace
grande y se queda en sus páginas principales en el tamaño configurado.

Deje un imagen gif en el ejemplo.

Codigo:

Código [Seleccionar]


<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de javascript</title>
  <meta charset="UTF-8">
</head>
<body>
<!-- Presentado por javascripts-gratis.de -->
<script type='text/javascript'>
<!--
// Script by Freddus
// visit my site: http://www.friederklein.de

/////////////////////
var altura = 60;    // Configurar aqui la altura original de la imagen
var anchura = 468;  // Configurar aqui la anchura original de la imagen
var imagensita = "https://media.giphy.com/media/l41lLf17l7YCZ4Tjq/giphy.gif";  // Dirección hacia la imagen
/////////////////////
var contador=0;

function emboque(){
  var pixels;
  document.getElementById("miimagenzoom").height = document.getElementById("miimagenzoom").height+altura/20;
  document.getElementById("miimagenzoom").width = document.getElementById("miimagenzoom").width+anchura/20
  if (contador<20){
    setTimeout("emboque()",50);
  }// Fin del if
  contador++;
}//Fin del emboque

function initimagen() {
 document.write('<div align="center">');
 document.write('<img height="0" width="0" id="miimagenzoom" src="'+imagensita+'" onload="emboque();">');
 document.write('</div>');
}
//-->
</script>
<script type="text/javascript">initimagen();</script>
<!-- Presentado por javascripts-gratis.de -->

</body>
</html>

Página web: https://drive.google.com/open?id=1xbHiakrS5S76b8X_gtd22BIdVA2AFzCp

Autor: Freddus

Saludos

srWhiteSkull · 19 Febrero 2019, 19:45 PM

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de animación en CSS</title>
  <meta charset="UTF-8">
  <style>
    .zoom {
        display: block;
        height: 60px;
        width:  468px; 
        margin-left: auto;
        margin-right: auto;
        animation-name: zoom;
        animation-duration:5s;
    }
    
    @keyframes zoom {  
        0% {
            height: 0px;
            width:  0px;
        }
        
        100% {
            height: 60px;
            width:  468px;            
        }
    }
  </style>
</head>
<body>
    <div>
        <img class="zoom" src="https://media.giphy.com/media/l41lLf17l7YCZ4Tjq/giphy.gif">
    </div>
</body>
</html>

Test Foro de elhacker.net SMF 2.1

javascript - Imagen fade in

TickTack

srWhiteSkull