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=""/>
<div id="info">
<h1>MultiQ PVM <span class="subheader">- Samordna flera budskap i samma bildskärm</span></h1>
<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;
    width: 650px;
}

.subheader {
    color: #666;
}


#info {
    top: 220px;
    left: 1280px;
    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;
}

JavaScript

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

$(document).ready(function() {
    $('#info').delay(1500).animate({opacity: 1, left: 510}, 3000);
    $('#pvm').delay(500).animate({opacity: 1,top:213, left:100, height:197, width:325}, 1500);    
});