jQuery

Practice for jquery plugin.

2013.5.17
jQuery

プラグイン作成の練習。
スクロールと同時にランダムに動くプラグインを作成しました。
基本ソースは以下。

■HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Parallax Test</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.randomScroll.js"></script>
<script>
$(function() {
     $("#parallax").shparallax({
          scrollValueDiv : "#scrollValue"
     });
});
</script>
</head>
<body>
<h1>Just scroll it.</h1>
<p class="indicator">スクロール値 | <span id="scrollValue">0</span></p>
<ul id="parallax">
     <li id="item1"></li>
     <li id="item2"></li>
     <li id="item3"></li>
     <li id="item4"></li>
     <li id="item5"></li>
</ul>
</body>
</html>

■CSS

body {
     height: 3300px;
}
h1 {
     font-size: 100%;
}
.indicator {
     margin: 0;
     position: fixed;
     right: 10px;
     top: 10px;
}

li {
     display: block;
     height: 60px;
     position: fixed;
     top: 40px;
     width: 60px;
}
#item1 {
     background: #000;
     left: 20px;
}
#item2 {
     background: #333;
     left: 100px;
}
#item3 {
     background: #ff358B;
     left: 180px;
}
#item4 {
     background: #01b0f0;
     left: 260px;
}
#item5 {
     background: #aeee00;
     left: 340px;
}

■JS
jquery plugin を作る際の基本ルール。
まず、ファイル名は「jquery.puluginName.js」というように。
そして先頭に ; を付けるのだが、これは先に読むファイルが;で閉じられて無かった場合のバグを防ぐ為に。
なので基本書式は、

;(function($) {
     // code..
})(jQuery);

となる。

そして、セレクタは勿論thisとなるが、オプションを指定したい場合、プラグイン呼び出し時に、

$(function() {
     $("body").myplugin({
          someoption: "optionValue"
     });
});

の様に記述すると、プラグインの中で

var option = option.someoption;

といった具合に使う事ができる。

;(function($) {
     $.fn.shparallax = function(options) {

          var targetUl = $(this);

          var lis = targetUl.find("li");
          var leftValues = {};
         
          var top = $(lis[0]).offset().top; // initial y value
          for(var i=0; i<lis.length; i++){
               leftValues[i] = $(lis[i]).offset().left; // each x value
          }

          $(window).scroll(function(){
               var value = $(this).scrollTop(); // scroll amount
               $(options.scrollValueDiv).text(value);

               // add top and amount depends on scroll amount.
               for(var i=0; i<lis.length; i++){
                    var topamt = value / 4 * Math.sin( Math.random() * 100 / 180 * Math.PI);
                    var leftamt =  value / 4 * Math.cos(Math.random() * 100 / 180 * Math.PI);

                    $(lis[i]).css({'top': top + topamt, 'left' : leftValues[i] + leftamt});
               }              

          });
     }
})(jQuery);

今回は練習の為にランダムにしたが、
topamt やleftamtの値をランダムにせず、それぞれ指定してやればパララックスぽい動きも可能だと思うよ。

BLOG TOP