palebluedot/presentation.html at master · benfreu/palebluedot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame. Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Pale Blue Dot</title>
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Lusitana' rel='stylesheet' type='text/css'>
</head>
<body>
  <div id="pbd">
    <div id="start" class="slide current">
      <p class="pbd">
        <span>Pale</span>
        <span>Blue</span>
        <span>Dot</span>
      </p>
      <p class="sagan">
        Carl Sagan
      </p>
    </div>
    <div id="voyager" class="">
      <p class="voyager">Voyager</p>
      <p class="year">1970</p>
    </div>
    <div id="video">
      <video width="320" height="240" class="video">
        <source src="voyager.mov" type="video/mp4">
      </video>
    </div>
    <div id="photo1">
      <img src="pbd1.jpg" />
    </div>
  </div>
  <script src="js/jquery.js"></script>
  <script src="js/pbd.js"></script>
  <script>
    var pres = new pbd();
    pres.addChapter(function (slide) {
      var pbd = slide.find('.pbd span');
      var sagan = slide.find('.sagan');
      pbd.hide();
      sagan.hide();
      slide.show();
      var verz = 0;
      pbd.each(function (key, el) {
        window.setTimeout(function () {
          $(el).fadeIn(3000);
        }, verz);
        verz += 1000;
      });
      window.setTimeout(function () {
        sagan.fadeIn(3000);
      }, 3000);
    }, $('#start'));
    pres.addChapter(function (slide) {
      var voyager = slide.find('.voyager');
      var year = slide.find('.year');
      voyager.hide();
      year.hide();
      slide.show();
      voyager.fadeIn(1000, function() {
        window.setTimeout(function() {
          voyager.fadeOut(1000, function() {
            year.fadeIn(1000);
          });
        }, 2000);
      });
    }, $('#voyager'));
    pres.addChapter(function (slide) {
      var video = slide.find('.video');
      video = video.get(0);
      var width = $(window).width();
      $(video).attr('width', width);
      $(video).attr('height', Math.round(width / 16 * 9));
      slide.fadeIn();
      video.play();
    }, $('#video'));
    pres.addChapter(function (slide) {
      var photo = slide.find('img');
      var width = $(window).width();
      photo.attr('width', width);
      slide.fadeIn(3000);
      photo.animate({
        width: "5468px",
        marginLeft: '-2820px',
        marginTop: '-690px'
      }, {
        duration: 60000
      });
    }, $('#photo1'));
   </script>
</body>
</html>