Experiments

Aquí publicamos varios experimentos creados desde cero. No precisan librerías de terceros. El código y contenidos, ocupa entre 2 y 9 Kb. Funcionan en diversos dispositivos y navegadores. Veamos los ejemplos:

Demo – 1
Demo – 2
Demo – 3
Demo – 4

Continuará…

Anuncios
Experiments

Full Background Simple

Una opción muy simple con igual resultado que ofrecen las librerías, los framewoks, etc… Con unas pocas líneas de código javascript, se puede conseguir ajustar una imagen al tamaño de la pantalla perfectamente. Es compatible con IExplorer, Firefox, Safari, Chrome, Opera, otros dispositivos, etc. El ejemplo:

<!DOCTYPE html>
<html lang=”es-ES”>
<head>
<meta http-equiv=”Content-Type” Content=”text/html; charset=ISO-8859-1″>
<meta http-equiv=”imagetoolbar” content=”no”>
<title>Full Background Image | jScript</title>
<style type=”text/css”>
<!–
*{
margin:0px;
padding:0px;
color:#FFFFFF;
font-size:100%;
font-family:sans-serif;
vertical-align:baseline;
text-rendering:optimizeLegibility;
}
img{
border:0px none;
-ms-interpolation-mode:bicubic;
image-rendering:optimizeQuality;
}
#bg{
position:fixed;
left:0px;
top:0px;
z-index:-100;
}
.bgw{
width:100%;
}
.bgh{
height:100%;
}
h4{
font-size:40px;
}
//–>
</style>
<scr/ipt language=”javascript” type=”text/javascript”>
<!– Copyleft 2006 – 2016, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
function init(){
e=document.getElementById(“bg”);
r=e.width / e.height;
w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

if ((w / h) < r){e.className=”bgh”;}
else {e.className=”bgw”;}
e.onload=function(){init();}
}

window.onload=function(){init();}
window.onresize=function(){init();}
//–>
</scr/ipt>
</head>
<body>
<img id=”bg” src=”back.jpg” alt=””>
<h4>Text</h4>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática…</p>
<p>&nbsp;</p>
</body>
</html>

Full Background Simple

Parallax simple

Hemos visto muchos Parallax a día de hoy; todos muy complejos y dependientes de enormes librerías de terceros…  Pero, la realidad es otra bien distinta: hay quien lo hace posible con un simple Script. ¡Muy SIMPLE!. Compuébalo aquí o aquí

Un experimento  Compatible con IExplorer 8+  (sin <!DOCTYPE html>), otros Navegadores, etc.

parascroll

Coméntanos tu opinión… Seguro que ha cambiado.

Parallax simple

Slide Background Image

Siguiendo con el interesante tema de la imagen de fondo ajustada al tamaño de la ventana del Navegador, traemos aquí un sencillo pero potente Script que, con muy pocos Kb. (menos de 2,5Kb.), realiza unos efectos para presentar imágenes de fondo ajustadas sin perder la proporción original de la imagen. Ésto, se consigue con librerías JS de entre 100-200kb. muy conocidas; pero, se pueden conseguir resultados similares sin derrochar recursos innecesariamente. El desarrollo, creado desde cero, nada tiene que ver con esos framework, se basa en un sólo Script que ocupa un 1% del total.

En fin, vamos a lo práctico:

Bg Img Big

Scripts disponibles para descargar. Pulsa aquí

Si lo prefieres, envía un EMail a:

scriptshow@hotmail.com

Queda abierto cualquier comentario, sugerencia, etc. relacionado con el tema.

Slide Background Image

ScriptShow

Sitio Web con algunos experimentos y scripts propios, al margen de cualquier librería, framework, etc. Desarrollos útiles y sencillos, adaptables a cualquier Sitio sin complicaciones.

Website with some experiments and scripts themselves, independently of any library, framework, etc.. Develop useful and simple, adaptable to any site without complications.

ScriptShow WebSite

ScriptShow WebBlog

ScriptShow Descargas

ScriptShow Correo

ScriptShow

Enlaces relacionados

Este es el apartado más creativo y, que más juego dá al diseñador y/o programador Web. El HTML-DINÁMICO tiene infinitas posibilidades, la imaginación es el límite… En fin, hay que probar. Si crees haber visto todo, es posible que cambies de opinión cuando visites:

http://www.dhteumeuleu.com

http://milov.nl/iambald

http://www.twinhelix.com

http://www.dyn-web.com

http://www.dhtmlsite.com

http://www.dhtmlgoodies.com

Y otras, no demasiadas Webs.

Seguiremos…

http://scriptshow.murcia-region.com/scriptshow

Un Saludo.

Enlaces relacionados