Para este pequeño tutorial vámos a crear una caja flotante con un efecto de transición empleando las bondades del CSS3 (Más información en http://www.w3.org/TR/css3-transitions/). Su uso bien puede ser para generar un banner publicitario o simplemente para manejar un menú que acompañe al usuario en la navegación de la página cada que efectúe el scroll.
Manos al código.
Lo primero será crear una estructura base en html simple con la ayuda de algunos div, uno para crear un contenido (generado con Lorem ipsun) y el correspondiente a la caja flotante:
<html>
<head>
<title>Caja flotante</title>
</head>
<body>
<div id="flotante">
¡Hola! soy una ventana flotante
</div>
<div id="contenedor">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac sem ut lectus rhoncus mattis bibendum vel nisl. Morbi elementum laoreet vulputate. Nam semper risus id mauris venenatis tristique. Pellentesque volutpat turpis non dolor consectetur ac mattis metus interdum. Sed id magna erat, iaculis porta lorem. Nam eu felis quis erat gravida hendrerit nec ut urna. Quisque leo felis, placerat pretium vestibulum sed, lacinia et enim. Curabitur at erat id mauris commodo suscipit in quis eros. Vivamus a dolor quam, quis aliquam leo. Nam bibendum sollicitudin condimentum. Proin turpis dui, volutpat nec accumsan sit amet, scelerisque non orci. Nam id diam at enim fringilla condimentum. Pellentesque nec metus eros, et malesuada erat. Vestibulum facilisis dui est, nec porta tellus.
Nam sed laoreet nulla. Etiam sit amet leo vel risus ultrices hendrerit ut sed elit. In in odio metus. Vivamus commodo justo vitae justo mollis ac rutrum mi ultrices. Ut commodo libero non magna convallis cursus. Suspendisse vestibulum tortor sit amet justo consequat ornare. Integer dictum, erat sit amet semper auctor, odio magna lacinia neque, vitae ultricies eros eros vitae diam.
Duis volutpat elit eget tellus posuere viverra. Cras quis elementum diam. Nunc hendrerit adipiscing semper. Proin erat ante, malesuada eget malesuada iaculis, laoreet sed justo. Proin sollicitudin tincidunt mauris, eu scelerisque mi scelerisque ut. In accumsan, turpis non luctus ornare, ante sem scelerisque dolor, quis ultricies nulla mi id massa. Nunc tempus egestas orci et sodales. Integer gravida lorem quis dui vulputate euismod. Quisque imperdiet tincidunt felis, a semper turpis pulvinar ac. Morbi lobortis nulla bibendum tortor cursus euismod. Vivamus vitae mauris massa. In accumsan nulla vulputate magna rhoncus nec vehicula sem convallis. Mauris in sagittis metus. Aliquam eleifend pharetra vulputate. Sed nunc dolor, gravida sed ultrices nec, luctus quis velit.
Vivamus id est sapien. Nam gravida eleifend mi, id consectetur nunc dictum in. In hac habitasse platea dictumst. Nulla facilisi. Nullam nec egestas odio. Curabitur dictum venenatis tincidunt. Aenean pulvinar leo lacus, non adipiscing mauris. Fusce vitae magna nulla. Praesent fringilla diam nec risus viverra sollicitudin. Nunc pharetra felis ultrices lorem dictum ullamcorper. Integer pellentesque lacus imperdiet enim dictum feugiat. Pellentesque et velit mauris. Maecenas vel tellus elit, id rhoncus diam. Proin pretium egestas vestibulum. Proin mattis, diam sed molestie scelerisque, elit sem suscipit neque, in pulvinar mi est eget orci.
Duis sagittis porttitor dapibus. Proin vulputate lectus nisl, iaculis elementum risus. Etiam condimentum lacus quam. Sed eget urna eget tortor dignissim molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed volutpat ante ut felis volutpat ut consectetur nunc lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam ullamcorper enim vitae eros faucibus vel viverra nisl dictum. Nulla consequat, purus quis facilisis suscipit, arcu urna consequat lacus, eu euismod dolor velit eget elit. Cras ac urna purus. Proin sit amet sem vitae erat euismod condimentum. Curabitur turpis mi, posuere in molestie quis, dignissim non enim.
</p>
</div>
<body>
</html>
A cada div le he agregado un identificador para aplicar los estilos, que van desde alineación, color, fuente y un plus a nuestra caja flotante con un redondeado:
html, body {
width: 100%;
height: 100%;
margin: 0px;
background-color: #d3d3d3;
font-family: Arial;
}
#contenedor{
width: 300px;
left: 50%;
margin-left: -150px;
position: absolute;
height: 100%;
text-align: justify;
}
#flotante{
top: 50%;
width: 100px;
height: 60px;
margin-top: -30px;
margin-left: 10px;
position: fixed;
background-color: #3E6DD3;
transition: width 1s;
-webkit-transition: width 1s;
border-radius: 5px;
-webkit-border-radius: 5px;
}
#flotante:hover{
width: 200px;
}
Breve explicación.
El real secreto de la ventana flotante es su posición fixed, pues esta permite que se sobreponga a los demás contenedores que hayan dentro de la página, dando esa posiblidad de permanecer estática en donde esté, para este caso centrada verticalmente.
La transición es lograda con estas dos líneas:
transition: width 1s;
-webkit-transition: width 1s;
por compatibilidad se emplean ambas, en navegadores de versiones anteriores quizá encuentren declaraciones para cada tipo, como lo era el caso de Mozilla con -moz-transition o por ejemplo Opera con -o-transition el webkit permanece para Chrome y Safari. Hoy en día navegador actualizado que se respete debe funcionar con la sola instrucción transition. Dicha transición se asigna al ancho y su duración es de un segundo.
Relativamente sencillo y más si se compara con JavaScript, para este ejemplo obviamente.
Así que eso es todo, pueden crear el estilo dentro de un archivo aparte o dentro del mismo documento, el contenido del div lo determinan ustedes, puede ser texto, imágenes o enlaces.
Saludos!
