html5微軟計算機發展歷程頁面滾動展示



80 317 106



特效描述:html5 微軟計算機 發展歷程 頁面滾動展示,html5頁面滾動展示

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />

2. 引入JS

<script src="js/jquery.js"></script>
<script src="js/jquery.unveil.js"></script>
<script src="js/jquery.tooltipster.min.js"></script>
<script src="js/queryloader2.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/skrollr.min.js"></script>
<script type="text/javascript" src="skrollr.ie.min.js"></script>
<script src="js/main.js"></script>

3. HTML代碼

  <!--  Mobile overlay Band  --> 
  <div class="off-canvas-wrap" >
      <div class="inner-wrap" 
          data-0         = "background-color:rgb(69 , 191,165)"
          data-500  = "background-color:rgb(69 , 191,165)" 
          data-900  = "background-color:rgb(85 , 159, 125);"
          data-3700  = "background-color:rgb(85 , 159, 125);"
          data-4100  = "background-color:rgb(15 , 107, 99)"
          data-6900  = "background-color:rgb(15 , 107, 99)"
          data-7300  = "background-color:rgb(2  , 186, 239)"
          data-10000  = "background-color:rgb(2  , 186, 239)"
          data-10400  = "background-color:rgb(125, 187, 40)"
          data-13100  = "background-color:rgb(125, 187, 40)"
          data-13500  = "background-color:rgb(156, 78 , 149)"
          data-16300  = "background-color:rgb(156, 78 , 149)"
          data-16700  = "background-color:rgb(255, 140, 24)"
          data-19400  = "background-color:rgb(255, 140, 24)"
          data-19800  = "background-color:rgb(16 , 215, 204)"
          data-22600  = "background-color:rgb(16 , 215, 204)"
          data-23000  = "background-color:rgb(245 ,111, 205)"
          data-25800  = "background-color:rgb(245 ,111, 205)"
          data-26200  = "background-color:rgb(7   ,15 , 140)"
          >
          <!-- Header -->
          <!-- Header -->
  <div class="row header" 
       data-0="top:0px;" 
       data-400="top:0px;" 
       data-550="top:-70px;" id="tippytop">
          <div class="columns">
                <h2><b>OnTheHub<sup>&reg;</sup></b> presents</h2>
          </div>
  </div>
<!-- End Header -->
  <!-- Sub Header/Nav DESKTOPS -->
  <nav class="sidebar" data-topbar>
    <ul>
      <li>
        <a onclick="tib('2100', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Intro');"
           title="<h4>1982</h4> 
                  <img src='img/logos/windows-1-logo.png' /> "
            class="tooltip" >
        </a>
      </li>
      <li>
        <a onclick="tib('5300', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Windows-1');"
           title="<h4>1990</h4> 
                  <img src='img/logos/windows-3-logo.png' />"
            class="tooltip" >
        </a>
      </li>
      <li>
        <a onclick="tib('8500', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Windows-3');"
           title="<h4>1995</h4> 
                  <img src='img/logos/windows-95-98-logos.png'>"
            class="tooltip">
        </a>
      </li>
      <li>
        <a onclick="tib('11600', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Windows-95');"
           title="<h4>1998</h4> 
                  <img src='img/logos/windows-95-98-logos.png' />"
            class="tooltip" >
        </a>
      </li>
      <li>
        <a onclick="tib('14700', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Windows-98');"
           title="<h4>2001</h4> 
                  <img src='img/logos/windows-xp-logo.png' />"
            class="tooltip" >
        </a>
      </li>
      <li>
        <a onclick="tib('17900', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Windows-XP');"
           title="<h4>2006</h4> 
                  <img src='img/logos/windows-vista-logo.png' />"
            class="tooltip" >
        </a>
      </li>
      <li>
        <a onclick="tib('21000', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Windows-Vista');"
           title="<h4>2009</h4> 
                  <img src='img/logos/windows-7-logo.png' />"
            class="tooltip" >
        </a>
      </li>
      <li>
        <a onclick="tib('24200', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Windows-7');"
           title="<h4>2012</h4> 
                  <img src='img/logos/windows-8-logo.png' />"
            class="tooltip" >
        </a>
      </li>
      <li>
        <a onclick="tib('27400', 
                        'Evolution of Windows', 
                        'Evolution of Windows - Navigation', 
                        'Evolution of Windows - Navigation - Header click - Windows-8');"
           title="<h4>2015</h4> 
                  <img src='img/logos/windows-10-logo.png' />"
            class="tooltip" >
        </a>
      </li>
    </ul>
  </nav>         
          <!-- Intro Band  --> 
          <div id="Intro" class="row mainContent content-intro" data-block="Intro">
  <div class="content-floppy"
       data-0   ="bottom:-20px;opacity:1" 
       data-400 ="bottom:-20px;opacity:1" 
       data-700 ="bottom:-200px;opacity:0">
    <img src="img/floppy-disk.png" />
  </div>
  <div class="content-version" 
       data-0   ="top:80px;opacity:0" 
       data-50 ="top:80px;opacity:1"
       data-400 ="top:80px;opacity:1"  
       data-700 ="top:-300px;opacity:0">
          <h2>Evolution of Windows</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
  <div class="content-computer"
       data-0   ="bottom:-20px;opacity:1" 
       data-400 ="bottom:-20px;opacity:1" 
       data-700 ="bottom:200px;opacity:0">
    <img src="img/intro-computer.png" />
    <div class="scroll-start"
         data-0   ="opacity:0.4;"
         data-50  ="opacity:1.0;"
         data-100 ="opacity:0.4;"
         data-150 ="opacity:1.0;"
         data-200 ="opacity:0.4;"
         data-250 ="opacity:1.0;"
         data-300 ="opacity:0.4;"
         data-350 ="opacity:1.0;"
         data-400 ="opacity:0.4;"
         data-500 ="opacity:0.4;">
      <img src="img/scroll-text.png" />
    </div>
    <div class="light" style="top:137px;right:50%;margin-right:-366px;">
        <div class="blinker">
          <div class="blinker-light"></div>
        </div>
    </div>
    <div class="light" style="top:484px;right:50%;margin-right:103px;">
        <div class="square-blinker">
          <div class="square-blinker-light"></div>
        </div>
    </div>
  </div>
