Cómo crear una página de “Próximamente...” con una cuenta atrás

Si estás planeando lanzar un nuevo producto, un proyecto online, o simplemente un blog, publicar una página de "Próximamente..." con una cuenta atrás informará a tus visitantes de cuándo se lanzará, así como también se le notificará que el proyecto se sigue desarrollando. Puedes incluir incluso un formulario de suscripción para que tus visitantes se puedan registrar y así, recibir un correo una vez que el sitio esté listo para su lanzamiento.

En este artículo, te mostraré cómo crear una página con una cuenta atrás muy simple para tu sitio utilizando el plugin de JavaScript TimeCircles con un fondo que cuente con un vídeo de YouTube, así como un formulario de suscripción y un poco de animación.

Empecemos…

Recursos que necesitaremos

Empezamos

Antes de empezar con el diseño, vamos a añadir el doctype HTML5 y una serie de enlaces en nuestro head. Esto incluirá alguna meta información, enlaces a nuestras hojas de estilo y JavaScript:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Coming Soon Countdown Page</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
   <link rel="stylesheet" href="css/animate.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" media="screen"/>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300|Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'>
</head>

También añadiremos los plugins y librerías de Javascript que utilizaremos en el desarrollo antes de que se cierre el </body>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/device.min.js"></script>
<script type="text/javascript" src="js/TimeCircles.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.mb.YTPlayer.js"></script>

El diseño

Para nuestro diseño, vamos a añadir dos divs en la parte superior de nuestro contenido principal. El primero tendrá la clase blackground-filter que filtrará el brillo de nuestro video de fondo (más información sobre esto en la sección de CSS) y el segundo contará con la clase bgimg que contendrá la imagen de fondo que se mostrará en aquellos dispositivos que, por su resolución, no pueda mostrarse el vídeo de YouTube de fondo.

<!-- BIG FILTER BG-->
    <div class="background-filter"></div>
    <!-- CHANGE BG ON SMALL DEVICES-->
    <div id="bgimg"></div>

A continuación, para nuestro contenido principal, vamos a meterlo todo dentro de una sección que tiene por ID main. A continuación, colocaremos un container y una clase row para nuestro CSS bootstrap. Utilizaremos una clase de diez columnas de tamaño medio y las meteremos en una columna para mantener todo centrado en la pantalla.

Dentro de nuestra columna principal pondremos nuestro logotipo dentro de un h1 y un párrafo con sus respectivas clases de animate.css para darle un efecto suave de fade-in a nuestro contenido.

 <section id="main">
        <div class="container">
            <div class="row">              
               <div class="col-md-10 col-md-offset-1">
                   <h1 id="logo" class="animated fadeInDown">COMING SOON COUNTDOWN PAGE</h1>
                   <p class="intro animated fadeInDown">Our website is under construction. We'll be here soon with our new amazing site. <br/> You can subscribe below to get notification.</p>

Después, agregaremos el diseño de nuestra cuenta atrás. Esto tendrá el ID DateCountdown, con los data atributes suministrados por el plugin de JavaScript Time Circles y con las clases timerContent y animate. Puedes cambiar el atributo date-date a la fecha de inicio que quieras con el formato de fecha yyyy-mm-dd.

<div id="DateCountdown" class="animated fadeInDown" data-date="2016-11-11 00:00:00" class="timerContent animate"></div>

Para el formulario de suscripción, lo meteremos todo dentro de un tag form con la clase contact-form, un valor de columna de 6 (bootstrap) y las clases de animación animated y bounceInUp para darle un efecto con animate.css. El resto del código es incluir una fuente de iconos (FontAwesome), un textbox y un botón de submit.

<form class="contact-form col-md-6 animated bounceInUp" method="post">
                <div class="form-group">
                    <div><span class="email-icon"> <i class="fa fa-envelope-o"></i> </span>
                        <input type="email" name="email" id="email" class="required email" placeholder="Enter Your Email..">
                        <!-- <input type="hidden" value="1" name="submit" /> -->
                        <button id="submit" type="submit" class="btn-submit">Submit</button>
                    </div>
                </div>
                <div class="form-respond"></div>
            </form>
                </div>
            </div>
        </div>
    </section>

Finalmente, agregamos el código para nuestro vídeo de fondo, el cual es suministrado el plugin de Javascript jquery.mb.YTPlayer.

<a id="bgndVideo"  data-property="{videoURL:'https://www.youtube.com/watch?v=onllGTjMZ-I',containment:'body',autoPlay:true, mute:false, startAt:0,opacity:1,ratio:'4/3', addRaster:true}">Boston Video</a>

El CSS

