Faders coloridos con jQuery y CSS3

En este tutorial vamos a utilizar jQuery y sus características de transformación de CSS3 para crear tres faders dinámicos y con efectos. Las técnicas presentadas aquí para la creación de los faders, y las barras variables y dinámicas con CSS, puedes utilizarlos en su totalidad o solo aquellos fragmentos que te interesen para tus proyectos.

También, asegúrate antes de seguir adelante, de descargar el PSD para que puedas crear tus propios colores y formas.

El XHTML

Comenzamos con la parte XHTML de este tutorial. El diseño define la estructura tanto de los faders como de las barras de colores. Todos los elementos se agrupan en el div main, que se sitúa en el centro de la página.

<div class="main">

    <!-- The sliders -->

    <div class="colorful-slider blue">
        <div class="slider-handle"></div>
    </div>

    <div class="colorful-slider green">
        <div class="slider-handle"></div>
    </div>

    <div class="colorful-slider orange">
        <div class="slider-handle"></div>
    </div>

    <div class="cube-area">

        <!-- The colorful bars -->

        <div class="cuboid blue">
            <div class="cu-top"></div>
            <div class="cu-mid"></div>
            <div class="cu-bottom"></div>
        </div>

        <div class="cuboid green">
            <div class="cu-top"></div>
            <div class="cu-mid"></div>
            <div class="cu-bottom"></div>
        </div>

        <div class="cuboid orange">
            <div class="cu-top"></div>
            <div class="cu-mid"></div>
            <div class="cu-bottom"></div>
        </div>

        <!-- The perspective div is CSS3 transformed -->

        <div class="perspective">
        </div>
    </div>

    <!-- Old school float clearing -->
    <div class="clear"></div>
</div>

En el código anterior, puedes observar que, básicamente, tenemos dos estructuras, las cuales están duplicadas tres veces, una por cada color. Tenemos la estructura de los faders, que es un div con dos nombres de clase asignados: colorful-slider, y otro más para cada opción de color. Este último nombre de clase es utilizado posteriormente por jQuery para determinar qué fader afecta al movimiento de la barra.

Dentro del fader está el div slide-handler, el cual será un elemento draggable jQuery UI. El movimiento de dicho fader repercutirá directamente en el cambio de tamaño de las barras.

El segundo grupo es el de las barras de colores. Todos comparten una estructura común: un div cuboid, con otros tres divs dentro de él (para la parte superior, media e inferior). La estructura está organizada de tal manera que el cambio de tamaño del div del medio produce un aumento en la altura de todo el div cuboid.

Por último, tenemos el div .perspective. Esto es para otorgar un aspecto 3D a las barras dinámicas. Lo haremos a través de las transformaciones de CSS3.

El CSS

Dividiremos el código CSS en dos secciones para que sea más sencillo de entender.

.colorful-slider{
	width:6px;
	height:200px;
	border:1px solid #242424;
	position:relative;
	float:left;
	margin:20px 20px 0;

	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
}

/* Three sider colors: */

.colorful-slider.orange{ background:url("img/slider_orange_bg.png") repeat-y; }
.colorful-slider.green{ background:url("img/slider_green_bg.png") repeat-y; }
.colorful-slider.blue{ background:url("img/slider_blue_bg.png") repeat-y; }

.slider-handle{
	position:absolute;
	left:-11px;
	width:28px;
	height:12px;
	background:url("img/slider_handle.png") no-repeat;
	cursor:n-resize;
	top:44%;
}

.cube-area{
	width:400px;
	height:200px;
	background-color:#282828;
	float:left;
	margin:0 0 0 40px;
	padding:20px;
	position:relative;
}

.cuboid{
	/* The three resizable bar divs */
	width:72px;
	position:absolute;
	margin:20px;
	padding:12px 0 9px;
	float:left;
	bottom:-45px;
	z-index:10;
}

Posicionando los divs slider-handle de forma absoluta, mientras sus padres (los divs colorful-slider) están posicionados de forma relativa, nos permite especificar una propiedad top y left que se calculará con respecto a las posiciones de los padres. De esta manera podemos compensar los 11 píxeles a la izquierda para que se centre perfectamente en el fader, a pesar de que éste era más estrecho.

Esta misma técnica se utiliza para fijar las partes superior e inferior del cuboid a sus respectivas posiciones. Con el relleno que insertaremos en la parte de media de cada barra, haremos que su tamaño crezca para dar así la sensación dinámica de estar controlando el aspecto de cada una de las barras con el fader. Todo esto lo haremos única y exclusivamente, con la parte central de cada uno de los cuboid mediante un relleno.

