[光るボタン]特定のセクションで実行 or 一定時間毎に実行

自分用メモです

キラっと光るボタン、CSSのanimationで光らせると間隔が短いので
自由なタイミングで実行させます。バリエーションは下記の二通り。
・特定のセクションまでスクロールしたらその度光る
・一定時間毎に光る

下記サイトを参考
jQueryでつくるキラッと光るボタン
jQueryで長いページの区切り（セクション）ごとに背景を変化させる

特定のセクションで実行

共通のHTML、CSSは後述（ほぼ参考サイトままです）
特定のセクションまでスクロールしたら光らせるため、
任意のセクションにclass="shiny-section"をつける。

jQuery

  var shinyObj = '.button a span.shiny';
  var shinySpeed = 1000;
   
  $(function() {
    var pageTop = $('html, body');
    var secTopArr = new Array();
    var current = -1;
    $('.shiny-section').each(function (i) {
        secTopArr[i] = $(this).offset().top;
    });
    //スクロールイベント
    $(window).scroll(function () {
        for (var i = secTopArr.length-1; i>=0; i--) {
            if ($(window).scrollTop() > secTopArr[i]) {
                chengeBG(i);
                break;
            }
        }
    });

    function chengeBG(secNum) {
        if (secNum != current) {
            current = secNum;
          $(shinyObj).animate({left:'+=350px'},shinySpeed).animate({left:'-60px'}, 0);
        }
    }
  });

一定時間毎に実行

（ほぼ参考サイトまま）

jQuery

  var shinyObj = '.button a span.shiny';
  var shinySpeed = 1000;
  var interval = 10000;
  
  $(function() { setTimeout('shinybutton()', 1000 ); });
  function shinybutton(){
    $(shinyObj).animate({left:'+=350px'},shinySpeed).animate({left:'-60px'}, 0);
    setTimeout('shinybutton()',interval);
  }

一応共通のHTMLとCSS。ほぼ参考サイトまま（スタイルは若干適当）

html

<section>
    <div class="button">
        <a href="#">
            <span class="shiny"></span>
            <span class="btn">shiny button</span>
        </a>
    </div>
</section>

css

.button a {
	background: #d43029;
	padding: 10px;
	overflow: hidden;
	position: relative;
	display: block;
}
.button a span.shiny {
	position: absolute;
	left: -60px;
	top: -50px;
	z-index: 30;
}
.button a span.shiny { /*shiny*/
	display: block;
	width: 38px;
	height: 150px;
	margin-top: 7px;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	background-image: -webkit-gradient(linear, left top, left bottom, from(left), color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,1)),to(rgba(255,255,255,0)));
	background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 	background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
}