Toast notification demo

by Kieran Dang

HTML

<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflS50iB-/www-widgetapi.js" async=""></script>
<script src="https://www.youtube.com/player_api"></script>

<div class="screen mute" id="tv"></div>
<div id="content">
    <div id="banner-message">
        <p>Bấm phím AUDIO để lựa chọn thuyết minh.</p>
    </div>

    <section id="default-example" class="flex-column">
        <div>Animation <span id="play-status">finished</span></div>

        <div id="reset">Click to start!</div>
        <button class="toggle-mute">Mute!</button>
    </section>
</div>

CSS

html,
body {
    font-family: Helvetica;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 1024px;
}

#wrapper header {
    display: none;
}

#tab {
    margin: 0;
    padding: 0;    
}

#tv {
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -99;
    pointer-events: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#content {
    top: 0;
    color: #fff;
}

#default-example {
    padding-top: 150px;
    padding-left: 100px;
    color: #eee;
}

#banner-message {
    position: fixed;
    top: 30px;
    right: 30px;
    background: #212121;
    border-radius: 4px;
    padding: 5px;
    font-size: 17px;
    text-align: center;
    margin: 0 auto;
    width: 400px;
    color: #eee;
    opacity: 0;
}

#reset {
    background-color: #1766aa;
    color: #eee;
    border: 2px solid #333;
    margin-top: 20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

#reset:hover,
.toggle-mute:hover {
    background-color: #53caff;
    color: #333;
}

.toggle-mute {
    background-color: #1766aa;
    color: #eee;
    border: 1px solid #333;
    margin-top: 40px;
    padding: 5px;
    cursor: pointer;
}

#play-status {
    font-weight: 700;
}

.fade-in {
    opacity: .85;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 500ms;
    animation-delay: 2s;
}

.fade-out {
    opacity: 0;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 500ms;
    animation-delay: 2000ms;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: .85;
    }
}

@keyframes fadeOutOpacity {
    0% {
        opacity: .85;
    }
    100% {
        opacity: 0;
    }
}

JavaScript

var now, dt;

$('#reset').click(function() {
    $('#play-status').text('delaying');

    dt = now = Date.now();
    console.log('Fade in DELAY', now, now - dt);

    $('#banner-message').addClass('fade-in');
    $('#banner-message').removeClass('fade-out');

    $('#banner-message').one('webkitAnimationStart oanimationstart msAnimationStart animationstart',
        function(e) {
            if (e.originalEvent.animationName === 'fadeInOpacity') {
                dt = now;
                now = Date.now();
                console.log('Fade in START', now, now - dt);

                $('#play-status').text('fade in starting');
            }

            if (e.originalEvent.animationName === 'fadeOutOpacity') {
                dt = now;
                now = Date.now();
                console.log('Fade in START', now, now - dt);

                $('#play-status').text('fade out starting');
            }
        });

    $('#banner-message').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function(e) {
            if (e.originalEvent.animationName === 'fadeInOpacity') {
                dt = now;
                now = Date.now();
                console.log('Fade in END', now, now - dt);

                $('#play-status').text('showing');
                $('#banner-message').css('opacity', '.85');
                $('#banner-message').removeClass('fade-in');

                dt = now;
                now = Date.now();
                console.log('Fade out DELAY', now, now - dt);
                $('#banner-message').addClass('fade-out');
            }

            if (e.originalEvent.animationName === 'fadeOutOpacity') {
                dt = now;
                now = Date.now();
                console.log('Fade out END', now, now - dt);

                $('#play-status').text('finished');
                $('#banner-message').css('opacity', '0');
                $('#banner-message').removeClass('fade-out');
            }
       ...