SummArg | Cursos y recursos para webmasters

17/02/2011

Cómo aplicar un efecto overlay a ciertas partes de nuestra página?

Desde Codrops nos enseñan un tutorial para lograr un efecto overlay con jQuery. Puntualmente el objetivo es lograr cambiar la opacidad de determinados elementos para lograr el efecto, pudiendo seleccionar cuales oscurecer y cuales no.

Demo | Descarga

En principio debemos señalar los elementos a los que vamos a aplicar el efecto. A los elementos que queremos aplicar el efecto fade, le daremos la clase e-fade y a los elementos que queremos que cambie el color le daremos la clase e-color. A todos estos elementos deberemos darles también la clase effect.

Nos quedaría un marcado HTML como el siguiente:

<!-- Anima el color -->
<h2 class="effect e-color">Custom effects with jQuery</h2>
<!-- Anima la opacidad -->
<h2 class="effect e-fade">Custom effects with jQuery</h2>
<!-- Anima ambos -->
<h2 class="effect e-color e-fade">Custom effects with jQuery</h2>

Para el ejemplo de Codrops, utilizan un menu para disparar el efecto y necesitan crear una cuarta clase para manejar el efecto. En este caso asignan la clase menu de la siguiente manera:

<ul id="menu" class="menu">
	<li><a href="#"><img src="images/1.png" alt="1"/></a></li>
	<li><a href="#"><img src="images/2.png" alt="2"/></a></li>
	<li><a href="#"><img src="images/3.png" alt="3"/></a></li>
	<li><a href="#"><img src="images/4.png" alt="4"/></a></li>
	<li><a href="#" id="effect-n"><img src="images/5.png" alt="5"/></a></li>
</ul>
...
<h3class="effect-n">Vapour around me</h3>

Y luego simplemente ubican las llamadas a los archivos jQuery y el código para aplicar efectos a las mencionadas clases antes del cierre de la etiqueta </body>.

<!-- The JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        <script type="text/javascript">
			$(function() {
			/*
			the menu list element,
			the container and content divs
			*/
			var $menu			= $('#menu'),
				$container		= $('#container'),
				$content		= $container.find('.content');
			/*
			lets add the classes effect, e-fade, and e-color to some elements.
			e-fade : this will decrease the opacity of the element
			e-color: this will change the color of the element
			*/
			$content
			.find('p')
			.addClass('effect e-fade')
			.end()
			.find('h1, h2, h3')
			.addClass('effect e-fade e-color');
			/*
			elems is all the elements with class effect.
			overlayEffect is our function / module that will take care of the animations
			*/
			var $elems			= $(document).find('.effect'),
				OverlayEffect 	= (function(){
						//speed for animations
					var speed				= 1000,
						//the event that triggers the effect
						eventOff			= 'mouseenter',
						//the event that stops the effect
						eventOn				= 'mouseleave',
						//this is the color that the elements will have after eventOff
						colorOff			= '#AAAAAA',
						//saves the original color of each e-color element,
						//and calls the methos to initialize the events
						init				= function() {
							$elems.each(function(){
								var $el		= $(this);
								if($el.hasClass('e-color'))
									$el.data('original-color',$el.css('color'));
							});
							initEventsHandler();
						},
						//initializes the events eventOff / eventOn
						initEventsHandler 	= function() {
							$menu
							.delegate('a',eventOff,function(e){
								//relation is the id of the element,
								//and the class of related elements
								var relation	= $(this).attr('id');
								animateElems('off',relation);
								return false;
							})
							.delegate('a',eventOn,function(e){
								var relation	= $(this).attr('id');
								animateElems('on',relation);
								return false;
							});
						},
						//animates the color and / or opacity
						animateElems		= function(dir,relation) {
							var $e	= $elems;
							switch(dir){
								case 'on'	:
									//if there are elements on the page with class = relation
									//then these elements will be excluded for the animation
									if(relation)
										$e	= $elems.not('.'+relation);
									$e.each(function(){
										var $el		= $(this),
											color	= $el.data('original-color'),
											param	= {};
										if($el.hasClass('e-color'))
											param.color		= color;
										if($el.hasClass('e-fade'))
											param.opacity	= 1;
										$el.stop().animate(param,speed);
									});
									break;
								case 'off'	:
									if(relation)
										$e	= $elems.not('.'+relation);
									$e.each(function(){
										var $el		= $(this),
											param	= {};
										if($el.hasClass('e-color'))
											param.color		= colorOff;
										if($el.hasClass('e-fade'))
											param.opacity	= 0.1;
										$el.stop().animate(param,speed);
									});
									break;
							}
						};
					return {
						init				: init
					};
				})();
			/*
			call the init method of OverlayEffect
			*/
			OverlayEffect.init();
			});
        </script>

Dejar un comentario