video

public/landing.html

@@ -46,6 +46,12 @@ <h3 id="birthday"></h3>
       <div class="blackout"></div>
     </div>
 
+    <div id="video">
+      <section>
+        <video src="http://www.pbs.org/wgbh/pages/frontline/video/flv/2907/pmwalk.mp4" id="transition"></video>
+      </section>
+    </div>
+
     <div id="show">
       <footer>
         <p>A project inspired by Post Mortem, a collaborative reporting initiative from FRONTLINE, ProPublica and NPR.</p>
@@ -56,7 +62,7 @@ <h3 id="birthday"></h3>
         <div>
           <a href="#" title="">Share</a>
           <a href="#" title="">React</a>
-          <a href="#" title="">Watch</a>
+          <a href="http://www.pbs.org/wgbh/pages/frontline/post-mortem/" title="">Watch</a>
         </div>
       </nav>
 
@@ -70,21 +76,20 @@ <h3 id="birthday"></h3>
         <div id="modules" data-page="1">
           <div id="controls">
             <a href="#previous" style="display: none;"></a>
-            <a href="#next">Your Death Certificate</a>
+            <a href="#next">View your death certificate</a>
           </div>
 
           <section class="slide1" data-title="What happened?">
-            <h1>You are one of</h1>
-            <h1>the 2.5 million Americans</h1>
-            <h1>who died this year</h1>
+            <h1>You are one of the 2.5 million</h1>
+            <h1> Americans who died this year</h1>
             <h2><span class="birthyear">1986</span>-2012</h2>
             <h3>What happened?</h3>
             <div class="fbProfileImageContainer">
               <img src="" alt="" class="fbProfileImage">
             </div>
           </section>
 
-          <section class="slide2" data-title="View your Death Certificate">
+          <section class="slide2" data-title="View your death certificate">
             <img src="/images/show/certificate.png" class="certificate" alt="">
             <div id="cert">
               <p class="header"></p>
@@ -100,7 +105,7 @@ <h3>What happened?</h3>
             </div>
           </section>
 
-          <section class="slide3" data-title="Case closed. Or is it?">
+          <section class="slide3" data-title="Or is it?">
             <h1>Popular television portrays death investigation</h1>
             <h1> as a world filled with high tech sleuths wielding the </h1>
             <h1>most sophisticated tools. The reality is far different...</h1>
@@ -167,6 +172,8 @@ <h3></h3>
 
     </div>
 
+    <div id="cover"></div>
+
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script src="/scripts/jquery.text-effects.js"></script>
     <script src="/scripts/date.js/1.0-alpha1.js"></script>

public/scripts/application.js

@@ -30,8 +30,17 @@ $(function() {
   var locationStr = "";
   var birthdayStr = "";
 
+  $('#transition').bind('ended', function() {
+    $('#cover').fadeIn('slow', function() {
+      $('body').removeClass('video').addClass('show');
+      $('#cover').fadeOut('slow');
+    })
+  });
+
   function populate() {
-    $('body').removeClass('form').removeClass('landing').addClass('show');
+    // $('body').removeClass('form').removeClass('landing').addClass('show');
+    $('body').removeClass('form').removeClass('landing').addClass('video');
+    document.getElementById('transition').play();
 
     var _longState = states[stateCodes.indexOf(locationStr.split(',')[1].toLowerCase().replace(' ', ''))];
 

public/stylesheets/landing.css

@@ -42,17 +42,28 @@ body {
   padding: 0;
 }
 
-body.landing {
+#cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: black;
+  z-index: 5000;
+  display: none;
+}
+
+body.landing, body.video {
   background: url('/images/landing/background.png') #120004;
   background-position: 50% top;
   background-repeat: no-repeat;
 }
 
-body #landing {
+body #landing, body #video {
   display: none;
 }
 
-body.landing #landing {
+body.landing #landing, body.video #video {
   display: block;
 }
 
@@ -168,6 +179,15 @@ body.landing #landing {
 
 
 
+#video section {
+  position: absolute;
+  left: 50%;
+  top: 190px;
+  width: 640px;
+  height: 360px;
+  margin-left: -320px;
+}
+
 
 
 
@@ -200,11 +220,11 @@ body.show #show {
 }
 
 #show nav div {
-  width: 600px;
+  width: 420px;
   position: absolute;
   top: 0;
   left: 50%;
-  margin-left: -300px;
+  margin-left: -210px;
 }
 
 #show nav a {
@@ -419,19 +439,36 @@ body.show #show {
   clear: both;
   font-family: 'CarbonType';
   font-size: 48px;
-  margin: 0 0 0 340px;
-  padding: 10px 0 0 0;
+  margin: 0 0 0 370px;
+  padding: 70px 0 0 0;
 }
 
 .slide1 h3 {
   color: white;
   clear: both;
   font-family: 'CarbonType';
   font-size: 24px;
-  margin: 0 0 0 340px;
+  margin: 0 0 0 410px;
   text-transform: uppercase;
   font-weight: normal;
-  padding: 10px 0 0 0;
+  padding: 30px 0 0 0;
+  opacity: 1;
+}
+
+@-webkit-keyframes whatHappened {
+  0%  {
+    opacity: 0;
+  }
+  70% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+#modules[data-page='1'] .slide1 h3 {
+  -webkit-animation: whatHappened 5s 1;
 }