Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: TickTack en 19 Febrero 2019, 15:32 pm



Título: javascript - Imagen fade in
Publicado por: TickTack en 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:
<!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


Título: Re: javascript - Imagen fade in
Publicado por: srWhiteSkull en 19 Febrero 2019, 19:45 pm
Código
  1. <!DOCTYPE html>
  2.  <title>Ejemplo de animación en CSS</title>
  3.  <meta charset="UTF-8">
  4.  <style>
  5.    .zoom {
  6.        display: block;
  7.        height: 60px;
  8.        width:  468px;
  9.        margin-left: auto;
  10.        margin-right: auto;
  11.        animation-name: zoom;
  12.        animation-duration:5s;
  13.    }
  14.  
  15.    @keyframes zoom {  
  16.        0% {
  17.            height: 0px;
  18.            width:  0px;
  19.        }
  20.  
  21.        100% {
  22.            height: 60px;
  23.            width:  468px;            
  24.        }
  25.    }
  26.  </style>
  27. </head>
  28.    <div>
  29.        <img class="zoom" src="https://media.giphy.com/media/l41lLf17l7YCZ4Tjq/giphy.gif">
  30.    </div>
  31. </body>
  32. </html>