Comenzaremos nuestro CSS agregando los estilos Reset de meyerweb.com para tener un CSS estándar y reducir las inconsistencias con los navegadores.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

A continuación, vamos a añadir algunos estilos en el elemento body, la clase background-filter tendrá un color de fondo negro con 0.5 de opacidad para disminuir el brillo del fondo. También agregaremos los estilos para los campos de formulario, así como la imagen de fondo a través de la clase bg-image que mencioné anteriormente en el diseño, que se mostrará en pantallas más pequeñas.

body{
    color: #fff;
    font-family: 'Roboto Slab', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    -webkit-text-rendering: optimizeLegibility;
   -moz-text-rendering: optimizeLegibility;
   -ms-text-rendering: optimizeLegibility;
   -o-text-rendering: optimizeLegibility;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   -ms-font-smoothing: antialiased;
   -o-font-smoothing: antialiased;
   font-smoothing: antialiased;
   overflow: hidden;
}

.background-filter {
      width:100%;
    height:100%;
    display:block;
    position:fixed;
    background: #000;
    opacity: 0.5;
    z-index:0;
    top: 0;
        -webkit-background-size: cover;
      -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
            background-size: cover;
}

textarea, input[type="text"], input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active, input[type="email"], input[type="email"]:hover, input[type="email"]:focus, input[type="email"]:active {
   background: none;
   box-shadow: none !important;
   border: 1px solid #ddd;
   font-family: 'Open Sans', sans-serif;
   font-size: 15px;
   font-weight: 300;
   width: 100%;
   margin-bottom: 20px;
   color: #ffffff;
}
.bg-image {
    background:url('http://koowallpapers.com/wp-content/uploads/2013/08/new-york-city-streets-background.jpg');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
      -moz-background-size: cover;
        -ms-background-size: cover;
        -o-background-size: cover;
            background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    backface-visibility: hidden;
    background-position: center center;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

Añadimos estilos para el logo y el textbox.

#logo{
    margin: 65px 0px 40px 0px;
    display: inline-block;
    padding: 15px 20px;
    border: 1px solid #fff;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 45px;
    font-weight: 700;
    overflow: hidden;
    letter-spacing: 2px;
}

.intro{
    line-height: 25px;
}

Lo próximo que tenemos que añadir en nuestro CSS es el contenido de la cuenta atrás. Esto gestionará las clases que establecimos en nuestro diseño y lo ajustará cuidadosamente en la pantalla a través de las propiedades margin y position.

#DateCountdown {
   margin-top: 20px;
   width: 100%;
}
.time_circles {
   position: relative;
   width: 100%;
   height: 100%;
}
.time_circles > div {
   position: absolute;
   text-align: center;
}
.time_circles > div > h4 {
   font-family: 'Oswald',sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 30px;
}
.time_circles > div > span {
   font-family: 'Roboto Slab',sans-serif;
   font-size: 77px;
   font-weight: 700;
   letter-spacing: -3px;
   line-height: 50px;
}
.buttonBar {
   display: none;
}

Ahora vamos a agregar los estilos de formulario de suscripción. Comenzaremos agregando el tamaño de la fuente de iconos mediante la clase email-icon y personalizando la clase contact-form. El resto son simples estilos sencillos para nuestro botón de submit como un background-color, un border-radius y demás...

.email-icon i {
   font-size: 38px;
   line-height: 71px;
}
.contact-form .form-group {
   width: 100%;
   margin-top: 25px;
   position: relative;
}
.contact-form {
   color: #8C8C8C;
   float: none;
   margin: 0 auto 60px auto;
}
.contact-form input {
   background-color: #ffffff;
    padding: 0 22% 0 70px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   color: #909090;
   border: none;
   height: 60px;
   width: 100%;
}
.contact-form .email-icon {
   position: absolute;
   top: -6px;
   left: 12px;
   font-size: 24px;
}
.contact-form .btn-submit {
    font-family: 'Oswald', sans-serif;
   position: absolute;
   top: 10px;
   right: 12px;
   font-size: 20px;
   border: none;
   background-color: #3498db;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   font-size: 20px;
   color: #ffffff;
   line-height: 22px;
   width: 90px;
   height: 40px;
   line-height: 24px;
}

Finalmente, añadimos las media-queries.

