¡Los Beatles están en iTunes! O, si eres como yo y no te importa mucho, probablemente hayas notado la increíble pantalla de bienvenida que Apple usó para promocionar el evento. Arriesgándonos a iniciar una tendencia, en este tutorial vamos a crear un complemento jQuery simple que mostrará elegantes pantallas de bienvenida al estilo de Apple para nosotros.
El HTML
Encapsular la funcionalidad de la pantalla de inicio en un complemento jQuery lo hace portátil y fácil de incorporar a un sitio web existente. Pero antes de comenzar a trabajar en los archivos del complemento, primero debemos establecer el marcado HTML de una página de demostración simple, donde se utilizará el complemento.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-style Splash Screen | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/splashscreen.css" />
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script src="js/jquery.splashscreen.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="page">
<div id="topBar"></div>
<div id="promoIMG">
<img src="img/available_now.png" alt="Available Now" />
</div>
<div id="contentArea">
<p>... The textual content ...</p>
</div>
</div>
</body>
</html> Tenga en cuenta que he colocado las etiquetas de secuencia de comandos en la sección principal. Por lo general, es mejor incluirlos en el cuerpo, después de todo el resto del contenido, ya que, de lo contrario, la representación de la página se bloquea mientras se descargan los archivos js y nuestro visitante se queda mirando una pantalla en blanco. Esta vez, sin embargo, se trata de un mal necesario, ya que debemos asegurarnos de que nada de la página se mostrará al usuario antes de mostrar la pantalla de inicio.
El código del complemento de la pantalla de bienvenida se encuentra en jquery.splashscreen.js , de la que hablaremos en el último apartado. El complemento depende de splashcreen.css , que define algunos estilos útiles. Puede ver la hoja de estilo en la siguiente sección del tutorial.
El #promoIMG div tiene la ilustración de MacBook establecida como fondo. Esto es lo que nuestro complemento buscará cuando lo llamemos. A continuación, creará un div de pantalla de bienvenida y establecerá la ilustración como fondo, desplazándola para que se alinee con el #promoIMG. div debajo de él. Finalmente, cuando la pantalla de inicio está oculta, nos queda la impresión de que la página que la rodea se desvanece lentamente.
El CSS
Tenemos dos hojas de estilo distintas:styles.css y splashscreen.css . El primero es bastante sencillo y, dado que solo se usa para diseñar la página subyacente, no nos interesa y no se discutirá aquí. Los estilos que definen el aspecto de la pantalla de inicio están separados en su propio archivo:splashcreen.css , que puedes ver a continuación.
pantalla de bienvenida.css
#splashScreen img{
margin:0 auto;
}
#splashScreen{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:#252525;
background-repeat:no-repeat;
text-align:center;
} En el fragmento anterior, básicamente decimos que el div de la hoja de estilo está posicionado absolutamente con relación a la ventana del documento y que debería ocupar todo el ancho y el alto de la página. El color de fondo es el mismo que el de la ilustración del MacBook, que estamos usando como imagen de fondo, como verás en un momento.
JQuery
Todo el código del complemento reside en jquery.splashscreen.js . Como mencioné en la primera sección del tutorial, es importante que la secuencia de comandos se cargue antes de mostrar cualquier contenido al usuario, de lo contrario, presenciarán un parpadeo algo desagradable cuando se muestre la pantalla de inicio.
jquery.splashscreen.js
// A self-executing anonymous function,
// standard technique for developing jQuery plugins.
(function($){
$.fn.splashScreen = function(settings){
// Providing default options:
settings = $.extend({
textLayers : [],
textShowTime : 1500,
textTopOffset : 80
},settings);
var promoIMG = this;
// Creating the splashScreen div.
// The rest of the styling is in splashscreen.css
var splashScreen = $('<div>',{
id : 'splashScreen',
css:{
backgroundImage : promoIMG.css('backgroundImage'),
backgroundPosition : 'center '+promoIMG.offset().top+'px',
height : $(document).height()
}
});
$('body').append(splashScreen);
splashScreen.click(function(){
splashScreen.fadeOut('slow');
});
// Binding a custom event for changing the current visible text according
// to the contents of the textLayers array (passed as a parameter)
splashScreen.bind('changeText',function(e,newID){
// If the image that we want to show is
// within the boundaries of the array:
if(settings.textLayers[newID]){
showText(newID);
}
else {
splashScreen.click();
}
});
splashScreen.trigger('changeText',0);
// Extracting the functionality into a
// separate function for convenience.
function showText(id){
var text = $('<img>',{
src:settings.textLayers[id],
css: {
marginTop : promoIMG.offset().top+settings.textTopOffset
}
}).hide();
text.load(function(){
text.fadeIn('slow').delay(settings.textShowTime).fadeOut('slow',function(){
text.remove();
splashScreen.trigger('changeText',[id+1]);
});
});
splashScreen.append(text);
}
return this;
}
})(jQuery); Al complemento se le pasa un objeto de configuración. La única propiedad de este objeto que se requiere es textLayer . Esta propiedad debe ser una matriz con las URL de todas las imágenes con frases promocionales que aparecen y desaparecen sobre la ilustración de la MacBook. Puede hacer que esta matriz sea arbitrariamente larga e incluso colocar cualquier tipo de imágenes allí, que no solo contengan texto. Incluso podrías convertirlo en una elegante presentación de diapositivas.
El esto de la función corresponde a la promoIMG división Observe cómo tomamos el desplazamiento de la imagen desde la parte superior de la página con offset() en la línea 25 y configúrelo como el desplazamiento de la imagen de fondo en la pantalla de presentación. Esto nos brinda una alineación perfecta y, al mismo tiempo, nos libera de tener que pasar el desplazamiento como parámetro, lo que hace que el complemento sea más robusto.
Puede ver cómo se usa el complemento en el siguiente fragmento:
secuencia de comandos.js
$(document).ready(function(){
// Calling our splashScreen plugin and
// passing an array with images to be shown
$('#promoIMG').splashScreen({
textLayers : [
'img/thinner.png',
'img/more_elegant.png',
'img/our_new.png'
]
});
}); Lo que queda es llamar solo al complemento de pantalla de bienvenida. El evento de documento listo es perfecto para la tarea, ya que se llama antes de que el usuario pueda ver la página y podemos mostrar la pantalla de forma segura de inmediato.
¡Con esto, nuestro complemento de pantalla de bienvenida similar a Apple está completo!
Palabras de despedida
Puede usar el complemento para crear fácilmente sus propias pantallas de inicio con estilo. Solo debe recordar limitarlo solo a una de sus páginas, ya que se volverá molesto para el usuario si tiene que sentarse a través de una introducción de 30 segundos en cada vista de página. Además, con el parámetro textLayers, puede convertirlo en una presentación de diapositivas con diferentes capturas de pantalla del producto, lo que sería un efecto interesante de ver.
Asegúrese de compartir sus ideas para este script en la sección de comentarios a continuación.