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

Full Screen CSS

Un ejemplo muy sencillo basado en CSS que hice para “Pantalla Completa” con texto en caption translúcido… Una imagen de fondo fija ajustada proporcionalmente al tamaño de la zona visible del navegador, y el texto, incluido en DIVs con fondo translúcido, queda en primer plano.

Veamos aquí el detalle. Pulsando la tecla de función [F 11] se amplía a pantalla completa.
Se puede ver el código fuente completo incluido en la página.

Full Screen CSS

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

Imagen ajustada con proporción

Bueno, cansado de ver cientos de Scripts para ajustar un fondo ó imagen al tamaño de la ventana del navegador, decidí ponerme manos a la obra. Todos conocemos las enormes Librerías (100-200Kb.) para tal menester… Algunos sabemos que se pueden conseguir resultados más que aceptables con muy pocos recursos. Pues sí, casi 100 veces menos y un poco de dedicación, está demostrado aquí:

<!DOCTYPE html>

<html>
<head>
<style type=”text/css”>
#bg {
position:absolute;
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:0px;
min-width:100%;
width:auto !important;
width:100%;
min-height:100%;
height:auto !important;
height:100%;
z-index:-100;
}
</style>
</head>
<body>
<img src=”fondo.jpg” id=”bg” alt=”” title=””>
</body>
</html>

Lo he simplificado al máximo para ver el efecto deseado; no obstante, se puede adaptar para diferentes propósitos: fondo de Web Site, tamaño de imagen según pantalla, etc. Ah, es compatible con varios disposivos y navegadores, incluido IExplorer.

Imagen ajustada con proporción

CMS

CMS son las siglas de (Content Management System) Sistema Administrador de Contenidos. Hay muchos CMS, para diversas aplicaciones. Algunas de las más populares son: Blogs, EComercios, Portales, etc. Elegir bien es tarea difícil, hay que dedicar el tiempo preciso para encontrar lo que mejor se ajusta a nuestro proyecto. Para empezar, podemos visitar algunos sitios relacionados:

Open Source CMS

Planeta CMS

CMS DesignResource

WordPress Español

Joomla Español

Drupal

También quiero destacar algunos proyectos sencillos, alternativos a los mencionados, muy interesantes… Los CMS sin Base de Datos, cumplen un papel fundamental a la hora de construir un Sitio Web dinámico, accesible, rápido, etc. En este sentido, hay opciones que han demostrado estar a la altura de los “grandes”. Ya hemos probado la eficacia y flexibilidad de estos “pequeños” Administradores de Contenidos. Veamos algunos elaces:

CMSimple Web

CMSimple XH

Quick.Cms

la.plume

OneFileCMS

Whizzy CMS

One Page CMS

Pico flat file CMS

Onecore CMS

Esto es un experimento “FullSimple Background Image” adaptado a CMSimple 3.X Si interesa, lo trataremos como un pequeño proyecto.

Ver online

CMS