</div>
          <!-- Windows 1 Band  --> 
          <div id="Windows-1" class="row mainContent content-versions" data-block="Windows-1">
  	<div class="content-year"
         data-400 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-1200  ="bottom:50%;opacity:0.7;"
         data-1700  ="bottom:60%;opacity:0.7;"
         data-1701  ="bottom[swing]:60%;opacity:0.7;"
         data-2100  ="bottom:100%;opacity:0;">
          <h3>1982</h3>        
    </div>
  	<div class="content-version"
    		 data-1900    ="top:-130px;"	
    		 data-2100  ="top:20px;"
    		 data-3400 ="top[swing]:20px;"
    		 data-4200 ="top:-980px;">
  			<h2>Windows 1.0</h2>
  			<div class="banner">
        	<img src="img/dark-banner.png" />
        </div>
  	</div>
  	<div class="content-computer bump-it"
  		   data-1100  ="bottom[sqrt]:-50%;opacity:1;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);" 
         data-1900    ="bottom:40%;opacity:1;"
         data-3400 ="bottom[swing]:40%;opacity:1;"
         data-4200 ="bottom:100%;opacity:0;" >
  		<img src="img/windows-1/computer.png"  style="z-index:200;position: relative;" alt="Windows 1">
  		<div class="content-screen">
        	<img src="img/windows-1/black-screen.png" />
        </div>
  		<div class="content-screen">
        	<img src="img/windows-1/screen1.png" 
        		 data-1900  ="display:!inline-block;"
        		 data-2200="display:!none;"
        	/>
          <img src="img/windows-1/screen2.png" 
             data-1900  ="display:!none;"
             data-2200="display:!inline-block;"
             data-2400="display:!none;"
          />
          <img src="img/windows-1/screen3.png" 
             data-1900  ="display:!none;"
             data-2400="display:!inline-block;"
             data-2600="display:!none;"
          />
          <img src="img/windows-1/screen4.png" 
             data-1900  ="display:!none;"
             data-2600="display:!inline-block;"
             data-2800="display:!none;"
          />
          <img src="img/windows-1/screen5.png" 
             data-1900  ="display:!none;"
             data-2800="display:!inline-block;"
          />
        </div>
  		<div class="info-box"
  	 	 data-1900 ="top:-20px;right:50%;margin-right:200px;opacity:0"
  	 	 data-2100 ="top:-20px;right:50%;margin-right:200px;opacity:1"
       style="width:300px;text-align:right;">
    		<h4>Why "Windows"?</h4>
    		<p>Windows was almost called “Interface Manager”. However, "Windows" better described the look of the <br/>programs on the screen.</p>
    	</div>
    	<div class="info-box"
  	 	 data-1900 ="top:-20px;right:50%;margin-right:-500px;opacity:0"
  	 	 data-2100 ="top:-20px;right:50%;margin-right:-500px;opacity:1"
  	 	 style="width:300px;text-align:left;">
    		<h4>The desk goes digital</h4>
    		<p>Windows 1.0 shipped with: Paint, Windows Writer, Notepad, Calculator, a calendar, clock, and Reversi. </p>
    		<svg height="300" width="300">
  		  <g fill="none" stroke="white" stroke-width="1">
  		    <polyline stroke-dasharray="5,5" points="120 0, 120 20, 120 60, 0 60, -100 60"  style="stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0"
  		    		  data-2000="stroke-dashoffset:6000;" 
  		    		  data-2200end="stroke-dashoffset:0;" />
  		  </g>
  		</svg>
    	</div>
    	<div class="info-box"
  	 	 data-1900 ="top:335px;right:50%;margin-right:-515px;opacity:0"
  	 	 data-2100 ="top:335px;right:50%;margin-right:-515px;opacity:1">
  	 	  <div class="tooltip" title="<h3>Fun Fact:</h3> 
  	 	  							  <p>The game Reversi was created to teach people how to use the mouse.</p>
                        <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=Did%20you%20know%3A%20Windows%201.0%20included%20a%20game%20to%20get%20people%20accustomed%20to%20the%20mouse!%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
  	 	  							  <span class=&quot;fa-stack fa-lg twitter&quot;>
  	 	  							  	<i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
  	 	  							  	<i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
  	 	  							  </span>
                        </a>  
                        <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/win1.png&description=Windows%201.0%20shipped%20with%20the%20game%20Reversi%20to%20help%20people%20get%20accustomed%20to%20using%20a%20mouse%20with%20the%20PC.%20&name=Did%20you%20know?' target='_blank'>
    	 	  							  <span class=&quot;fa-stack fa-lg facebook&quot;>
    	 	  							  	<i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
    	 	  							  	<i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
    	 	  							  </span>
                        </a>  
                        " data-action="Windows-1">
    		<div class="spinner">
  		  <div class="double-bounce1"></div>
  		  <div class="double-bounce2"></div>
  		</div>
    	  </div>	
    	</div>
  	</div>
</div>
          <!--  Windows 3 Band  --> 
          <div id="Windows-3" class="row mainContent content-versions" data-block="Windows-3">
    <div class="content-year"
         data-3600 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-4400  ="bottom:50%;opacity:0.7;"
         data-4900  ="bottom:60%;opacity:0.7;"
         data-4901  ="bottom[swing]:60%;opacity:0.7;"
         data-5300  ="bottom:100%;opacity:0;">
          <h3>1990</h3>
    </div>
    <div class="content-version"
         data-5100    ="top:-130px;" 
         data-5300  ="top:20px;"
         data-6600 ="top[swing]:20px;"
         data-7400 ="top:-980px;">
          <h2>Windows 3.0</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
    <div class="content-computer bump-it"
         data-4300  ="bottom[sqrt]:-50%;opacity:1;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);" 
         data-5100    ="bottom:40%;opacity:1;"
         data-6600 ="bottom[swing]:40%;opacity:1;"
         data-7400 ="bottom:100%;opacity:0;" >
      <img src="img/windows-3/computer.png" style="z-index:200;position: relative;" alt="Windows 3">
      <div class="content-screen" style="top:60px;margin-left: -97px;" />
          <img src="img/windows-3/screen-background.png" />
      </div>
      <div class="content-screen-component" style="top:77px;margin-left: -153px;" />
          <img src="img/windows-3/deck-card.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:146px;margin-left: -124px;" 
           data-5100  ="opacity:0"
           data-5400  ="opacity:0"
           data-5401  ="opacity:1" />
          <img src="img/windows-3/card-pile-1.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:147px;margin-left: -88px;" 
           data-5100  ="opacity:0"
           data-5430  ="opacity:0"
           data-5431  ="opacity:1">
          <img src="img/windows-3/card-pile-2.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:148px;margin-left: -52px;" 
           data-5100  ="opacity:0"
           data-5460  ="opacity:0"
           data-5461  ="opacity:1">
          <img src="img/windows-3/card-pile-3.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:149px;margin-left: -16px;" 
           data-5100  ="opacity:0"
           data-5490  ="opacity:0"
           data-5491  ="opacity:1">
          <img src="img/windows-3/card-pile-4.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:150px;margin-left: 21px;" 
           data-5100  ="opacity:0"
           data-5520  ="opacity:0"
           data-5521  ="opacity:1">
          <img src="img/windows-3/card-pile-5.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:151px;margin-left: 57px;" 
           data-5100  ="opacity:0"
           data-5550  ="opacity:0"
           data-5551  ="opacity:1">
          <img src="img/windows-3/card-pile-6.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:147px;margin-left: -160px;" 
           data-5100  ="opacity:0"
           data-5580  ="opacity:0"
           data-5581  ="opacity:1">
          <img src="img/windows-3/ace-hearts.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:148px;margin-left: -124px;" 
           data-5100  ="opacity:0"
           data-5610  ="opacity:0"
           data-5611  ="opacity:1">
          <img src="img/windows-3/six.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:149px;margin-left: -88px;" 
           data-5100  ="opacity:0"
           data-5640  ="opacity:0"
           data-5641  ="opacity:1">
          <img src="img/windows-3/three.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:150px;margin-left: -52px;" 
           data-5100  ="opacity:0"
           data-5670  ="opacity:0"
           data-5671  ="opacity:1">
          <img src="img/windows-3/five.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:151px;margin-left: -16px;" 
           data-5100  ="opacity:0"
           data-5700  ="opacity:0"
           data-5701  ="opacity:1">
          <img src="img/windows-3/eight.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:152px;margin-left: 21px;" 
           data-5100  ="opacity:0"
           data-5730  ="opacity:0"
           data-5731  ="opacity:1">
          <img src="img/windows-3/two.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:153px;margin-left: 57px;" 
           data-5100  ="opacity:0"
           data-5760  ="opacity:0"
           data-5761  ="opacity:1">
          <img src="img/windows-3/ace-hearts.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen bsod" style="top:60px;margin-left: -97px;opacity:0;" />
          <img src="img/windows-3/bsod.png" />
      </div>
      <div class="info-box"
       data-5100 ="top:30px;right:50%;margin-right:300px;opacity:0"
       data-5300 ="top:30px;right:50%;margin-right:300px;opacity:1"
       style="width:250px;text-align:right;">
        <h4>More games!</h4>
        <p>Windows 3.0 added more fun <br/>to the PC by including Solitaire, <br/>Hearts and Minesweeper.</p>
        <svg viewBox = "0 0 300 300">
          <g fill="none" stroke="white" stroke-width="1">
            <polyline stroke-dasharray="5,5" points="170 0, 170 20, 170 60, 170 60, 700 60"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-5300="stroke-dashoffset:500;" 
                  data-5900="stroke-dashoffset:0;" />
          </g>
        </svg>
      </div>
    <div class="info-box"
       data-5100 ="top:60px;right:50%;margin-right:-410px;opacity:0"
       data-5300 ="top:60px;right:50%;margin-right:-410px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>More colours!</h4>
        <p>Windows 3.0 supported 16 colors, up from the 6 included in Windows 1.0. </p>
      </div>
    <div class="info-box"
       data-5100 ="top:30px;right:50%;margin-right:-257px;opacity:0"
       data-5300 ="top:30px;right:50%;margin-right:-257px;opacity:1">
        <div class="tooltip" title="<h3>Fun Fact:</h3> 
                            <p>The dreaded 'Blue Screen of Death' first appeared in Windows 3.1.</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=Fun%20fact:%20The%20dreaded%20“Blue%20Screen%20of%20Death”%20first%20appeared%20in%20Windows%203.1.%20http://bit.ly/1hjkPn2' data-url=&quot;http://bit.ly/1hjkPn2&quot; style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/win3.png&description=The%20dreaded%20“Blue%20Screen%20of%20Death”%20first%20appeared%20in%20Windows%203.1.%20&name=Did%20you%20know?' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a> " data-action="Windows-3">
            <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
    </div>
  </div>
