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

FullScreen API

Es sabido el interés que tienen los Sitios basados en imágenes, fotos ocupando toda la pantalla. Sí, toda la pantalla del monitor completa. Se puede conseguir pulsando la tecla de función [F 11] con el Navegador abierto. También, hay opciones basadas en Flash, HTML5, Canvas… Pero, ¿es posible con JavaScript puro?. La respuesta es, con algunas limitaciones, sí. La compatibilidad con los Navegadores es el otro “Caballo de batalla”. No obstante, vale la pena probar. Para empezar, veamos lo que hay al respecto:

http://sindresorhus.com/screenfull.js/

http://www.thecssninja.com/demo/fullscreen/

http://html5professor.com/tutoriels-18.html

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities

http://stackoverflow.com/questions/7495373/how-to-make-browser-full-screen-using-f11-key-event-through-javascript

Native Fullscreen Plug-in para WP:

http://wordpress.org/extend/plugins/native-fullscreen/

Etc…

Espero que, salvando barreras de idiomas, saquemos algo en claro. Es un tema que está de “actualidad”. Personalmente, he dedicado algún tiempo en los últimos años, me gustaría desarrollar algo sencillo y compatible, en base a lo ya publicado. En fin… Aquí está la primicia:

<!DOCTYPE html>

<html>
<head>
<title>full-screen</title>
<style type=”text/css”>
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<script type=”text/javascript”>
function fullscr() {
if (document.body.requestFullscreen) {document.body.requestFullscreen();}
if (document.body.msRequestFullScreen) {document.body.msRequestFullScreen();}
if (document.body.mozRequestFullScreen) {document.body.mozRequestFullScreen();}
if (document.body.webkitRequestFullScreen) {document.body.webkitRequestFullScreen();}
if (typeof window.ActiveXObject !== “undefined”) {
var wscript = new ActiveXObject(“WScript.Shell”);
if (wscript !== null) {wscript.SendKeys(“{F11}”);}
}
}

function fullcls() {
if (document.exitFullscreen) {document.exitFullscreen();}
if (document.cancelFullscreen) {document.cancelFullscreen();}
if (document.mozCancelFullScreen){document.mozCancelFullScreen();}
if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();}
if (typeof window.ActiveXObject !== “undefined”) {
var wscript = new ActiveXObject(“WScript.Shell”);
if (wscript !== null) {wscript.SendKeys(“{F11}”);}
}
}
</script>
</head>
<body>
<button onclick=”fullscr(); return false”>Fullscreen</button> <button onclick=”fullcls(); return false”>Normal</button>
</body>
</html>

Como dije, tenía pendiente algo sencillo, compatible con: IExplorer 7+, Firefox 20+, Opera 12+, Safari 5+, etc. en Windows. La página del ejemplo ocupa 1,28 Kb. , para que más…

FullScreen API

Imágenes de fondo con efecto Fade

Hemos visto algunos Scripts para cambiar el fondo de un Sitio Web con efectos diversos. Ahora, toca lo del efecto de transición de una imagen a otra de forma progresiva, aumentando y disminuyendo la opacidad. El resultado es muy atractivo, y se consigue con muy pocos recursos, sin enormes Librerías JS, sólo con 1,90 KB (1.950 bytes). Veamos el Script:

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”es” lang=”es”>
<head>
<title>:: BG IMG BIG FADE ::</title>
<meta http-equiv=”Content-Type” Content=”text/html; charset=ISO-8859-1″>
<meta name=”copyright” content=”Copyright © 2011 ScriptShow, All Rights Reserved”>
<meta name=”author” content=”ScriptShow Web https://scriptshow.wordpress.com”&gt;
<meta http-equiv=”imagetoolbar” content=”no”>
<style type=”text/css”>
body {
background:#000000;
font-family:Arial;
color:#FFFFFF;
}

#bgimg {
position:absolute;
position:fixed;
width:100%;
left:0px;
top:0px;
filter:alpha(Opacity=0);
-khtml-opacity:0;
-moz-opacity:0;
opacity:0;
z-index:1;
}

#info {
position:absolute;
position:fixed;
width:400px;
height:22px;
left:10px;
top:10px;
z-index:8;
background:url(‘imgs/blacktrans.png’);
}
</style>

// ===================================
// ScriptShow Web © 2000 – 2011
// https://scriptshow.wordpress.com
// ===================================
var imgnames=new Array(‘imgs/img_01.jpg’,’imgs/img_02.jpg’,’imgs/img_03.jpg’,’imgs/img_04.jpg’,’imgs/img_05.jpg’,’imgs/img_06.jpg’,’imgs/img_07.jpg’,’imgs/img_08.jpg’);

var c=0;
function initimg(){
obj=document.all?document.all(“bgimg”):document.getElementById(“bgimg”);
obj.src=imgnames[c];
if(c = 100){valor=-1}
opac+=valor;
stim=setTimeout(“fadeimg()”, 20);
}

</head>
<body>
<span id=”info”>&nbsp; Pulsa [F11] para maximizar / minimizar &nbsp;</span>
<img id=”bgimg” name=”bgimg” src=”imgs/img_01.jpg” border=”0″ alt=”” title=”” />

fadeimg();

</body>
</html>

Seguiremos haciendo experimentos sencillos, sin derrochar un solo Kb.

Scripts disponibles para descargar. Pulsa aquí

Si lo prefieres, envía un EMail a:

scriptshow@hotmail.com

Imágenes de fondo con efecto Fade

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

Capa fija con CSS-JScript

Se trata de una capa con efecto fade que permanece en primer plano sin afectarle la posición de las barras de scroll. Está realizada en  CSS y JavaScript. Se han añadido unas expresiones para corregir algunos fallos en IE5x, IE6x, etc.

El código es:

<html>
<head>
<style type=”text/css”>

<!–
body {
  background:#EFEFEF url(‘bg’) fixed;
}

#fixelem {
  position:fixed;
  _position:absolute;
  _width:expression(eval(document.body.clientWidth)+0+’px’);
  _height:expression(eval(document.body.clientHeight)+0+’px’);
  _top:expression(eval(document.body.scrollTop)+0+’px’);
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#707070;
  overflow:hidden;
  filter:alpha(opacity=0);-khtml-opacity:0;-moz-opacity:0;opacity:0;
}

//–>
</style>
<script language=”javascript” type=”text/javascript”>
<!– Copyleft 2006 – 2009, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
step=2;
opac=0;
timer=null;

function ImgsFader(){
fadeEl=document.getElementById(“fixelem”);
opac+=step;
if(fadeEl.filters){
fadeEl.filters.alpha.opacity=opac;
}
else{
fadeEl.style.KHTMLOpacity=(opac/100)-0.001;
fadeEl.style.MozOpacity=(opac/100)-0.001;
fadeEl.style.opacity=(opac/100)-0.001;
}
if(opac==70){clearTimeout(timer)}
else{timer=setTimeout(“ImgsFader()”,10)}
}
//–>
</script>
</head>
<body onload=”ImgsFader()”>
<span id=”fixelem” onclick=”this.style.display=’none'”><center><h2>Este texto siempre estará en la parte superior de la página</h2><br><img src=”img.gif” width=”200″ height=”200″></center></span>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
<p>Scroll …</p>
</body>
</html>

Espero sea útil.

Capa fija con CSS-JScript