Coming soon header effects

The coming soon pages pair the same seven background effects with a single-purpose page: a countdown and an email capture instead of a landing hero. The layout differs from the landing header in two places. The navigation row is replaced by a contact strip, .aonomy-coming-contact, and the header bottom holds the countdown rather than the hero copy.

The markup below is the shared skeleton. The effect variations are exactly the ones from the landing header chapter: bubble, particles, snow and star carry the #particles-js div, parallax and wave put data-stellar-background-ratio="0.5" on the <header> and drop it, and video swaps it for <div id="aonomy-video-banner"></div>.

<!-- START AONOMY HEADER SECTION -->
<header id="aonomy-header">
    <div id="particles-js"></div>
    <div class="aonomy-top">
        <div class="container">
            <div class="row">
                <div class="aonomy-logo-container col-xl-3 col-lg-3 col-md-3 col-sm-6 col-6">
                    Aonomy Logo
                </div><!-- end .aonomy-logo-container -->

                <div class="aonomy-navigation col-xl-9 col-lg-9 col-md-9 col-sm-6 col-6">
                    <div class="aonomy-coming-contact">
                        Aonomy Contact Navigation
                    </div>
                </div><!-- end .aonomy-navigation -->
            </div><!-- end .row -->
        </div><!-- end .container-->
    </div><!-- end .aonomy-top -->

    <div class="aonomy-header-bottom">
        <div class="container">
            <div class="row">
                Aonomy bottom details
            </div><!-- end .row -->
        </div><!-- end .container -->
    </div><!-- end .aonomy-header-bottom -->
</header>
<!-- END AONOMOY HEADER SECTION -->

Effect to file mapping

The countdown

The countdown target is set in the effect script, not in the page. Each app-coming-*.js hands jquery.countdown.js a date and a set of .aonomy-countdown-* elements to fill:

$('.aonomy-countdown').countdown('2019/01/01', function(event) {
  $('.aonomy-countdown-days').html(event.strftime('%D'));
  $('.aonomy-countdown-hours').html(event.strftime('%H'));
  $('.aonomy-countdown-minutes').html(event.strftime('%M'));
  $('.aonomy-countdown-seconds').html(event.strftime('%S'));
});

The shipped date is a placeholder. Replace the string with your launch date in YYYY/MM/DD format in the effect script of the page you are using, and the four elements count down to it.

Bubble effect

<link rel="stylesheet" href="assets/css/style-coming-bubble.css">
<script src="assets/js/app-coming-bubble.js"></script>

Particles effect

<link rel="stylesheet" href="assets/css/style-coming-particles.css">
<script src="assets/js/app-coming-particles.js"></script>

Snow effect

<link rel="stylesheet" href="assets/css/style-coming-snow.css">
<script src="assets/js/app-coming-snow.js"></script>

Star effect

<link rel="stylesheet" href="assets/css/style-coming-star.css">
<script src="assets/js/app-coming-star.js"></script>

Parallax effect

<link rel="stylesheet" href="assets/css/style-coming-parallax.css">
<script src="assets/js/app-coming-parallax.js"></script>

Video effect

<link rel="stylesheet" href="assets/css/style-coming-video.css">
<script src="assets/js/app-coming-video.js"></script>

Wave effect

<link rel="stylesheet" href="assets/css/style-coming-wave.css">
<script src="assets/js/app-coming-wave.js"></script>