</div>
          <!--  Windows 95 Band  --> 
          <div id="Windows-95" class="row mainContent content-versions" data-block="Windows-95">
    <div class="content-year"
         data-6800 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-7600  ="bottom:50%;opacity:0.7;"
         data-8100  ="bottom:60%;opacity:0.7;"
         data-8101  ="bottom[swing]:60%;opacity:0.7;"
         data-8500  ="bottom:100%;opacity:0;">
          <h3>1995</h3>
    </div>  
    <div class="content-version bump-it"
         data-8300    ="top:-130px;" 
         data-8500  ="top:20px;"
         data-9800 ="top[swing]:20px;"
         data-10600 ="top:-980px;">
          <h2>Windows 95</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
    <div class="content-computer bump-it"
         data-7500  ="bottom[sqrt]:-50%;opacity:1;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);" 
         data-8300    ="bottom:40%;opacity:1;"
         data-9800 ="bottom[swing]:40%;opacity:1;"
         data-10600 ="bottom:100%;opacity:0;" >
      <img src="img/windows-95/computer.png" style="z-index:200;position: relative;" alt="Windows 95">
      <div class="content-screen" style="top:75px;margin-left: -97px;">
          <img src="img/windows-95/screen-background.png" />
      </div>
      <div class="content-screen" style="top:180px;margin-left: -207px;"
           data-7600  ="opacity:0" 
           data-8600  ="opacity:0" 
           data-8650 ="opacity:1" >
          <img src="img/windows-95/start-menu.png" />
      </div>
      <div class="info-box"
       data-8300 ="top:50px;right:50%;margin-right:310px;opacity:0"
       data-8500 ="top:50px;right:50%;margin-right:310px;opacity:1"
       style="width:250px;text-align:right;">
        <h4>Windows as <br/>we know it</h4>
        <p>The beloved Start Menu, Task bar, and Windows Explorer <br/>arrived in Windows 95.</p>
      </div>
      <div class="info-box"
       data-8300 ="top:250px;right:50%;margin-right:250px;opacity:0"
       data-8500 ="top:250px;right:50%;margin-right:250px;opacity:1"
       style="width:300px;text-align:left;">
         <svg viewBox = "0 0 300 300">
          <g fill="none" stroke="white" stroke-width="1">
            <polyline stroke-dasharray="5,5" points="170 0, 170 20, 170 70, 170 70, 600 70"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-8500="stroke-dashoffset:500;" 
                  data-9100="stroke-dashoffset:0;" />
          </g>
        </svg>
      </div>
      <div class="info-box"
       data-8300 ="top:0px;right:50%;margin-right:-590px;opacity:0"
       data-8500 ="top:0px;right:50%;margin-right:-590px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>Surfin’ the net</h4>
        <p>Internet Explorer was released in expansions and later releases of Windows 95.</p>
      </div>
      <div class="info-box"
       data-8300 ="top:220px;right:50%;margin-right:-590px;opacity:0"
       data-8500 ="top:220px;right:50%;margin-right:-590px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>Super sound</h4>
        <p>Brian Eno was paid $35,000 to compose the start-up sound. <br/>The piece had to fit 150 <br/>adjectives…in 3.8 seconds.</p>
      </div>
      <div class="info-box"
       data-8300 ="top:250px;right:50%;margin-right:190px;opacity:0"
       data-8500 ="top:250px;right:50%;margin-right:190px;opacity:1">
          <div class="tooltip" title="<h3>Did you know?</h3> 
                            <p>Comic Sans was introduced for the first time in Windows 95.</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=Comic%20Sans%20was%20introduced%20for%20the%20first%20time%20in%20Windows%2095%20–%20unfortunately.%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/win95.png&description=Comic%20Sans%20was%20introduced%20for%20the%20first%20time%20in%20Windows%2095%20–%20unfortunately.&name=Did%20you%20know?' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a> " data-action="Windows-95">
            <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
      </div>
    </div>
</div>
          <!--  Windows 98 Band  --> 
          <div id="Windows-98" class="row mainContent content-versions" data-block="Windows-98">
    <div class="content-year"
         data-9900 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-10700  ="bottom:50%;opacity:0.7;"
         data-11200  ="bottom:60%;opacity:0.7;"
         data-11201  ="bottom[swing]:60%;opacity:0.7;"
         data-11600  ="bottom:100%;opacity:0;">
          <h3>1998</h3>
    </div>
    <div class="content-version"
         data-11400    ="top:-130px;" 
         data-11600  ="top:20px;"
         data-12900 ="top[swing]:20px;"
         data-13700 ="top:-980px;">
          <h2>Windows 98</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
    <div class="content-computer bump-it"
         data-10600  ="bottom[sqrt]:-50%;opacity:1;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);" 
         data-11400    ="bottom:40%;opacity:1;"
         data-12900 ="bottom[swing]:40%;opacity:1;"
         data-13700 ="bottom:100%;opacity:0;" >
      <img src="img/windows-98/computer-1.png" style="z-index:200;position: relative;" alt="Windows 98"
           data-11400    ="display:!inline-block;"
           data-11799  ="display:!inline-block;"
           data-11800  ="display:!none;" />
      <img src="img/windows-98/computer-2.png" style="z-index:200;position: relative;" alt="Windows 98"
           data-11400    ="display:!none;"
           data-11799  ="display:!none;"
           data-11800  ="display:!inline-block;"
           data-11999  ="display:!inline-block;"
           data-12000  ="display:!none;" />
      <img src="img/windows-98/computer-3.png" style="z-index:200;position: relative;" alt="Windows 98" 
           data-11400    ="display:!none;"
           data-11999  ="display:!none;"
           data-12000  ="display:!inline-block;"
           data-12099  ="display:!inline-block;"
           data-12100  ="display:!none;" />
      <img src="img/windows-98/computer-4.png" style="z-index:200;position: relative;" alt="Windows 98"
           data-11400    ="display:!none;"
           data-12099  ="display:!none;"
           data-12100  ="display:!inline-block;">       
      <div class="content-screen" style="top:135px;margin-left: 68px;">
          <img src="img/windows-98/screen-background.png" />
      </div>
      <div class="content-screen-component" style="top:154px;margin-left: 76px;" 
           data-11400  ="opacity:0"
           data-12550  ="opacity:0"
           data-12600  ="opacity:1">
          <img src="img/windows-98/media-player.png" />
      </div>
      <div class="content-screen-component" style="top:185px;margin-left: 77px;" 
           data-11400  ="opacity:0"
           data-12550  ="opacity:0"
           data-12600  ="opacity:1">
          <img src="img/windows-98/windows98-billgates.gif" width="222">
      </div>
      <div class="info-box"
       data-11400 ="top:250px;right:50%;margin-right:-550px;opacity:0"
       data-11600 ="top:250px;right:50%;margin-right:-550px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>Hardware <br/>made easy</h4>
        <p>Windows 98 added support for both DVDs and USB devices, such as mice, keyboards, and fax machines. </p>
      </div>
      <div class="info-box"
       data-11400 ="top:70px;right:50%;margin-right:-550px;opacity:0"
       data-11600 ="top:70px;right:50%;margin-right:-550px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>Quick Launch</h4>
        <p>The Quick Launch made its debut, letting you run programs without the Start menu.</p>
      </div>
      <div class="info-box"
       data-11400 ="top:150px;right:50%;margin-right:-475px;opacity:0"
       data-11600 ="top:150px;right:50%;margin-right:-475px;opacity:1"
       style="width:350px;text-align:left;">
        <svg viewBox = "0 0 300 100">
          <g fill="none" stroke="white" stroke-width="1">
            <polyline stroke-dasharray="5,5" points="170 100, 170 90, 170 80, 100 80, 40 80"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-12200="stroke-dashoffset:500;" 
                  data-12600="stroke-dashoffset:0;" />
          </g>
        </svg>
      </div>
      <div class="info-box"
       data-11400 ="top:15px;right:50%;margin-right:275px;opacity:0"
       data-11600 ="top:15px;right:50%;margin-right:275px;opacity:1">
          <div class="tooltip" title="<h3>Did you know?</h3> 
                            <p>When Bill Gates was demonstrating Windows 98 at an event, the computer crashed, displaying the blue screen of death. Awkward.</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=Before%20launch,%20Windows%2098%20crashed%20during%20a%20live%20demonstration%20on%20CNN.%20Ouch.%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/win98.png&description=When%20Bill%20Gates%20was%20demonstrating%20Windows%2098%20at%20an%20event,%20the%20computer%20crashed,%20displaying%20the%20blue%20screen%20of%20death.%20Awkward.&name=Did%20you%20know?' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a> " data-action="Windows-95">
            <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
      </div>
    </div>