.cu-top{
	/* The top section of the bars */
	position:absolute;
	width:100%;
	top:0;
	left:0;
	height:12px;
	background-repeat:no-repeat;
}

.cu-mid{
	/* The mid section, it is freely resizable */
	background-repeat:repeat-y;
	height:100px;
	width:72px;
}

.cu-bottom{
	/* The bottom part */
	position:absolute;
	width:100%;
	height:9px;
	bottom:0;
	left:0;
	background-repeat:no-repeat;
}

/* Three color themes for the bars */

.cuboid.blue { left:100px;}
.cuboid.blue .cu-top{ background-image:url("img/cuboid_blue_top.png"); }
.cuboid.blue .cu-mid{ background-image:url("img/cuboid_blue_mid.png"); }
.cuboid.blue .cu-bottom{ background-image:url("img/cuboid_blue_bottom.png"); }

.cuboid.green { left:200px;}
.cuboid.green .cu-top{ background-image:url("img/cuboid_green_top.png"); }
.cuboid.green .cu-mid{ background-image:url("img/cuboid_green_mid.png"); }
.cuboid.green .cu-bottom{ background-image:url("img/cuboid_green_bottom.png"); }

.cuboid.orange { left:300px;}
.cuboid.orange .cu-top{ background-image:url("img/cuboid_orange_top.png"); }
.cuboid.orange .cu-mid{ background-image:url("img/cuboid_orange_mid.png"); }
.cuboid.orange .cu-bottom{ background-image:url("img/cuboid_orange_bottom.png"); }

.perspective{
	/* The perspective DIV */
	background-color:#232323;
	position:absolute;
	z-index:1;
	left:0;
	bottom:-55px;
	height:55px;
	width:100%;

	/* Applying CSS3 transformations */
	-moz-transform:skewX(60deg) translate(47px);
	-webkit-transform:skewX(60deg) translate(47px);
	transform:skewX(60deg) translate(47px);
}

A los divs cuboids se les asigna una segunda clase, que especifica su color. Los diferentes colores se logran mediante el uso de imágenes de fondo únicas para sus divs hijos.

La última clase, .perspective, aplica dos transformaciones CSS3 al div. El primero de ellos, skew(60deg), transforma el div para distorsionar la parte de inferior derecha. Se necesita de una corrección, debido a que la inclinación está dividida en partes iguales entre la parte inferior y superior del div, esto hace que el div se salga del alineamiento con el div del fondo. Una traslación corrige este problema, moviendo el div 47px div a la derecha.

El jQuery

Estamos utilizando la versión más reciente de la librería jQuery, 1.12.3, y la librería jQuery UI, las cuales están directamente enlazadas a partir de bibliotecas AJAX CDN de Google y se incluyen en la sección head de la página.

Después de incluir las librerías en la página, podemos escribir el código que te permitirá el efecto de las barras dinámicas.

$(document).ready(function(){
	/* The code here is executed on page load */

	/* Converting the slide handles to draggables, constrained by their parent slider divs: */

	$('.slider-handle').draggable({
		containment:'parent',
		axis:'y',
		drag:function(e,ui){

			/* The drag function is called on every drag movement, no matter how minute */

			if(!this.par)
			{
				/* Initializing the variables only on the first drag move for performance */

				this.par = $(this).parent();
				this.parHeight = this.par.height();
				this.height = $(this).height();
				this.color = $.trim(this.par.attr('class').replace('colorful-slider',''));
			}

			var ratio = 1-(ui.position.top+this.height)/this.parHeight;

			resizeBar(this.color,ratio);
		}
	});
});

function resizeBar(color,ratio)
{
	$('.cu-mid','.cuboid.'+color).height(200*ratio)
}

Aquí se utiliza el método draggable de la jQuery UI, que convierte cualquier div de tu página en un objeto que se puede arrastrar. Lo estamos aplicando a los divs slider-handle mediante la configuración de una serie de opciones. La primera, containment, limita el movimiento del elemento dentro de su padre, el fader en sí. El segundo especifica el eje de movimiento permitido.

También definimos la función drag que se ejecutará en cada movimiento de arrastre. En ella se calcula el cociente de dividir la distancia desde el handle hasta la parte superior del fader. Terminamos con un número entre 0 y 1, que se le pasa a la función resizeBar() junto al color de la barra que vaya a ser afectada.

Con esto coloridos faders con jQuery y CSS3 estarían completos.

Fuente: tutorialzine.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP