JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="container">
<img id="pvm" src="http://www.multiq.se/demo/presentation/img/pvm.png" alt=""/>
<h1>MultiQ PVM <span class="subheader">- Samordna flera budskap i samma bildskärm</span></h1>
<div id="keypoints">
<div id="key-1">
<ul>
<li>Reduce shrinkage and attract additional attention to marketing message.</li>
<li>Combines marketing with surveillance and add benefits to both</li>
<li>Reduce the potential negative impact of conventional PVMs</li>
</ul>
</div>
<div id="key-2">
<ul>
<li>Smooth installation now also for networked video cameras</li>
<li>Support up to full 1080p HD video quality, “guard tours”, quad view.</li>
<li>Stand alone with integrated webserver or centrally managed</li>
</ul>
</div>
</div>

<div id="info">
<p>MultiQ PVM (Public View Monitors) kombinerar övervakningsvideo med 
Digital Signage i en och samma bildskärm. Presentera välkomstmeddelanden 
och marknadsföringsbudskap till besökande kunderna och påminn dem samtidigt 
om att aktiv videoövervakning pågår. Dessa bildskärmar bidrar till att öka 
intäkterna och minska stölderna. MultiQ PVM kan enkelt integreras med MultiQs 
nätverkssystem för videoövervakning vid kassadisken eller på kontoret.
</p>
</div>
</div>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    width: 1280px;
    height: 720px;
    overflow: hidden;
}

#container {
    background-color: #eee;
    background-image: -webkit-linear-gradient(top,#eee 0,#ddd 100%);
    background-image: -ms-linear-gradient(top,#eee 0,#ddd 100%);
    background-image: -o-linear-gradient(top,#eee 0,#ddd 100%);
    background-image: -moz-linear-gradient(top,#eee 0,#ddd 100%);
    background-image: linear-gradient(to bottom,#ddd 0,#eee 100%);
    width: 1280px;
    height: 720px;
    overflow: hidden;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 22px;
    font-weight: normal;
    top: 220px;
    left: 510px;
    position: absolute;
    width: 650px;
    opacity: 0;
}

.subheader {
    color: #666;
}

#keypoints {
    top: 240px;
    left: 510px;
    position: absolute;
    width: 650px;
}

#info {
    top: 240px;
    left: 510px;
    position: absolute;
    width: 650px;
    opacity: 0;
}

p {
    color: #333;
    font-size: 15px;
    line-height: 23px;
    position: relative;
    margin: 10px 0;
}

#pvm {
    position: absolute;
    top: 220px;
    left: -60px;
    z-index: 2000;
    opacity: 0;
}

ul {
    margin: 20px 0 0 10px;
    padding: 0;
    width: 500px;
    list-style-type: none;
}

li {
    margin: 0 0 5px 0;
    padding: 0 0 0 10px;
    color: #333;
    font-size: 15px;
    line-height: 23px;
}

ul li:before { 
    content:"-"; 
    position:relative; 
    left:-10px;
}

#key-1 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

#key-2 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

JavaScript

jQuery.fx.interval = 1000/20; // Set animation to 25 frames per second

$(document).ready(function() {
    $('h1').delay(1500).animate({opacity: 1}, 3000);
    $('#pvm').delay(500).animate({opacity: 1,top:213, left:100, height:197, width:325}, 1500);
    $('#key-1').delay(3000).animate({opacity: 1}, 500).delay(6500).animate({opacity: 0}, 500);
    $('#key-2').delay(11000).animate({opacity: 1}, 500).delay(6500).animate({opacity: 0}, 500);
    $('#info').delay(19000).animate({opacity: 1}, 500);
});