hugh
/
jquery-inertiaScroll


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style.css">
  <title>inertiaScroll</title>
  <!-- ga -->
  <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','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-56791268-1', 'auto');
    ga('send', 'pageview');

  </script>
  <!-- / ga -->

</head>
<body>
  <div id="content">
    <header>header!</header>
    <div id="box1" class="box" data-speed="1" data-margin="100"></div>
    <div id="box2" class="box" data-speed="7"></div>
    <div id="box3" class="box" data-speed="2"></div>
    <div id="box4" class="box" data-speed="5"></div>
    <div id="box5" class="box" data-speed="3" data-margin="200"></div>
    <div id="box6" class="box" data-speed="1"></div>
    <div id="box7" class="box" data-speed="2"></div>
    <div id="box8" class="box" data-speed="8"></div>
    <div id="box9" class="box" data-speed="1"></div>
    <div id="box10" class="box" data-speed="5"></div>
    <footer>footer!</footer>
  </div>

<script src="jquery-1.9.1.js"></script>
<script src="jquery-inertiaScroll.js"></script>  
<script>
$(function(){

  $(".box").inertiaScroll({
    parent: $("#content")
  });

  $(".box").each(function(){
    var speed = $(this).data("speed");
    var height = $(this).height() + "px";
    $(this).css("line-height",height).text(speed);
  });

});  
</script>
</body>
</html>