</div>
          <!--  Windows XP Band  --> 
          <div id="Windows-XP" class="row mainContent content-versions" data-block="Windows-XP">
    <div class="content-year"
         data-13000 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-13800  ="bottom:50%;opacity:0.7;"
         data-14300  ="bottom:60%;opacity:0.7;"
         data-14301  ="bottom[swing]:60%;opacity:0.7;"
         data-14700  ="bottom:100%;opacity:0;">
          <h3>2001</h3>
    </div>
    <div class="content-version"
         data-14500    ="top:-130px;" 
         data-14700  ="top:20px;"
         data-16000 ="top[swing]:20px;"
         data-16800 ="top:-980px;">
          <h2>Windows XP</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
    <div class="content-computer"
         data-13500  ="top[sqrt]:1060px;opacity:0" 
         data-14700    ="top:200px;opacity:1"
         data-16000 ="top[swing]:200px;opacity:1"
         data-16800 ="top:-515px;opacity:0" >
      <img src="img/windows-xp/computer.png" style="z-index:200;position: relative;" alt="Windows XP">
      <div class="content-screen" style="top:80px;margin-left: 35px;">
          <img src="img/windows-xp/screen-background.png" />
      </div>
      <div class="content-screen-component" 
           data-14400  ="top:95px;margin-left: -77px;"
           data-15400  ="top:95px;margin-left: -117px;" />
          <img src="img/windows-xp/cloud-1.png">
      </div>
      <div class="content-screen-component" 
           data-14390  ="top:177px;margin-left: -43px;"
           data-15400  ="top:177px;margin-left: -63px;">
          <img src="img/windows-xp/cloud-2.png">
      </div>
      <div class="content-screen-component" 
           data-14400  ="top:145px;margin-left: 13px;"
           data-15400  ="top:145px;margin-left: -83px;">
          <img src="img/windows-xp/cloud-3.png">
      </div>
      <div class="content-screen-component"
           data-14400  ="top:70px;margin-left: 102px;"
           data-15400  ="top:70px;margin-left: 72px;">
          <img src="img/windows-xp/cloud-4.png">
      </div>
      <div class="content-screen-component" 
           data-14400  ="top:163px;margin-left: 100px;"
           data-15400  ="top:163px;margin-left: 40px;">
          <img src="img/windows-xp/cloud-5.png">
      </div>
      <div class="content-screen-component" 
           data-14400  ="top:162px;margin-left: 198px"
           data-15400  ="top:162px;margin-left: 118px">
          <img src="img/windows-xp/cloud-6.png">
      </div>
      <div class="info-box"
       data-14500 ="top:20px;right:50%;margin-right:-550px;opacity:0"
       data-14700 ="top:20px;right:50%;margin-right:-550px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>eXPerience</h4>
        <p>Windows XP Actually stands for 'experience'.</p>
      </div>
      <div class="info-box"
       data-14500 ="top:250px;right:50%;margin-right:-550px;opacity:0"
       data-14700 ="top:250px;right:50%;margin-right:-550px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>Lookin’ good, Luna</h4>
        <p>Windows XP’s Luna theme was a dramatic change from the look introduced in Windows 95. </p>
      </div>
      <div class="info-box"
       data-14500 ="top:150px;right:50%;margin-right:-475px;opacity:0"
       data-14700 ="top:150px;right:50%;margin-right:-475px;opacity:1"
       style="width:350px;text-align:left;">
        <svg viewBox = "0 0 300 100">
          <g fill="none" stroke="white" stroke-width="1">
            <polyline  points="170 100, 170 90, 170 80, 100 80, 40 80"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-14700="stroke-dashoffset:500;" 
                  data-15300="stroke-dashoffset:0;" />
          </g>
        </svg>
      </div>
      <div class="info-box"
       data-14500 ="top:-80px;right:50%;margin-right:-475px;opacity:0"
       data-14700 ="top:-80px;right:50%;margin-right:-475px;opacity:1"
       style="width:350px;text-align:left;">
        <svg viewBox = "0 0 300 300">
          <g fill="none" stroke="white" stroke-width="1">
            <polyline  points="170 100, 170 90, 170 80, 100 80, 40 80, 0 80, 0 40, 0 0"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-14700="stroke-dashoffset:500;" 
                  data-15300="stroke-dashoffset:0;" />
          </g>
        </svg>
      </div>
      <div class="info-box"
       data-14500 ="top:315px;right:50%;margin-right:123px;opacity:0"
       data-14700 ="top:315px;right:50%;margin-right:123px;opacity:1">
          <div class="tooltip" title="<h3>Did you know?</h3> 
                            <p>Even though it’s 14 years old, XP is the world’s 2nd most popular operating system.</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=Even%20though%20Windows%20XP%20is%2014%20years%20old,%20XP%20is%20the%20second%20most%20popular%20OS%20in%20the%20world!%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/winXP.png&description=Even%20though%20Windows%20XP%20is%2014%20years%20old,%20XP%20is%20the%20world’s%202nd%20most%20popular%20OS.&name=Did%20you%20know?' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a> " data-action="Windows-XP">
            <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
      </div>
    </div>
