Ajax Loader
HTML 
 
1
 
2
<!doctype html>
3
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
4
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
5
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
6
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
7
<head>
8
<meta charset="utf-8">
9
<title>vlog.it</title>
10
<meta name="description" content="The Marco Rosella's rotating HTML5 (with SVG animations) collection of Vimeo and YouTube favourites.">
11
<meta name="keywords" content="video, SVG, HTML5, HTML 5, HTML, CSS3, motion graphics, javascript" />
12
<meta name="author" content="Marco Rosella - www.centralscrutinizer.it"/>
13
<meta property="og:image" content="http://www.vlog.it/img/ogvlogit.jpg"/>
14
<meta name="viewport" content="width=device-width,initial-scale=1"/>
15
<link rel="stylesheet" href="http://vlog.it/css/style.css"/>
16
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Unna'/>
17
<link rel="shortcut icon" href="http://vlog.it/img/favicon.gif"/>
18
<script src="http://code.jquery.com/jquery.min.js"></script>
19
<script src="http://vlog.it/js/libs/raphael-min.js"></script>
20
<script src="http://vlog.it/js/libs/modernizr-2.0.6.min.js"></script>
21
<script src="https://apis.google.com/js/plusone.js"></script>
22
<script src="http://vlog.it/data.php"></script>
23
<script src="http://vlog.it/js/vlogitcontrol.min.js"></script>
24
<script>
25
  var tag = document.createElement('script');
26
  tag.src = "http://www.youtube.com/player_api";
27
  var firstScriptTag = document.getElementsByTagName('script')[0];
28
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
29
  var player;
30
  function onYouTubePlayerAPIReady() {
31
    playeryt = new YT.Player('playeryt',{
32
      height: '334',
33
      width: '592',
34
      playerVars: { 'autoplay': 1, 'controls': 0 },
35
      events: {
36
        'onReady': onPlayerReady,
37
        'onStateChange': onPlayerStateChange
38
      }
39
    });
40
  };
41
42
  function onPlayerReady(event) {
43
    event.target.playVideo();
44
  }
45
46
  var done = false;
47
  function onPlayerStateChange(event) {}
48
</script>
49
</head>
50
<body>
51
<div id="animintro">
52
</div>
53
<div id="vlogitwheel">
54
</div>
55
 
56
<div id="logo">
57
  <h1>vlog.it</h1>
58
  <div id="logodeco"></div>
59
  <nav id="menu">
60
    <ul>
61
      <li id="vmmenu"><a href="#" class="current">Vimeo</a></li>
62
      <li id="ytmenu"><a href="#">YouTube</a></li>
63
    </ul>
64
  </nav>
65
  <div id="aboutmenu"><a href="#">about</a></div>
66
  <div id="share"><a href="#">Share</a></div>
67
</div>
68
 
69
<div id="animtop">
70
</div>
71
 
72
<div id="tubiamo">
73
  <iframe id="playeryt" width="592" height="334" frameborder="0" src="" type="text/html"></iframe>
74
</div>
75
 
76
<div id="vimejo">
77
</div>
78
 
79
<div id="videobox">
80
</div>
81
 
82
<div id="descr">
83
  <h3><span></span></h3>
84
  <h4><span></span></h4>
85
</div>
86
 
87
<div id="about">
88
  <h2>about</h2>
89
  <div id="about_content">
90
    <p>Hi, this is <a href="http://www.twitter.com/Marco_Rosella" target="_blank">Marco Rosella</a>: welcome to vlog.it, a random HTML5-powered (with SVG animations) rotating collection of my 313 Vimeo Likes and 1011 YouTube Favorites.</p>
91
    <div id="infos">
92
    <p><em>Instructions</em>: Click on a moving slice, enjoy stuff. Switch between Vimeo and Youtube videos under the logo.</p>
93
      <p>More info on <a href="http://www.centralscrutinizer.it/en/video/vlog-it-iv-svg-version" target="_blank">this blog post</a>; follow the updates here: <a class="socialicon" href="https://www.facebook.com/pages/Central-Scrutinizer-Studio/117827481644185" target="_blank"><img src="img/fblogo.png" alt="Facebook Logo"/></a> <a href="http://twitter.com/#!/Marco_Rosella" class="socialicon" target="_blank"><img src="img/twlogo.png" alt="Twitter Logo"/></a>
94
      <p>Thanks to <a href="http://www.buzzler.com" target="_blank">Federico Orr&ugrave;</a> for the server side system and to all the videos' authors.</p>
95
    </div>
96
    <div id="awaawa">
97
      <p><em>This project has been named as finalist for the <a href="http://sxsw.com/interactive/awards/finalists" target="_blank">15th SXSW Interactive Awards</a> in the Motion Graphics category, won the <a href="http://www.awwwards.com/web-design-awards/vlog-it" target="_blank">Awwwards Site of the Day</a> and has been featured in <a href="http://www.centralscrutinizer.it/en/xml/svg/awwwards-sotd-and-more/" target="_blank">countless design galleries</a>.</p>
98
    </div>
99
  </div>
100
 </div>
101
<div id="browser">
102
  <div id="browser_inner">
103
    <h2>please update</h2>
104
    The sage man says:
105
    <span>"Old is gold!"</span>
106
    but for this time, to enjoy <em>vlog.it</em>, please update your browser:
107
    <ul>
108
      <li id="ff"><a href="http://www.mozilla.org/firefox/" target="_blank">Firefox</a></li>
109
      <li id="chr"><a href="http://www.google.com/chrome" target="_blank">Chrome</a></li>
110
      <li id="saf"><a href="http://www.apple.com/safari/download/" target="_blank">Safari</a></li>
111
      <li id="op"><a href="http://www.opera.com/download/" target="_blank">Opera</a></li>
112
      <li id="inex"><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx" target="_blank">Internet Explorer 9</a></li>
113
    </ul>
114
  </div>
115
</div>
116
<div id="br_mask"></div>
117
 
118
 
119
 
120
<div id="close"><a href="#"></a></div>
121
<div id="bumper"></div>
122
 
123
<div id="webby"><a href="http://www.webbyawards.com/webbys/current.php?season=16" target="_blank"><img src="http://vlog.it/img/vlogit_webbyvote.png"/></a></div>
124
    
125
</body>
126
</html>
127
 
 

*HACK http://vlog.it/

CSSDeck G+