Parallax CSS

Se ha avanzado mucho con las nuevas opciones de CSS y HTML. Las versiones de CSS3 y HTML5, ofrecen posibilidades casi ilimitadas… En lo referente a efectos, el cambio es espectacular. Veamos un Parallax sencillo, casi perfecto.

Anuncios
Parallax CSS

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