 |
| Bonito Efecto con JQuery |
Hoy vamos a crear una plantilla de página web con algunas animaciones muy dulce usando jQuery. La idea es tener pequeñas cajas esparcidas alrededor de la parte superior de la página y cuando un elemento del menú se hace clic en los cuadros de animación para formar el área de contenido principal. Vamos a utilizar algunos efectos de animación diferentes que vamos a añadir como opciones para el elemento de menú.
Por lo tanto, vamos a empezar!
1. Vamos a empezar con el código HTML!
En primer lugar, queremos colocar la imagen de fondo con la superposición de la red:
<div id="mb_background" class="mb_background"> <img class="mb_bgimage" src="images/default.jpg" alt="Background"/> <div class="mb_overlay"></div> </div>
El siguiente elemento div se utiliza para aumentar la cajitas con su posición al azar y el grado de rotación
<div id="mb_pattern" class="mb_pattern"></div>
Pondremos un total de 16 cajas (elementos div) en este contenedor.
El menú y el título tendrá la siguiente estructura HTML:
<div class="mb_heading"> <h1>Lack of Color</h1> </div> <div id="mb_menu" class="mb_menu"> <a href="#" data-speed="600" data-easing="easeOutBack">About</a> <a href="#" data-speed="1000" data-easing="easeInExpo">Work</a> <a href="#" data-speed="600" data-easing="easeOutBack">Media</a> <a href="#" data-speed="1000" data-easing="easeInExpo">Contact</a> </div>
Como puede ver, vamos a añadir dos "datos" los atributos que vamos a utilizar para definir la velocidad y el efecto de suavizado que se asociará a la animación de las cajas.
A continuación, vamos a definir la estructura para el área de contenido. Habrá un contenedor principal de la clase "mb_content_wrapper" que contiene todos los envases que han contenido la clase "mb_content" y un período para el cierre de cruz:
<div id="mb_content_wrapper" class="mb_content_wrapper"> <span class="mb_close"></span> <div class="mb_content"> <h2>About</h2> <div class="mb_content_inner"> <p>Some text...</p> </div> </div> <div class="mb_content"> ... </div> <div class="mb_content"> ... </div> <div class="mb_content"> ... </div> </div>
Uno de los elementos de contenido que va a contener una lista de las imágenes:
<div class="mb_content_inner"> <p>...</p> <ul id="mb_imagelist" class="mb_imagelist"> <li><img src="images/small/1.jpg" alt="image1" data-bgimg="images/image1.jpg"/></li> <li><img src="images/small/2.jpg" alt="image2" data-bgimg="images/image2.jpg"/></li> <li>...</li> </ul> <p>...</p> </div>
Y eso es todo el código HTML. Ahora, vamos a hacerlo bonito!
2. Echemos un vistaso al CSS:
En primer lugar, vamos a integrar nuestro reset.css que restablecer todos los estilos básicos, y vamos a definir algunas propiedades principales:
@import url('reset.css');
body{
background:#000;
color:#fff;
font-family: 'PT Sans Narrow', Arial, sans-serif;
}
a{
color:#fff;
text-decoration:none;
}A continuación, vamos a definir los estilos para la imagen que vamos a utilizar como fondo y el patrón de superposición:
img.mb_bgimage{
position:fixed;
left:0px;
top:0px;
width:100%;
opacity:0.8;
z-index:1;
}
.mb_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(../images/pattern.png) repeat top left;
z-index:2;
}Ambas serán de posicionamiento fijo y les daremos la máxima z-index para que realmente mantenerse por debajo de todo lo demás.
Las cajas de poco todos tendrán una altura y anchura de 50 píxeles y que tendrá una posición absoluta:
.mb_pattern div{
position:absolute;
width:50px;
height:50px;
background:#000;
z-index:10;
} La principal partida también se utilizará en términos absolutos como vamos a utilizar una fuente cara de la colección de Google Web Fonts:
.mb_heading h1{
position:absolute;
top:10px;
left:10px;
font-size:86px;
color:#000;
text-shadow:0px 0px 1px #fff;
font-family:"Astloch", Arial, sans-serif;
z-index:4;
}El contenedor de menú se coloca totalmente a la izquierda de la pantalla:
.mb_menu{
position:absolute;
top:154px;
left:0px;
z-index:11;
}Los elementos de enlace dentro del contenedor de menú será cajas de negro con una transición ordenada en vuelo estacionario:
.mb_menu a{
background-color:#000;
margin-bottom:2px;
opacity:0.9;
display:block;
width:98px;
height:98px;
color:#fff;
line-height:98px;
text-align:center;
text-transform:uppercase;
outline:none;
-webkit-transition: all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-transition: all 0.2s ease-in;
}
.mb_menu a:hover{
color:#000;
background-color:#fff;
}El siguiente paso es el estilo de la capa de contenido. Vamos a darle un ancho fijo, la altura y un fondo oscuro semi-transparente. Vamos a ocultar inicialmente:
.mb_content_wrapper{
background:transparent url(../images/bg_menu.png) repeat top left;
width:400px;
height:400px;
position:absolute;
top:154px;
left:200px;
z-index:4;
display:none;
}¿Por qué no sólo tiene que utilizar la opacidad en lugar de una imagen de fondo repetida? En algunos navegadores de todos los elementos hijo herede ese nivel de opacidad y no podemos asignar más para ellos. Por lo tanto, si realmente queremos los elementos internos a ser completamente opaca, es más seguro utilizar una imagen de fondo para el contenedor de los alrededores.
El tramo de cierre poco tendrá el siguiente estilo:
span.mb_close{
position:absolute;
top:10px;
right:10px;
width:11px;
height:12px;
cursor:pointer;
background:transparent url(../images/close.png) no-repeat top left;
opacity:0.8;
}
span.mb_close:hover{
opacity:1.0;
} El área de contenido va a tener algo de relleno y se lo oculta:
.mb_content{
padding:30px;
display:none;
}El título tendrá alguna imagen de fondo de la banda destacan:
.mb_content h2{
font-family:"Astloch";
text-shadow:0px 0px 1px #fff;
font-size:42px;
background:transparent url(../images/line.png) repeat-x bottom left;
padding:0px 0px 5px 0px;
margin-bottom:10px;
}El contenedor siguiente es para el contenido de descanso y será el elemento que vamos a aplicar la barra de desplazamiento personalizado a:
.mb_content_inner{
line-height:24px;
height:268px;
outline: none;
}
.mb_content_inner p{
padding:5px 0px;
}Para la lista de miniaturas de la "Obra" sección, vamos a tener el siguiente estilo:
ul.mb_imagelist li{
float:left;
margin:2px;
cursor:pointer;
}
ul.mb_imagelist li img{
display:block;
opacity:0.3;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-transition: all 0.5s ease-in-out;
}
ul.mb_imagelist li img:hover{
opacity:1.0;
}Como puede ver, vamos a añadir algunos transición a ella, haciendo la vista en miniatura se vuelven opacas sin problemas.
Y eso es todo el estilo principal. (Puedes ver el estilo de la forma y el pie de página en el archivo style.css.)
Vamos a añadir un poco de brío a la cosa!
3. El JavaScript:
Así que la idea principal es crear las cajitas y la dispersión en torno a un área restringida y girarlas. Cuando hacemos clic en un elemento de menú, vamos a hacer los cuadros de animar a una determinada posición y forma del envase el contenido principal. A continuación vamos a mostrar el envase y el contenido respectivo. Al hacer clic en el lapso de cierre, queremos que las cajas se dispersan de nuevo.
En las "obras" de contenidos, tendremos algunas miniaturas que muestran una imagen de fondo al hacer clic sobre ellos.
Por lo tanto, vamos a empezar por el almacenamiento en caché de algunos elementos:
var $menu = $('#mb_menu'),
$menuItems = $menu.children('a'),
$mbWrapper = $('#mb_content_wrapper'),
$mbClose = $mbWrapper.children('.mb_close'),
$mbContentItems = $mbWrapper.children('.mb_content'),
$mbContentInnerItems= $mbContentItems.children('.mb_content_inner');
$mbPattern = $('#mb_pattern'),
$works = $('#mb_imagelist > li'),
$mb_bgimage = $('#mb_background > img'), A continuación, vamos a definir la función "Menú":
Menu = (function(){
...
})();
/*
call the init method of Menu
*/
Menu.init();Así, dentro de nuestra función "Menú", vamos a definir nuestras funciones principales, a partir de un método para inicializar todo el asunto:
var init = function() {
preloadImages();
initPlugins();
initPattern();
initEventsHandler();
},Queremos precarga de las imágenes que tenemos en el "trabajo" de contenido. Los datos de atributos en las miniaturas nos dice, que las imágenes que necesitamos:
preloadImages = function() {
$works.each(function(i) {
$('<img>').attr('src' , $(this).children('img').data('bgimg'));
});
},El jScollPane plugin debe ser iniciada, y vamos a aplicar la costumbre de desplazarse a la zona del contenido interno de la div de contenido cuando llamamos a esto:
initPlugins = function() {
$mbContentInnerItems.jScrollPane({
verticalDragMinHeight: 40,
verticalDragMaxHeight: 40
});
},"InitPattern" al azar el lugar 16 cajas (elementos div) en un área restringida. Nosotros restringimos el área mediante la restricción de los valores superiores y se fue a un cierto rango:
initPattern = function() {
for(var i = 0; i < 16 ; ++i) {
//opacity, random top, left and angle
var o = 0.1,
t = Math.floor(Math.random()*196) + 5, // between 5 and 200
l = Math.floor(Math.random()*696) + 5, // between 5 and 700
a = Math.floor(Math.random()*101) - 50; // between -50 and 50
$el = $('
<div>').css({
opacity : o,
top : t + 'px',
left : l + 'px'
});
if (!$.browser.msie)
$el.transform({'rotate' : a + 'deg'});
$el.appendTo($mbPattern);
}
$mbPattern.children().draggable(); //just for fun
},
</div>Cuando cerramos el área de contenido que desee mover las cajitas de nuevo, repartidos por azar otra vez:
disperse = function() {
$mbPattern.children().each(function(i) {
var o = 0.1,
t = Math.floor(Math.random()*196) + 5,
l = Math.floor(Math.random()*696) + 5,
a = Math.floor(Math.random()*101) - 50;
$el = $(this),
param = {
width : '50px',
height : '50px',
opacity : o,
top : t + 'px',
left : l + 'px'
};
if (!$.browser.msie)
param.rotate = a + 'deg';
$el.animate(param, 1000, 'easeOutExpo');
});
},Vamos a controlar los eventos:
initEventsHandler = function() {
/*
click a link in the menu
*/
$menuItems.bind('click', function(e) {
var $this = $(this),
pos = $this.index(),
speed = $this.data('speed'),
easing = $this.data('easing');
//if an item is not yet shown
if(!$menu.data('open')){
//if current animating return
if($menu.data('moving')) return false;
$menu.data('moving', true);
$.when(openItem(pos, speed, easing)).done(function(){
$menu.data({
open : true,
moving : false
});
showContentItem(pos);
$mbPattern.children().fadeOut(500);
});
}
else
showContentItem(pos);
return false;
});
/*
click close makes the boxes animate to the top of the page
*/
$mbClose.bind('click', function(e) {
$menu.data('open', false);
/*
if we would want to show the default image when we close:
changeBGImage('images/default.jpg');
*/
$mbPattern.children().fadeIn(500, function() {
$mbContentItems.hide();
$mbWrapper.hide();
});
disperse();
return false;
});
/*
click an image from "Works" content item,
displays the image on the background
*/
$works.bind('click', function(e) {
var source = $(this).children('img').data('bgimg');
changeBGImage(source);
return false;
});
},Cuando hacemos clic en una de las miniaturas de la "Obra" sección, queremos que la imagen de fondo a cambio. Así se define:
Esto muestra un elemento de contenido cuando ya hay una muestra:
"OpenItem" mueve las cajas de la parte superior al centro de la página, y muestra el elemento de contenido respectiva:
Y eso es todo! Realmente esperamos que hayan disfrutado el tutorial y les resulta útil!
muy bueno!! voy a tratar de hacerlo :D
ResponderEliminarMucha suerte Rulo cualquier cosa me comentas que tal te fue
ResponderEliminarpodrias publicar el codigo completo como quedaria?
ResponderEliminarexelente tu trabajo me gusto y quisiera aprender a hacerlo
hola. Como se puede activar la seccion de contactenos?
ResponderEliminar