En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas.
* He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando
Transiciones 
4+ & Mobile
11+
11+
5+
La propiedad transition-duration define el tiempo de duración total de una transición de un estado A a uno B, sea el que sea el estilo que estamos dando.
Ya la propiedad transition-timing-function define el rango el cual la transición ocurre, lo que puede incluir aceleraciones o desaceleraciones. Básicamente, describe cómo la animación ocurre durante el tiempo definido en transition-duration.
En el siguiente ejemplo las 3 cajas tienen la misma transformación, pero usan diferentes valores para transition-timing-function:
En el siguiente ejemplo, haremos intervalos de medio segundo (0.5s) en la ejecución de un estilo através de la propiedad transition-duration:
Transformaciones 3D 4+ & Mobile11+
Este tipo de propiedades aún tienen un soporte limitado (browsers Webkit principalmente, incluyendo móviles) pero se espera que pronto se amplíe (por eso me doy el tiempo de considerarlo en este artículo). El principio básico es el keyframe, y si has usado Flash u otra herramienta de animación (Live Motion, After Effects) comprenderás este concepto:
Un keyframe define el estilo que será aplicado en ese momento dentro de un lapso de animación. El motor de animación del browser interpolará los estilos definidos entre esos keyframes.
Veamos un ejemplo: comenzamos por definir una rotación, dándole un nombre y un comportamiento:
@-webkit-keyframes girando {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
Acabamos de crear un comportamiento para un keyframe y lo llamamos girando. La animación se moverá y rotará en relacion al contenedor que determinemos ahora:
#contenedor {
margin: 30px auto;
-webkit-perspective: 600px;
}
Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D).
Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación:
#girando {
-webkit-animation-name: girando;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 3s;
-webkit-transform-style: preserve-3d;
}
Para girar un grupo de elementos que se posicionan dentro de otro, debemos posicionar estos elementos de manera absoluta y girar cada uno en grados según la cantidad de elementos que sean. La magia no sólo está en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y text-shadow:
Interesante es lo que puedes lograr agregando la propiedad:
-webkit-backface-visibility: hidden;
Donde se oculta la cara del elemento que está al contrario dado el efecto 3D; con esto podemos disminuir la carga del procesador del computador al renderizar esta parte del elemento HTML:
Cambiamos un poco el código para poder hacer rotar un cubo; verás que los únicos cambios han sido meramente estéticos y de rotación del elemento con translateZ(90px). Además, agregamos la animación por lapsus de tiempo, con la cual podremos hacer pausas y definir cuánto y qué cosas se moverán en tales instantes:
@-webkit-keyframes girando {
from,20% { -webkit-transform: rotateY(0deg); }
30%,40% { -webkit-transform: rotateY(90deg); }
50%,60% { -webkit-transform: rotateY(180deg); }
70%,80% { -webkit-transform: rotateY(270deg); }
90%,to { -webkit-transform: rotateY(360deg); }
}
Y para el final, una integración del cubo rotundo anterior con vídeos através de HTML5, en los que puedes ver tienen una gran performance ya que son propiedades nativas (Chrome / Safari):
Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad.
Links:
]]>
Por suerte hacer estos tipos de menúes es bastante fácil: basta con tener claro cómo funcionan los menúes con listas e ir anidando unas dentro de otras; incluso sólo con CSS es suficiente para hacerla funcionar, pero lamentablemente el peor browser de la historia universal (IE6) no soporta pseudo-classes en selectores que no sean links (<a>). Así que lo mejor y que más soporte cross-browser nos entrega es utilizar Javascript en este proceso. Y qué mejor que utilizar jQuery ó Mootools, 2 de los frameworks con los que me gusta jugar.
En este artículo veremos el proceso para crear un menú con tabs y cómo hacerlo funcionar mediante CSS y con la ayuda de Javascript.
Como mencionaba, un menú con tabs se compone básicamente de listas anidadas sobre otras listas. El HTML sería el siguiente:
<ul id="menu">
<li><a href="#">Uno</a></li>
<li class="cabeza"><a href="#">Dos</a>
<ul>
<li><a href="#">Dos.Uno</a></li>
<li><a href="#">Dos.Dos</a></li>
<li><a href="#">Dos.Tres</a></li>
</ul>
</li>
<li><a href="#">Tres</a></li>
<li class="cabeza"><a href="#">Cuatro</a>
<ul>
<li><a href="#">Cuatro.Uno</a></li>
<li><a href="#">Cuatro.Dos</a></li>
</ul>
</li>
</ul>
Si el mundo fuera hermoso y no existiera IE6, nos bastaría con un poco de CSS y selectores avanzados de atributos para hacerlo funcionar:
ul {
list-style: none;
}
ul li {
float: left;
width: 100px;
text-align: center;
}
li.cabeza>ul {
display: none;
}
li.cabeza:hover>ul {
display: block;
}
Para mejorar el manejo del despliegue de los subniveles, le coloqué una class="cabeza" a cada elemento de lista (<li>) que contenga cada nuevo subnivel. Ahora es más fácil diferenciarlas con CSS ó Javascript, como mostraré a continuación. Primero, con jQuery:
$(document).ready(function(){
// primero escondemos todos los subniveles
$('li.cabeza > ul').hide();
// luego le agregamos el evento de mouseover y mouseout mediante hover de jQuery
$('li.cabeza').hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}); });
Muy simple. Ahora, con Mootools (1.11):
window.addEvent('domready', function() {
// creamos una variable 'list' que será el selector <li> con class="cabeza", ya que la usaremos más de una vez.
var list = $$('li.cabeza');
// luego escondemos cada <ul> que esté contenido dentro de li.cabeza mediante display: none
list.getElement('ul').setStyle('display', 'none');
// ahora agregamos los eventos de mouseenter y mouseout respectivos
list.each(function(el) {
el.addEvent('mouseenter', function(){
$(this).getElement('ul').setStyle('display', 'block');
});
el.addEvent('mouseleave', function(){
$(this).getElement('ul').setStyle('display', 'none');
});
});
});
Finalmente si usas un browser bueno, cualquier de los 3 métodos funcionará igual; viene de ti implementarlo de la mejor forma para que tus usuarios que aún usen IE6 para visitar tu sitio puedan disfrutar de una buena navegación y del contenido que ofrece.
]]>$(elemento)
.effects({duration: 1000, transition: Fx.Transitions.Quad.easeInOut})
.start({
’width’: 800,
’height’: 410
})
.chain(function(){
this.start({
’width’: 200,
’height’: 600
})
});
En este ejemplo estoy modificando el tamaño de un #contenedor que tiene dentro una imagen del lápiz posicionado absolutamente; con ello logro que a medida que varían las dimensiones del #contenedor mediante Javascript, simula el movimiento del lápiz con física de movimiento incluída (otra gran gracia de Mootools). Dejé el borde del #contenedor visible para que se aprecie el cambio de tamaño.
Y el resto va por cuenta de la creatividad que le quieran dar, o mejor dicho, encadenar. Pueden realizar muchas acciones y como mencionaba, incluir pausas en lapsus de milisegundos antes de desencadenar la siguiente función, como en el siguiente ejemplo:
$(elemento)
.effects({duration: 3000, transition: Fx.Transitions.Elastic.easeInOut})
.start({
’width’: 600,
height’: 210
}).chain(function(){
this.start({
’opacity’: 0.5
})
}).chain(function(){
this.start({
’opacity’: 1
})
}).chain(function(){
this.start.delay(500, this, {
’height’: 400,
’width’: 200
})
}).chain(function() {
this.start({
’opacity’: 0.5,
’width’: 100,
’height’: 100
});
}).chain(function() {
this.start.delay(1000, this, {
’opacity’: 1,
’width’: 1500,
’height’: 600
})
}).chain(function() {
this.start({
’width’: 100,
’height’: 100
})
});
Dejo claro que estoy utilizando la versión 1.11 de Mootools, que aún está mejor documentada que la más reciente 1.2 y con más ejemplos disponibles.
Links:
]]>
<a href="" id="comienza">Rescata la info</a>
<div id="traelo_aqui">
<p>Trae aquí la info</p>
</div>
Básicamente es un botón que al ser presionado cargará la info desde una página determinada por nosotros mediante JS hasta el div que definimos. Ahora, mediante Mootools crearemos el evento:
$(‘boton’).addEvent(‘click’, function(e) {
e = new Event(e).stop();
var url = "http://www.csslab.cl/ejemplos/ajax_mootools/lipsum.html";
$(‘traelo_aqui’).empty().addClass(‘cargando’);
new Ajax(url, {
method: ‘get’,
update: $(‘traelo_aqui’),
onComplete: function() {
$(‘traelo_aqui’).removeClass(‘cargando’)
}
}).request();
});
Al elemento con id="boton" (o sea, <a id="boton">) le agregamos un evento de ‘click’ (addEvent). De ahí, comenzamos una función que a través del método ‘get’, trae lo que esté en la variable url (var url) y refresca lo que esté adentro del id="traelo_aqui" (o sea <div id="traelo_aqui">). Además, agregaremos una class="cargando" al contenedor mientras se está rescatando la información por si se demora mucho (addClass(‘cargando’);) y cuando termine todo, sacaremos esa class (removeClass). Básicamente esa es la explicación.
]]>
Para esto, con Mootools es extremadamente fácil. Primero, creamos el evento inicial que gatillará la acción cuando los elementos del HTML (DOM) estén cargados. Luego, una codicional (if/else) que me dirá si el browser es IE6, ejecuta tal acción:
window.addEvent(‘domready’, function(){
if(window.ie6){
// haz algo aquí
}
});
A seguir, una lista de las posibilidades de browsers a ser detectables:
- window: cualquier browser.
- window.ie: cualquier Internet Explorer.
- window.ie6: sólo IE6.
- window.ie7: sólo IE7.
- window.gecko: Mozilla Firefox u otro browser que use gecko (Netscape 6+, Flock, Camino, Galeon, Epiphany).
- window.webkit: Apple Safari u otro que use Webkit (iCab, Konqueror, Omniweb, Shiira, Sunrise).
- window.webkit419: Apple Safari 2.
- window.webkit420: Apple Safari 3.
- window.opera: sólo Opera.
Link
]]>
Bueno, la idea es mostrar cómo se hace para que uds. puedan replicarlo según sus necesidades. Comenzaré por el HTML que se constituye de 3 partes: el menú (#menu, que lo pueden hacer cómo se les dé la gana, lo importante son los id‘s de los links), el <div> que albergará las secciones (#dentro, que están posicionadas absolutamente) y el contenedor que funciona como una ventana que esconde el resto (#envoltura esconde con overflow: hidden;):
<ul id="menu">
<li><a id="link1" href="#">Contenido 1</a></li>
<li><a id="link2" href="#">Contenido 2</a></li>
<li><a id="link3" href="#">Contenido 3</a></li>
</ul>
<div id="envoltura">
<div id="dentro">
<div id="contenido1">
<h1>1</h1>
</div>
<div id="contenido2">
<h1>2</h1>
</div>
<div id="contenido3">
<h1>3</h1>
</div>
</div>
</div>
Ya el CSS es lo que ayuda a la magia (obviaré el estilo del #menu):
#envoltura {
overflow: hidden;
height: 300px;
width: 600px;
position: relative;
}
#dentro {
width: 1600px;
height: 1600px;
background: url(imgs/fondo.jpg) center center no-repeat;
position: relative;
}
h1 {
color: #fff;
font-size: 200px;
}
#contenido1 {
position: absolute;
left: 250px;
top: 80px;
}
#contenido2 {
position: absolute;
left: 800px;
top: 1200px;
}
#contenido3 {
position: absolute;
left: 900px;
top: 550px;
}
Y finalmente lo que hace la magia, el JS. Antes que todo se linkea mootools.js, y luego el <script> que podemos configurar a nuestro gusto:
var scroll = new Fx.Scroll(‘envoltura’, {
// envoltura es el id que funciona como ventana
wait: false,
duration: 1000,
// duration es la duración de las transiciones en milisegundos
offset: {‘x’: -230, ‘y’: -20},
// offset es la distancia del eje X Y que mostrará los elementos posicionados
transition: Fx.Transitions.Back.easeInOut
// transition es el tipo de transición que tendrá, ver ejemplos en mootools.net
});
$(‘link1′).addEvent(‘click’, function(event) {
// aqui ya comenzamos a darle cada id del <a>…
event = new Event(event).stop();
scroll.toElement(‘contenido1′);
// …hasta qué id tiene que llegar.
});
$(‘link2′).addEvent(‘click’, function(event) {
event = new Event(event).stop();
scroll.toElement(‘contenido2′);
});
$(‘link3′).addEvent(‘click’, function(event) {
event = new Event(event).stop();
scroll.toElement(‘contenido3′);
});
Bueno, nuevamente les dejo el link al ejemplo final:
]]>