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

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