@media (max-width: 767px) {
   body {
       font-size: 14px;
   }
   textarea,input[type="text"],input[type="text"]:hover,input[type="text"]:focus,input[type="text"]:active,input[type="email"],input[type="email"]:hover,input[type="email"]:focus,input[type="email"]:active {
      font-size: 14px;
       padding: 8px;
   }

   h1 a {
       padding: 10px 20px;
   }
   .intro {
       line-height: 20px;
   }
   .timer {
       margin-top: 20px;
   }
   .timer ul li {
       min-width: 109px;
       padding: 20px 9px;
   }
   .timer ul li span {
       font-size: 60px;
   }
   .timer ul li p {
       font-size: 14px;
   }
   h1,h2 {
       font-size: 30px;
   }
   h3 {
       font-size: 16px;
   }
   .time_circles > div > span {
       font-size: 60px;
       line-height: 45px;
   }
   .time_circles > div > h4 {
       font-size: 14px;
   }
   .timer2 {
       margin-top: 20px;
       font-size: 20px;
   }
   .timer2 .days,.timer2 .hours,.timer2 .minutes,.timer2 .seconds,.timer2 .separate {
       font-size: 45px;
   }
}
@media (max-width: 620px) {
   .time_circles > div > span {
       font-size: 50px;
       line-height: 35px;
   }
   .time_circles > div > h4 {
       display: none;
   }
   .email-icon {
       display: none;
   }
}
@media (max-width: 480px) {
   .timer ul li:nth-child(3) {
       border-right: 0;
   }
   .timer ul li:nth-child(4) {
       display: none;
   }
   .time_circles > div > span {
       font-size: 40px;
       line-height: 25px;
   }
}
@media (max-width: 368px) {
   .timer ul li {
       min-width: 90px;
       padding: 20px 5px;
   }
   .timer ul li span {
       font-size: 50px;
   }
}
@media (max-width: 320px) {
   .timer ul li:nth-child(3) {
       display: none;
   }
   .timer ul li:nth-child(2) {
       border-right: 0;
   }
}

El Javascript

Vamos a crear un archivo llamado scripts.js dentro de una carpeta js y a empezar a insertar código en él. Comencemos manipulando la altura de la ventana cada vez que cambiemos el tamaño de la ventana con $(window).height ();

$(document).ready(function(){
    "use strict";
    var windowHeight = $(window).height();
    var homePageHeight = $('#main').height();
    if (windowHeight >= homePageHeight){
        $('#main').css("padding-top", (((windowHeight-homePageHeight)/2))-130);
        $('#main').css("padding-bottom", (((windowHeight-homePageHeight)/2))-130);
    }
    $(window).resize(function() {       
        var windowHeight = $(window).height();
        var homePageHeight = $('#main').height();
        if (windowHeight >= homePageHeight){
            $('#main').css("padding-top", ((windowHeight-homePageHeight)/2));
            $('#main').css("padding-bottom", ((windowHeight-homePageHeight)/2));
        }
    });

Después utilizamos la función countDownCircular proporcionada por el fichero TimeCircles.js, y añadimos los siguientes ajustes en el fichero script.js.

 countDownCircular();

    function countDownCircular() {
        $("#DateCountdown").TimeCircles({
           "animation": "smooth",
           "bg_width": 0.2,
           "fg_width": 0.016666666666666666,
           "circle_bg_color": "#fff",
           "time": {
               "Days": {
                   "text": "days",
                   "color": "#fff",
                   "show": true
               },
               "Hours": {
                   "text": "hours",
                   "color": "#fff",
                   "show": true
               },
               "Minutes": {
                   "text": "minutes",
                   "color": "#fff",
                   "show": true
               },
               "Seconds": {
                   "text": "seconds",
                   "color": "#fff",
                   "show": true
               }
           }
        });
    };
    $(window).resize(function() {       
        $("#DateCountdown").TimeCircles().rebuild();
    });

Por último, vamos a usar device.js para controlar la reproducción de nuestro fondo. La idea aquí es que esconderemos el fondo de video si la página se está viendo en una tableta o un dispositivo móvil mediante la clase bg-image, que contiene una imagen de fondo.

if( !device.tablet() && !device.mobile() ) {
    jQuery(function(){
        jQuery("#bgndVideo").on("YTPStart", function(){ jQuery("#eventListener").html("YTPStart")});
        jQuery("#bgndVideo").on("YTPEnd", function(){ jQuery("#eventListener").html("YTPEnd")});
        jQuery("#bgndVideo").on("YTPPause", function(){ jQuery("#eventListener").html("YTPPause")});
        jQuery("#bgndVideo").on("YTPBuffering", function(){ jQuery("#eventListener").html("YTPBuffering")});
        jQuery("#bgndVideo").mb_YTPlayer();
    });
} else {
    $('#bgimg').addClass('bg-image');
}
});

Fuente: developerdrive.com

COMPARTE ESTE ARTÍCULO

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