</div>
          <!--  Windows Vista Band  --> 
          <div id="Windows-Vista" class="row mainContent content-versions" data-block="Windows-Vista">
    <div class="content-year"
         data-16200 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-17000  ="bottom:50%;opacity:0.7;"
         data-17500  ="bottom:60%;opacity:0.7;"
         data-17501  ="bottom[swing]:60%;opacity:0.7;"
         data-17900  ="bottom:100%;opacity:0;">
          <h3>2006</h3>
    </div>
    <div class="content-version"
         data-17700    ="top:-130px;" 
         data-17900  ="top:20px;"
         data-19200 ="top[swing]:20px;"
         data-20000 ="top:-980px;">
          <h2>Windows Vista</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
    <div class="content-computer bump-it"
         data-16900  ="bottom[sqrt]:-50%;opacity:1;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);" 
         data-17700    ="bottom:40%;opacity:1;"
         data-19200 ="bottom[swing]:40%;opacity:1;"
         data-20000 ="bottom:100%;opacity:0;" >
      <img src="img/windows-vista/computer.png" style="z-index:200;position: relative;" alt="Windows Vista">
      <div class="content-screen" style="top:46px;margin-left: 2px;" />
          <img src="img/windows-vista/screen-background.png" />
      </div>
      <div class="content-screen-component" style="top:55px;margin-left: -70px;" 
           data-17700    ="opacity:0"
           data-18900  ="top:55px;margin-left: -70px;opacity:0;"
           data-19200  ="top:80px;margin-left: -35px;opacity:1;">
          <img src="img/windows-vista/photo-first-screen.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:55px;margin-left: -70px;" 
           data-17700    ="opacity:0"
           data-18200  ="top:55px;margin-left: -70px;opacity:0;"
           data-18500  ="top:80px;margin-left: -35px;opacity:1;"
           data-18900 ="top:80px;margin-left: -35px;opacity:1;"
           data-19200 ="top:110px;margin-left: 31px;opacity:1;">
          <img src="img/windows-vista/ms-first-screen.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:80px;margin-left: -35px;" 
           data-17700    ="opacity:0"
           data-18000  ="top:80px;margin-left: -35px;opacity:1;"
           data-18200  ="top:80px;margin-left: -35px;"
           data-18500  ="top:110px;margin-left: 31px;"
           data-18900 ="top:110px;margin-left: 31px;"
           data-19200 ="top:147px;margin-left: 113px;">
          <img src="img/windows-vista/background-first-screen.png" style="top:60px;margin-left: -97px;">
      </div>
      <div class="content-screen-component" style="top:110px;margin-left: -17px;" 
           data-17700    ="opacity:0"
           data-18000  ="top:110px;margin-left: -17px;opacity:1;"
           data-18200  ="top:110px;margin-left: -17px;"
           data-18500  ="top:148px;margin-left: 64px;"
           data-18900 ="top:148px;margin-left: 64px;opacity:1;"
           data-19200 ="top:185px;margin-left: 140px;opacity:0;">
          <img src="img/windows-vista/photo-first-screen.png" />
      </div>
      <div class="content-screen-component" style="top:148px;margin-left: 65px;" 
           data-17700    ="opacity:0"
           data-18000  ="top:148px;margin-left: 65px;opacity:1;"
           data-18200  ="top:148px;margin-left: 65px;"
           data-18500  ="top:185px;margin-left: 140px;opacity:0;">
          <img src="img/windows-vista/ms-first-screen.png" />
      </div>
      <div class="info-box"
       data-17700 ="top:30px;right:50%;margin-right:300px;opacity:0"
       data-17900 ="top:30px;right:50%;margin-right:300px;opacity:1"
       style="width:250px;text-align:right;">
        <h4>Flippin’ awesome</h4>
        <p>Windows Flip 3D lets users cycle between all their open windows.</p>
        <svg viewBox = "0 0 300 300">
          <g fill="none" stroke="white" stroke-width="2">
            <polyline stroke-dasharray="5,5" points="170 0, 170 20, 170 60, 170 60, 700 60"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-17900="stroke-dashoffset:500;" 
                  data-18500="stroke-dashoffset:0;" />
          </g>
        </svg>
      </div>
    <div class="info-box"
       data-17700 ="top:45px;right:50%;margin-right:-540px;opacity:0"
       data-17900 ="top:45px;right:50%;margin-right:-540px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>Playing it safe</h4>
        <p>On release, Windows Vista became the most secure operating system <br/>of its time.</p>
      </div>
    <div class="info-box"
       data-17700 ="top:215px;right:50%;margin-right:-480px;opacity:0"
       data-17900 ="top:215px;right:50%;margin-right:-480px;opacity:1">
        <div class="tooltip" title="<h3>Did you know?</h3> 
                            <p>The glassy look of Aero look was first introduced in Vista. It stands for 'Authentic', 'Energetic', 'Reflective', and 'Open'.</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=The%20Aero%20look%20-%20introduced%20in%20Vista-%20stands%20for%20Authentic,%20Energetic,%20Reflective,%20and%20Open.%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/winVista.png&description=The%20glassy%20look%20of%20Aero%20look%20was%20first%20introduced%20in%20Vista.%20It%20stands%20for%20'Authentic',%20'Energetic',%20'Reflective',%20and%20'Open'.&name=Did%20you%20know?' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>" data-action="Windows-Vista">
            <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
    </div>
  </div>
</div>
          <!--  Windows 7 Band  --> 
          <div id="Windows-7" class="row mainContent content-versions" data-block="Windows-7">
    <div class="content-year"
         data-19300 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-20100  ="bottom:50%;opacity:0.7;"
         data-20600  ="bottom:60%;opacity:0.7;"
         data-20601  ="bottom[swing]:60%;opacity:0.7;"
         data-21000  ="bottom:100%;opacity:0;">
          <h3>2009</h3>
    </div>
    <div class="content-version"
         data-20800    ="top:-130px;" 
         data-21000  ="top:20px;"
         data-22300 ="top[swing]:20px;"
         data-23100 ="top:-980px;">
          <h2>Windows 7</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
    <div class="content-computer bump-it"
         data-20000  ="bottom[sqrt]:-50%;opacity:1;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);" 
         data-20800    ="bottom:40%;opacity:1;"
         data-22300 ="bottom[swing]:40%;opacity:1;"
         data-23100 ="bottom:100%;opacity:0;" >
      <img src="img/windows-7/computer.png" style="z-index:200;position: relative;" alt="Windows 7">
      <div class="content-screen" style="top:30px;margin-left: 0px;">
          <img src="img/windows-7/screen-background.png" />
      </div>
      <div class="content-screen" style="top:329px;margin-left: 0px;"
           data-21000 ="opacity:1;"
           data-21375 ="opacity:1;"
           data-21500 ="opacity:0;">
          <img src="img/windows-7/toolbar1.png" />
      </div>
      <div class="content-screen" style="top:329px;margin-left: 0px;"
           data-20800 ="opacity:0;"
           data-21000 ="opacity:0;"
           data-21375 ="opacity:0;"
           data-21500 ="opacity:1;">
          <img src="img/windows-7/toolbar2.png" />
      </div>
      <div class="content-screen" style="top:247px;margin-left: -115px;"
           data-20800 ="opacity:0;"
           data-21000 ="opacity:0;"
           data-21425 ="opacity:0;"
           data-21500 ="opacity:1;"
           data-21700 ="opacity:1;"
           data-21730 ="opacity:0;">
          <img src="img/windows-7/window-preview.png" />
      </div>
      <div class="content-screen" style="top:252px;margin-left: -70px;"
           data-20800   ="top:252px;opacity:0;"
           data-21750 ="top:252px;margin-left: -70px;opacity:0;"
           data-22000 ="top:80px;margin-left: 5px;opacity:1;">
          <img src="img/windows-7/screen-popup.png" 
               data-21750 ="width:120px;height:70px;"
               data-22000 ="width:360px;height:210px;">
      </div>
      <div class="content-screen" style="top:300px;margin-left: -180px;"
           data-21000 ="top:300px;margin-left: -180px;"
           data-21300 ="top:300px;margin-left: -180px;"
           data-21500 ="top[swing]:335px;margin-left[swing]: -200px;"
           data-21700 ="top:290px;margin-left: -100px;">
          <img src="img/windows-7/mouse.png" />
      </div>
      <div class="info-box"
       data-20800 ="top:50px;right:50%;margin-right:310px;opacity:0"
       data-21000 ="top:50px;right:50%;margin-right:310px;opacity:1"
       style="width:250px;text-align:right;">
        <h4>Powerful task bar</h4>
        <p>The new enhanced Windows 7 taskbar includes Jump Lists, <br/>Pinning and Live previews.</p>
        <svg viewBox = "0 0 300 300">
          <g fill="none" stroke="white" stroke-width="2">
            <polyline stroke-dasharray="5,5" points="170 0, 170 20, 170 140, 170 140, 800 140"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-21000="stroke-dashoffset:500;" 
                  data-21600="stroke-dashoffset:0;" />
          </g>
        </svg>
      </div>
      <div class="info-box"
       data-20800 ="top:0px;right:50%;margin-right:-590px;opacity:0"
       data-21000 ="top:0px;right:50%;margin-right:-590px;opacity:1"
       style="width:250px;text-align:left;">
        <h4>A fun, <br/>friendly interface</h4>
        <p>Snap, Peek and Shake features make interacting with Windows <br/>fun and easy.</p>
      </div>
      <div class="info-box"
       data-20800 ="top:270px;right:50%;margin-right:220px;opacity:0"
       data-21000 ="top:270px;right:50%;margin-right:220px;opacity:1">
          <div class="tooltip" title="<h3>Did you know?</h3> 
                            <p>Windows 7 is the most popular OS in the world!</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=Did%20you%20know:%20Windows%207%20is%20the%20most%20popular%20OS%20in%20the%20world!%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/win7.png&description=Nearly%2060%%20of%20computers%20are%20running%20Windows%207,%20making%20it%20the%20most%20popular%20OS%20in%20the%20world.&name=Did%20you%20know?' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>" data-action="Windows-7">
            <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
      </div>
    </div>
