How to create a “Coming Soon” countdown page

Datetime:2016-08-23 03:04:57          Topic: JavaScript  CSS           Share

If you are planning to launch a new product, an online project, or simply an ordinary blog site, posting a “Coming Soon” page with a countdown informs your potential visitors about the release date as well notifying them that the site is still in progress. You can even have a subscription form for your potential visitors to sign up with and receive an email notification once the site is ready to launch.

There are plenty of coming soon page and under construction templates available online for a couple of bucks but the good thing is, you can create a professional coming soon page with count down feature yourself using HTML5 and JavaScript libraries and just a few lines of code.

In this article, I will show you how you can create a simple time circle countdown page for your site using the TimeCircles JavaScript plugin with a YouTube video background as well as a subscription form and a little bit of animation.

Let’s get started…

Resources you’ll need:

Getting started

Before we move forward to the actual markup let’s first add the HTML5 doctype and series of links on our head section. This will include some meta information, links to our stylesheets and 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>

We will also add our JavaScript plugins and libraries just before the closing </body> tag.

<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>

The markup

For our markup, we will add two divs on the top of our main content. The first one will have the class background-filter which will filter the lightness of our background video (more on this on the CSS part) and the second one will have the class bgimg which will contain the image background that will be displayed in exchange with our youtube video background on smaller screen devices.

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

Next, for our main content, we will wrap everything inside a section with an id of main . We will then place a container and a row class for our bootstrap CSS. We will use a ten column medium size class and offset it by one column to keep everything on the center of the screen.

Inside our main column class we will place our logo within an h1 and a paragraph with their respective classes and classes for animate.css to have a smooth fade-in intro to our content. If you don’t know how animate.css works, visit this page to learn more.

    <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>

Afterwards, we will be adding our markup for our counter. This will have the DateCountdown id, with the data attributes supplied by the Time Circles JavaScript plugin and with timerContent and animate class. You can change the date-date attribute to your preferred launch date with the date format of yyyy-mm-dd . For more options and settings you can visit this page to learn more.

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

For our subscribe form, we will everything inside the form tag with a class contact-form , column value of 6 (bootstrap) and the classes animated and bounceInUp for our simple animation effect using animate.css. The rest of the code includes a font awesome icon, textbox and a submit button.

            <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>

Finally, we will add codes for our background video that is supplied by the jquery.mb.YTPlayer JavaScript Plugin.

<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>

From the code above you will notice that there are some attribute tags that were passed. These are the following:

  • videoURL – the URL of the page containing the video.
  • containment – the CSS selector of the DOM element where you want the video.
  • autoPlay – (boolean) true or false play the video once ready.
  • mute – (boolean) true mute the audio.
  • startAt – set the seconds the video should start at.
  • opacity – 0 to 1 which defines the opacity of the video.
  • ratio – can be ‘4/3′, ‘16/9′ or ‘auto’ to set the aspect ratio of the movie. If set to ‘auto’ the aspect ratio will be retreived form the getDataFromFeed method.
  • addRaster – display or hide a raster image over the video.

These are some more options built in within the jquery.mb.YTPlayer JavaScript plugin, you can visit this page to learn more.

The CSS

We’ll start our CSS by adding the Reset styles from meyerweb.com to have a standard CSS slate and reduce browser inconsistencies.

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;
}

Next, let’s add our general styles with the body element, background-filter class which will hold a background cover with a black background color with 0.5 opacity to filter the lightness the background. We’ll also add the styles for the form fields as well as the background image via bg-image class that I mentioned earlier on our markup that will be displayed on smaller screens.

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;
}

We will also add the styles for our logo and intro text.

#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;
}

The next thing we need to add on our stylesheet is the countdown content. This will handle the classes we set on our markup and carefully adjust on them screen via margin and position properties. This is pretty self-explanatory based on our markup.

#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;
}

Now let’s add the subscribe form styles. We will start by adding font size on our font awesome icon via the email-icon class and then move on the contact-form class and input properties and give it the position relative. The rest are just plain simple styles for our submit button such as the background color, border-radius and so on.

.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;
}

Finally, let’s add our media queries. We will target the max-width of 767px, 620px, 480px, 368px, and 320px and adjust each classes and tag values to create a smooth look on all browser sizes. This includes font size, line height and margins.

@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;
   }
}

The JavaScript

Let’s create a scripts.js file inside a js folder and start adding codes to it. Let’s start by manipulating the height of the window each time we resize the window. $(window).height(); assigned to windowHeight is height of the browser window or viewport. With respect to the web browsers the viewport here is visible portion. $(‘#main’).height(); assigned to homePageHeight is height of the div or section identified by ID main. if windowHeight greater than or equal to homePageHeight , then a padding is added to top and bottom of #main.

$(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));
        }
    });

Next, using the countDownCircular function given by TimeCircles.js file, let’s add the following settings on script.js file.

    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();
    });

These settings can found here . Here are some options I used above:

  • animation – the way the circles animate can be either a constant gradual rotating, slowly moving from one second to the other.
  • bg_width – sets the width of the background circle.
  • fg_width –  sets the width of the foreground circle.
  • circle_bg_color – sets the color of the background circle.
  • time – a group of options that allows you to control the options of each time unit independently.

Finally, let’s use the device.js to control the flow of our background. The idea here is we will hide the youtube video background if the page is being viewed on tablet and mobile device and change it to class bg-image which contains a background image.

The function that was set inside our jQuery function are the set up for the jquery.mb.YTPlayer plugin .

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');
}
});

Conclusion

There you have it! You just can’t wait for your site to open and see this amazing effect on your coming soon page!





About List