A menudo, en sus tareas de diseño o desarrollo, se le presentan desafíos que requieren un enfoque diferente al de simplemente sumergirse de cabeza en la codificación. La investigación y los experimentos son una parte vital de este proceso.
Es por eso que el tutorial de esta semana está estructurado de una manera ligeramente diferente a la habitual. Primero se nos presentan los principales problemas enfrentados y sus soluciones, y luego pasamos a construir sobre ellos.
Estamos creando un efecto de sesión de fotos con nuestro complemento PhotoShoot jQuery recién lanzado. Con él, puede convertir un div regular en la página en un escenario de toma de fotografías que simula una sensación similar a la de una cámara. Con este complemento, ofrecemos a los visitantes la posibilidad de tomar fotos de la imagen de fondo.
Antes de comenzar con el tutorial, le sugiero que descargue el archivo zip desde los botones de arriba.
Problema 1 - Imagen borrosa
JavaScript no admite el desenfoque de una imagen directamente. Por ejemplo, no existe tal cosa como document.getElemetById('image').style.blur=2, sin importar cuán útil hubiera sido.
La técnica que usé e incorporé en el complemento es bastante simple:solo apila un montón de divs, cada uno con la imagen como fondo y cuya opacidad se reduce, uno encima del otro. Las posiciones de esos divs están desviadas por unos pocos píxeles al azar, por lo que terminas con un efecto borroso.
Problema 2:ocultar el cursor
CSS no proporciona una forma de ocultar el cursor de la vista. P.ej. usted no puede especifique una regla CSS como cursor:ninguno . Sin embargo, hay una buena solución. CSS le brinda la posibilidad de especificar un cursor personalizado en un .cur archivo con css:url() regla. Estos archivos admiten transparencia, por lo que solo necesita crear un cursor completamente transparente y asignarlo al área en la que desea ocultar el cursor.
Desafortunadamente, Google Chrome tiene problemas con los cursores completamente en blanco, por lo que se debe adaptar una versión especial que contenga un píxel blanco (todavía es mejor que nada).
Otro creador de problemas es Opera, que no admite cursores personalizados por completo. No hay soluciones. Sin embargo, no es gran cosa, todo lo demás funciona bien en Opera.
Problema 3:no hay soporte para máscaras
Una solución a este problema es usar la propiedad de fondo del div del visor para mostrar la imagen original. Al especificar un margen superior e izquierdo negativos y actualizarlo con cada movimiento del mouse, podemos dar a los usuarios la impresión de que el visor aclara el desenfoque del paisaje de abajo.
Las soluciones a estos problemas se implementan en el complemento para nosotros, lo que elimina gran parte de la carga de desarrollo y podemos comenzar a construir sobre ella.
Paso 1 - XHTML
Como la mayor parte del trabajo lo maneja el complemento PhotoShoot jQuery, nuestro trabajo se reduce a solo proporcionar un div que se transformará en una etapa de toma de fotos (todavía tenemos que pasar un objeto de configuración que contiene la imagen que queremos que se muestre , junto con algunas otras opciones).
demostración.html
<div id="main"> <!-- The plugin automatically inserts the needed markup here --> </div>
Puede tener este div en cualquier lugar de su página. Deberá especificar un ancho y una altura fijos en la hoja de estilo para que esto funcione correctamente. Una vez que se carga la página y se inicializa el complemento, se inserta código adicional en este div.
demostración.html
<div id="main"> <div class="blur" style="......"></div> <div class="blur" style="......"></div> <!-- 8 more blur divs --> <div class="overlay" style="opacity: 0.2;"></div> <div style="......" class="viewFinder"> <img src="photoShoot/viewfinder.png" width="300" height="200"> </div> <!-- Additional html for the shots is inserted here. Not part of the plug-in. --> </div>
Mucho ha cambiado aquí. Como se mencionó anteriormente, el efecto de desenfoque se logra apilando divs transparentes uno encima del otro:el desenfoque divs. Después de esto está el div de superposición, que oscurece las capas debajo de él, de acuerdo con la opción de opacidad pasada al complemento.
Finalmente tenemos el visor, que sigue los movimientos del mouse sobre el área y tiene la versión no borrosa de la imagen como fondo.
Para garantizar la máxima flexibilidad, el complemento proporciona una forma de ejecutar una función definida por el usuario cuando se produce un clic. Esto es exactamente lo que usamos para simular el flash de una cámara y para insertar una nueva toma en el div del álbum, que no forma parte del complemento.
Paso 2:CSS
El complemento viene con su propia hoja de estilo (photoShoot/jquery.photoShoot-1.0.css en los archivos de demostración) que define el aspecto de los componentes de la sesión de fotos, por lo que solo nos queda diseñar el resto de la página.
estilos.css
#main{
/* This div is converted to a photoShoot stage by the Photo Shoot plug-in */
margin:0 auto;
width:960px;
height:600px;
}
.shot{
/* These contain a scaled down version of the background image: */
border:3px solid #FCFCFC;
float:right;
position:relative;
margin-left:10px;
overflow:hidden;
/* Adding a CSS3 shadow below the shots: */
-moz-box-shadow:0 0 2px black;
-webkit-box-shadow:0 0 2px black;
box-shadow:0 0 2px black;
}
.shot img{
display:block;
}
.album{
/* This div holds the shots */
bottom:50px;
height:110px;
overflow:hidden;
position:absolute;
right:20px;
width:490px;
}
.album .slide{
/* The slide div is contained in album */
width:700px;
height:110px;
position:relative;
left:-210px;
}
Cada toma es insertada dinámicamente por nuestra propia toma personalizada cuando se produce un evento de clic (como verá en el siguiente paso del tutorial). Las tomas son básicamente una versión reducida de la imagen de fondo (esto significa que la imagen se descarga una vez y se usa varias veces), que se desplazan hacia arriba y hacia abajo, según la posición del visor en el momento en que ocurrió el evento.
El álbum y deslizar los divs son agregados por nuestro propio script jQuery (no por el complemento). El principio aquí es que el div de la diapositiva es más grande que su padre, el div del álbum, y la toma se desliza hacia la izquierda cuando se inserta, pero más sobre eso en un momento.
Paso 3:jQuery
El plug-in photoShoot en sí no se discutirá aquí, ya que puede leer más sobre él en su página oficial. Sin embargo, necesitamos algún código jQuery adicional que:
- Inserta el .álbum al #principal división;
- Elige una imagen de flickr aleatoria de una matriz para enviarla al complemento;
- Crea el objeto de opciones;
- Define una toma personalizada función que el complemento llama al hacer clic con el mouse;
- Llama al complemento con .photoshoot() método.
secuencia de comandos.js
$(document).ready(function(){
// This code is executed after the DOM has been completely loaded
// Assigning the jQuery object to a variable for speed:
var main = $('#main');
// Setting the width of the photoshoot area to
// 1024 px or the width of the document - whichever is smallest:
main.width(Math.min(1024,$(document).width()));
// Creating an array with four possible backgrounds and their sizes:
var pics = new Array(
{ url:'http://farm4.static.flickr.com/3595/3405361333_77f2a5e731_b.jpg', size:{x:1024,y:677}},
{ url:'http://farm4.static.flickr.com/3028/2753126743_4249a4e948_b.jpg', size:{x:1024,y:768}},
{ url:'http://farm4.static.flickr.com/3641/3595250019_5a1237899a_b.jpg', size:{x:1024,y:768}},
{ url:'http://farm3.static.flickr.com/2592/4018062274_1f7f23597d_o.jpg', size:{x:1158,y:756}}
);
// Choosing a random picture to be passed to the PhotoShoot jQuery plug-in:
var bg = pics[parseInt(Math.random()*4)];
// Creating an options object (try tweeking the variables):
var opts = {
image : bg.url,
onClick : shoot,
opacity : 0.8,
blurLevel : 4
}
// Calling the photoShoot plug-in and converting the #main div to a photo shoot stage:
main.photoShoot(opts);
// Adding the album holder to the stage:
$('<div class="album">').html('<div class="slide" />').appendTo(main);
// Our own shoot function (it is passed as onClick to the options array above):
function shoot(position){
// This function is called by the plug-in when the button is pressed
// Setting the overlay's div to white will create the illusion of a camera flash:
main.find('.overlay').css('background-color','white');
// The flash will last for 100 milliseconds (a tenth of the second):
setTimeout(function(){main.find('.overlay').css('background-color','')},100);
// Creating a new shot image:
var newShot = $('<div class="shot">').width(150).height(100);
newShot.append( $('<img src="'+bg.url+'" width="'+(bg.size.x/2)+'" height="'+(bg.size.y/2)+'" />').css('margin',-position.top*0.5+'px 0 0 -'+position.left*0.5+'px') );
// Removing the fourth shot (the count starts from 0):
$('.shot').eq(3).remove();
// Adding the newly created shot to the album div, but moved 160px to the right.
// We start an animation to slide it in view:
newShot.css('margin-right',-160).prependTo('.album .slide').animate({marginRight:0},'slow');
}
});
Cada vez que hace clic en el área, se agrega una nueva toma a la diapositiva div con un margen negativo a la derecha. Después de esto, comienza una animación que la desliza a la vista y empuja las otras tomas hacia la izquierda, ocultando la que está más a la izquierda.
Es importante eliminar las tomas que no se ven con el botón eliminar () método. De esta manera evitamos que el DOM se sature con elementos innecesarios.
¡Con esto nuestro efecto Photoshoot está completo!
Conclusión
Hoy usamos un enfoque de resolución de problemas para crear un efecto de sesión de fotos con CSS puro y JavaScript. Puede utilizar libremente las técnicas demostradas aquí y desarrollar el código. Hay muchos usos posibles, especialmente en sistemas de navegación y sitios promocionales.
Si le gustó este tutorial, asegúrese de seguirnos en Twitter para obtener las últimas noticias y enlaces sobre desarrollo web.
Muchas gracias a haglundc por la foto del paisaje utilizada en este tutorial.
¿Qué opinas? ¿Cómo lo usarías?