</div>
          <!--  Windows 8 Band  --> 
          <div id="Windows-8" class="row mainContent content-versions" data-block="Windows-8">
    <div class="content-year"
         data-22500 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-23300  ="bottom:50%;opacity:0.7;"
         data-23800  ="bottom:60%;opacity:0.7;"
         data-23801  ="bottom[swing]:60%;opacity:0.7;"
         data-24200  ="bottom:100%;opacity:0;">
          <h3>2012</h3>
    </div>
    <div class="content-version"
         data-24000    ="top:-130px;" 
         data-24200  ="top:20px;"
         data-25500 ="top[swing]:20px;"
         data-26300 ="top:-980px;">
          <h2>Windows 8</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
    <div class="content-computer bump-it"
         data-23200  ="bottom[sqrt]:-50%;opacity:1;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);" 
         data-24000    ="bottom:40%;opacity:1;"
         data-25500 ="bottom[swing]:40%;opacity:1;"
         data-26300 ="bottom:100%;opacity:0;" >
      <img src="img/windows-8/computer.png" style="z-index:200;position: relative;" alt="Windows 8">
      <div class="content-screen" style="top:54px;margin-left: 1px;">
          <img src="img/windows-8/screen-background.png" />
      </div>
      <div class="content-screen" style="top:75px;margin-left: -200px;"
           data-24200 ="opacity:1;">
          <img src="img/windows-8/start.png" />
      </div>
      <div class="content-screen" style="top:120px;margin-left: -150px;"
           data-24200 ="opacity:0;"
           data-24400 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24450 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-mail.png" />
      </div>
      <div class="content-screen" style="top:195px;margin-left: -150px;"
           data-24200 ="opacity:0;"
           data-24425 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24475 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-messages.png" />
      </div>
      <div class="content-screen" style="top:270px;margin-left: -150px;"
           data-24200 ="opacity:0;"
           data-24450 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24500 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-background.png" />
      </div>
      <div class="content-screen" style="top:345px;margin-left: -150px;"
           data-24200 ="opacity:0;"
           data-24475 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24525 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-calendar.png" />
      </div>
      <div class="content-screen" style="top:120px;margin-left: 2px;"
           data-24200 ="opacity:0;"
           data-24450 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24500 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-contacts.png" />
      </div>
      <div class="content-screen" style="top:195px;margin-left: 2px;"
           data-24200 ="opacity:0;"
           data-24475 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24525 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-video.png" />
      </div>
      <div class="content-screen" style="top:270px;margin-left: 2px;"
           data-24200 ="opacity:0;"
           data-24500 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24550 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-people.png" />
      </div>
      <div class="content-screen" style="top:345px;margin-left: 2px;"
           data-24200 ="opacity:0;"
           data-24525 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24575 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-weather.png" />
      </div>
      <div class="content-screen" style="top:120px;margin-left: 116px;"
           data-24200 ="opacity:0;"
           data-24500 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24550 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-internet-explorer.png" />
      </div>
      <div class="content-screen" style="top:120px;margin-left: 192px;"
           data-24200 ="opacity:0;"
           data-24525 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24575 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-store.png" />
      </div>
      <div class="content-screen" style="top:195px;margin-left: 116px;"
           data-24200 ="opacity:0;"
           data-24550 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24600 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-maps.png" />
      </div>
      <div class="content-screen" style="top:195px;margin-left: 192px;"
           data-24200 ="opacity:0;"
           data-24575 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24625 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-weather2.png" />
      </div>
      <div class="content-screen" style="top:270px;margin-left: 154px;"
           data-24200 ="opacity:0;"
           data-24600 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24650 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-music.png" />
      </div>
      <div class="content-screen" style="top:345px;margin-left: 116px;"
           data-24200 ="opacity:0;"
           data-24625 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24675 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-xbox.png" />
      </div>
      <div class="content-screen" style="top:345px;margin-left: 192px;"
           data-24200 ="opacity:0;"
           data-24650 ="opacity:0;transform:scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-webkit-transform: scale(0.6,0.6);"
           data-24700 ="opacity:1;transform:scale(1,1);-ms-transform: scale(1,1);-webkit-transform: scale(1,1);">
          <img src="img/windows-8/tile-photos.png" />
      </div>
      <div class="info-box"
       data-24000 ="top:50px;right:50%;margin-right:370px;opacity:0"
       data-24200 ="top:50px;right:50%;margin-right:370px;opacity:1"
       style="width:200px;text-align:right;">
        <h4>See what's in store</h4>
        <p>In Windows 8, Microsoft introduced the Windows Store, with over 200, 000 apps for Windows devices.</p>
        <svg viewBox = "0 0 300 300">
          <g fill="none" stroke="white" stroke-width="2">
            <polyline stroke-dasharray="5,5" points="170 0, 170 20, 170 140, 170 140, 800 140"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-24200="stroke-dashoffset:500;" 
                  data-24800="stroke-dashoffset:0;" />
          </g>
        </svg>
      </div>
      <div class="info-box"
       data-24000 ="top:0px;right:50%;margin-right:-580px;opacity:0"
       data-24200 ="top:0px;right:50%;margin-right:-580px;opacity:1"
       style="width:200px;text-align:left;">
        <h4>In touch with tablets</h4>
        <p>Windows 8 was designed to be used easily with touch or traditional mouse and keyboard</p>
      </div>
      <div class="info-box"
       data-24000 ="top:-30px;right:50%;margin-right:110px;opacity:0"
       data-24200 ="top:-30px;right:50%;margin-right:110px;opacity:1">
          <div class="tooltip" title="<h3>Did you know?</h3> 
                            <p>While Microsoft removed the Start button from Windows 8, you can right click the bottom right corner to reveal a hidden Start menu.</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=Right-click%20on%20the%20bottom%20left%20corner%20to%20reveal%20a%20hidden%20Start%20menu%20in%20Windows%208%20and%208.1.%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/win8.png&description=Right%20-clicking%20the%20bottom%20left%20corner%20of%20the%20screen%20brings%20up%20a%20hidden%20Start%20menu%20in%20Windows%208%20and%208.1.&name=Did%20you%20know?' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>" data-action="Windows-8">
            <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
      </div>
    </div>
