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:
<!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
<!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>