html5微软计算机发展历程页面滚动展示



77 305 102



特效描述: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

加群请备注:从官网了解到