</div>
          <!--  Windows 10 Band  --> 
          <div id="Windows-10" class="row mainContent content-versions" data-block="Windows-10">
    <div class="content-year"
         data-25700 ="bottom[sqrt]:-50%;opacity:0;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);"
         data-26500  ="bottom:50%;opacity:0.7;"
         data-27000  ="bottom:60%;opacity:0.7;"
         data-27001  ="bottom[swing]:60%;opacity:0.7;"
         data-27400  ="bottom:100%;opacity:0;">
          <h3>2015</h3>
    </div>
    <div class="content-version"
         data-27200    ="top:-130px;" 
         data-27400  ="top:20px;"
         data-30000 ="top[swing]:20px;"
         data-30800 ="top:-980px;">
          <h2>Windows 10</h2>
          <div class="banner">
            <img src="img/dark-banner.png" />
          </div>
    </div>
    <div class="content-computer bump-it"
         data-26400  ="bottom[sqrt]:-50%;opacity:1;transform: translate(0%, 50%);-ms-transform: translate(0%, -50%);" 
         data-27200    ="bottom:40%;opacity:1;"
         data-30000 ="bottom[swing]:40%;opacity:1;"
         data-30800 ="bottom:40%;" >
      <img src="img/windows-10/computer.png" style="z-index:200;position: relative;" alt="Windows 98"
           data-30000  ="transform:scale(1,1);"
           data-30800  ="transform:scale(3.5,3.5)" />
      <div class="content-screen" style="top:29px;margin-left: 0px;"
           data-30000  ="top:29px;"
           data-30800  ="top:-120px;">
          <img src="img/windows-10/screen-background.png" 
               data-30000  ="transform:scale(1,1);"
               data-30800  ="transform:scale(3.5,3.5)">
      </div>
      <div class="content-screen" style="top:326px;margin-left: 0px;"
           data-27400 ="opacity:1;"
           data-27775 ="opacity:1;"
           data-27900 ="opacity:0;">
          <img src="img/windows-10/taskbar-1.png" />
      </div>
      <div class="content-screen" style="top:326px;margin-left: 0px;"
           data-27200 ="opacity:0;"
           data-27400 ="opacity:0;"
           data-27775 ="opacity:0;"
           data-27900 ="opacity:1;"
           data-29400 ="opacity:1;"
           data-29401 ="opacity:0;">
          <img src="img/windows-10/taskbar-2.png" />
      </div>
      <div class="content-screen" style="top:326px;margin-left: 0px;"
           data-27200 ="opacity:0;"
           data-29400 ="opacity:0;"
           data-29401 ="opacity:1;"
           data-29700 ="opacity:1;"
           data-29701 ="opacity:0;">
          <img src="img/windows-10/taskbar-3.png" />
      </div>
      <div class="content-screen" style="top:326px;margin-left: 0px;"
           data-27200 ="opacity:0;"
           data-29700 ="opacity:0;"
           data-29701 ="opacity:1;"
           data-30000  ="transform:scale(1,1);top:326px;"
           data-30800  ="transform:scale(3.5,3.5);top:555px;">
          <img src="img/windows-10/taskbar-4.png" />
      </div>
      <div class="content-screen" style="top:120px;margin-left: -141px;"
           data-27200 ="opacity:0;"
           data-27400 ="opacity:0;"
           data-27825 ="opacity:0;"
           data-27900 ="opacity:1;"
           data-28100 ="opacity:1;"
           data-29200 ="opacity:1;"
           data-29201 ="opacity:0;">
          <img src="img/windows-10/blank-cortana.jpg" />
      </div>
      <div class="content-screen" style="top:120px;margin-left: -141px;"
           data-27200 ="opacity:0;"
           data-29100 ="opacity:0;"
           data-29200 ="opacity:1;"
           data-29500 ="opacity:1;"
           data-29600 ="opacity:0;">
          <img src="img/windows-10/cortana-5.jpg" />
      </div>
      <div class="content-screen" style="top:68px;margin-left: -2px;"
            data-30000 ="top:68px;"
            data-30800 ="top:-450px;"
           >
          <img src="img/windows-10/oth-popup.png" 
               data-27200 ="opacity:0;"
               data-29800 ="opacity:0;width:20%;"
               data-29900 ="opacity:1;width:20%;"
               data-30000 ="width:20%;"
               data-30800 ="width:100%;">
      </div>
      <div class="content-screen" style="top:300px;margin-left: -180px;"
           data-27400 ="top:300px;margin-left: -180px;"
           data-27700 ="top:300px;margin-left: -180px;"
           data-27900 ="top[swing]:335px;margin-left[swing]: -200px;"
           data-28100 ="top:335px;margin-left: -100px;"
           data-29500 ="top:335px;margin-left: -100px;"
           data-29700 ="top:331px;margin-left: -57px;">
          <img src="img/windows-7/mouse.png" />
      </div>
      <div class="content-screen" style="top:60x;margin-left: -141px;"
           data-27200 ="opacity:0;"
           data-27400 ="opacity:0;"
           data-27925 ="opacity:0;"
           data-28050 ="opacity:1;"
           data-28100 ="opacity:1;"
           data-28750 ="opacity:1;"
           data-28751 ="opacity:0;">
          <div class="cortana">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
          </div>
      </div>
      <div class="content-screen" style="top:55x;margin-left: -149px;"
           data-27200   ="opacity:0;top:40x;"
           data-28750="opacity:0;top:50x;"
           data-28851 ="opacity:1;top:50x;"
           data-29050 ="opacity:1;top:50x;"
           data-29150 ="opacity:0;top:50x;">
          <div class="cortana-spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
          </div>
      </div>
      <div class="content-screen" style="top:220px;margin-left: -140px;"
           data-27200 ="opacity:0;"
           data-27400 ="opacity:0;"
           data-28000 ="opacity:0;"           
           data-28100 ="opacity:1;"
           data-28750 ="opacity:1;"
           data-28751 ="opacity:0;">
          <p style="color:#000;font-size:12px;">Hi! How can I help?</p>
      </div>
      <div class="content-screen" style="top:320px;margin-left: -164px;"
           data-27200 ="opacity:0;"
           data-27400 ="opacity:1;"
           data-28000 ="opacity:1;"
           data-28400 ="opacity:0;"           
           data-28425 ="opacity:0;">
          <p style="color:#000;font-size:10px;">Ask me anything</p>
      </div>
       <div class="content-screen" style="top:320px;margin-left: -184px;"
           data-27200 ="opacity:0;"
           data-27400 ="opacity:0;"
           data-28400 ="opacity:0;"           
           data-28425 ="opacity:1;"
           data-29400 ="opacity:1;"
           data-29450 ="opacity:0;">
          <p style="color:#000;font-size:10px;">What's</p>
      </div>
      <div class="content-screen" style="top:320px;margin-left: -158px;"
           data-27200 ="opacity:0;"
           data-27400 ="opacity:0;"
           data-28450 ="opacity:0;"           
           data-28475 ="opacity:1;"
           data-29400 ="opacity:1;"
           data-29450 ="opacity:0;">
          <p style="color:#000;font-size:10px;">the</p>
      </div>
      <div class="content-screen" style="top:320px;margin-left: -127px;"
           data-27200 ="opacity:0;"
           data-27400 ="opacity:0;"
           data-28500 ="opacity:0;"           
           data-28525 ="opacity:1;"
           data-29400 ="opacity:1;"
           data-29450 ="opacity:0;">
          <p style="color:#000;font-size:10px;">weather?</p>
      </div>
      <div class="info-box"
       data-28100 ="top:-10px;right:50%;margin-right:310px;opacity:0"
       data-28200 ="top:-10px;right:50%;margin-right:310px;opacity:1"
       data-30000  ="opacity:1;margin-right:310px;"
       data-30200  ="opacity:0;margin-right:510px;"
       style="width:250px;text-align:right;">
        <h4>Meet Cortana</h4>
        <p>Cortana, named after the Halo character is the smart digital assistant on your Windows desktop and phone.</p>
      </div>
      <div class="info-box"
       data-27200 ="top:165px;right:50%;margin-right:200px;opacity:0"
       data-27400 ="top:165px;right:50%;margin-right:200px;opacity:1"
       data-30000  ="opacity:1;margin-right:200px;"
       data-30200  ="opacity:0;margin-right:400px;"
       style="width:350px;text-align:left;">
        <svg viewBox = "0 0 300 300">
          <g fill="none" stroke="white" stroke-width="1">
            <polyline stroke-dasharray="5,5" points="170 0, 170 20, 170 30, 170 30, 800 30"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-28200="stroke-dashoffset:500;" 
                  data-28700="stroke-dashoffset:0;"
                  data-29500="stroke-dashoffset:0;"
                  data-29800="stroke-dashoffset:500;" />
          </g>
        </svg>
      </div>
      <div class="info-box"
       data-27200 ="top:190px;right:50%;margin-right:310px;opacity:0"
       data-27400 ="top:190px;right:50%;margin-right:310px;opacity:1"
       data-30000  ="opacity:1;margin-right:310px;"
       data-30200  ="opacity:0;margin-right:510px;"
       style="width:250px;text-align:right;">
        <h4>Start Menu</h4>
        <p>The Windows Start menu <br/>is back & better than ever!</p>
      </div>
      <div class="info-box"
       data-27200 ="top:320px;right:50%;margin-right:238px;opacity:0"
       data-27400 ="top:320px;right:50%;margin-right:238px;opacity:1"
       data-30000  ="opacity:1;margin-right:238px;"
       data-30200  ="opacity:0;margin-right:400px;"
       style="width:300px;text-align:left;">
        <svg viewBox = "0 0 300 300">
          <g fill="none" stroke="white" stroke-width="1">
            <polyline stroke-dasharray="5,5" points="170 0, 170 20, 170 20, 170 20, 400 20"  style="stroke-opacity:1;stroke-dasharray:500;stroke-dashoffset:0"
                  data-27400="stroke-dashoffset:500;" 
                  data-27800="stroke-dashoffset:0;"
                  data-29500="stroke-dashoffset:0;"
                  data-29800="stroke-dashoffset:500;" />
          </g>
        </svg>
      </div>
      <div class="info-box"
       data-27200 ="top:0px;right:50%;margin-right:-550px;opacity:0"
       data-27400 ="top:0px;right:50%;margin-right:-550px;opacity:1"
       data-30000  ="opacity:1;margin-right:-550px;"
       data-30200  ="opacity:0;margin-right:-750px;"
       style="width:250px;text-align:left;">
        <h4>Cutting edge</h4>
        <p>Microsoft’s new Edge browser features a reading mode, annotations, touch compatibility, <br/>& more.</p>
      </div>
      <div class="info-box"
       data-27200 ="top:270px;right:50%;margin-right:220px;opacity:0"
       data-27400 ="top:270px;right:50%;margin-right:220px;opacity:1"
       data-30000  ="opacity:1;"
       data-30200  ="opacity:0;">
          <div class="tooltip" title="<h3>Did you know?</h3> 
                            <p>You can stream Xbox games to Windows 10.</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=See%20how%20Windows%20has%20evolved%20over%20the%20years%20-%20from%20Windows%201.0%20to%20Windows%2010%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/win10.png&description=See%20how%20Windows%20has%20evolved%20over%20the%20years%20-%20from%20Windows%201.0%20to%20Windows%2010&name=Did%20you%20know?' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>" data-action="Windows-10">
            <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
          </div>
        </div>
      </div>
    </div>
</div>
          <!--  Signup Band  --> 
          <div id="Block11" class="row mainContent" data-block="Block11">
	<div class="content-signup"
         data-0 = "display:!none"
         data-30399  ="position:!absolute;opacity:0:" 
         data-30400  ="position:!fixed;opacity:0;display:!block;" 
         data-31200    ="opacity:1" style="display:none;">
        <div class="osx">
	      	<h4>Parallels and Windows are the perfect pair. <a href="http://onthehub.com/download/software-discounts/parallels-desktop-for-mac">Check for your discount now <i class="fa fa-share"></i></a></h4>
	      </div>
        <div class="windows win-95">
          <h4>Windows 95? Maybe it's time to <a href="http://onthehub.com/download/free-software/windows-10-education/">upgrade. <i class="fa fa-share"></i></a></h4>
        </div>
        <div class="windows win-98">
          <h4>Windows 98? You know it's safe to leave your Y2K bunker, right? <a href="http://onthehub.com/download/free-software/windows-10-education/"><i class="fa fa-share"></i></a></h4>
        </div>
        <div class="windows win-xp">
          <h4>Windows XP is the most attacked OS of all time. <a href="http://onthehub.com/download/free-software/windows-10-education/">Upgrade in the name of security! <i class="fa fa-share"></i></a></h4>
        </div>
        <div class="windows win-vista">
          <h4>Support for Vista ended in 2012 - but the world didn't. Maybe it's time to <a href="http://onthehub.com/download/free-software/windows-10-education/">upgrade? <i class="fa fa-share"></i></a></h4>
        </div>
        <div class="windows win-7">
          <h4>Yes, the Start menu is back to normal. It's safe to <a href="http://onthehub.com/download/free-software/windows-10-education/">upgrade now. <i class="fa fa-share"></i></a></h4>
        </div>
        <div class="windows win-8">
          <h4>Running Windows 8? Upgrade now for a new Start menu, Cortana, multiple desktops and <a href="http://onthehub.com/download/free-software/windows-10-education/">more. <i class="fa fa-share"></i></a></h4>
        </div>
        <div class="content-centered">
          <h2> Students can get</br> Windows 10 Education for free now</h2>
          <div class="button" id="finder_btn">
          	 <p>Search for your school to see if you qualify</p>
          </div>
	        <script>
              function sfiFrameHeight(sfHeight){
                  if(sfHeight < 400){
                      $("#sf_eow").css("height", "400px");
                  }else{
                      $("#sf_eow").css("height", sfHeight);   
                  }
              }
          </script>
	      <div id="toggle_finder" style="display: none;width: 60%;margin:0 auto;">
            <iframe src="schoolfinder.php" style="overflow: hidden; border: none; width: 100%;" id="sf_eow"></iframe>
          </div>
          <div class="win-10">
             <h3> Whoa, Looks like you already have Windows 10! Clippy would be proud!</h3>
          </div>
          <div class="links">
          	<div class="link">
          	 	<a href="#">
	          		<img src="img/windows-10/restart-icon.png" />
	          		<p>Restart</p>
          		</a>
          	</div>
          	<div class="link tooltip"
                 title="<h3>Share!</h3> 
                            <p>See how Windows has evolved over the years - from Windows 1.0 to Windows 10</p>
                            <a href='https://twitter.com/intent/tweet?button_hashtag=EvolutionOfWindows&text=See%20how%20Windows%20has%20evolved%20over%20the%20years%20-%20from%20Windows%201.0%20to%20Windows%2010%20http://bit.ly/1hjkPn2' data-url='http://bit.ly/1hjkPn2' style='color:#FFF;'>
                              <span class=&quot;fa-stack fa-lg twitter&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-twitter fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>  
                            <a href='https://www.facebook.com/dialog/feed?app_id=1599637780309807&redirect_uri=http://onthehub.com/evolution-of-windows/&link=https://onthehub.com/evolution-of-windows&picture=http://onthehub.com/evolution-of-windows/img/social/win10.png&description=See%20how%20Windows%20has%20evolved%20over%20the%20years%20-%20from%20Windows%201.0%20to%20Windows%2010&name=Watch%20the%20evolution%20of%20Windows!' target='_blank'>
                              <span class=&quot;fa-stack fa-lg facebook&quot;>
                                <i class=&quot;fa fa-circle fa-stack-2x&quot;></i>
                                <i class=&quot;fa fa-facebook fa-stack-1x fa-inverse&quot;></i>
                              </span>
                            </a>" >
          		<img src="img/windows-10/share-icon.png" />
          		<p>Share this page</p>
          	</div>
          </div>
        </div>
    </div>
</div>
      </div>
  </div>
   <!-- INCLUDE TRACKING -->
       <!-- START GOOGLE ANALYTICS.JS -->
    <script> 
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','/www.google-analytics.com/analytics.js','ga'); 
      ga('create', 'UA-2768482-18', 'onthehub.com');
      ga('require', 'displayfeatures');
      ga('send', 'pageview'); 
    </script>
    <!-- END GOOGLE ANALYTICS.JS -->
    <!-- BUTTON TRACKING -->
    <script type="text/javascript">
    //tib = Track In Bound
    function tib(link, category, action, label) {  
        try { 
        // NEW Analytics command
        ga('send', 'event', category, action, label);
        $('html, body').animate({scrollTop: link }, 3000);
        } catch(err){}
      }
      // <a onclick="tib('.minitab17', 'Minitab LP v2', 'Minitab LP v2 - Onpage', 'Minitab LP v2 - Onpage - Menu1 - Minitab');">link</a>
      //tob = Track Out Bound   
      function tob(link, category, action, label) {  
        try { 
        // NEW Analytics command
        ga('send', 'event', category, action, label);
        } catch(err){}
        setTimeout(function() {
        document.location.href = link.href;
        }, 100);
      }
    </script>
    <!-- END BUTTON TRACKING --> 
    <!-- Transferring PHP variable to javascript -->
    <script>
        var gaEvent = "Evolution of Windows";
    </script>    
    <script src="js/waypoints.min.js"></script>
    <script src="js/skrollr.min.js"></script>    
    <!--[if lt IE 9]>
    <script type="text/javascript" src="skrollr.ie.min.js"></script>
    <![endif]-->
    <script>
      var s = skrollr.init();
    </script>
    <script src="js/main.js"></script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 二維碼 頭像上傳 圖片上傳 圖片全屏 圖片淡出淡進 圖片淡出 圖片淡進 圖片延遲加載 圖片延遲 圖片加載 圖片翻轉 圖片旋轉 圖片疊加 圖片層疊 圖片放大鏡 圖片拖動 圖片拖拽 滾動切換 滾動條切換 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 圖片廣告 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 滑動選項卡 滑動切換 純圖片輪播 圖片輪播 圖片滾動 圖片滾動條 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 圖表 圖片 圖片插件 頭像截圖 全屏滾動 選項卡自動切換 響應式圖片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子