1つの背景画像を縦にループでスライドさせる
2015年1月8日jQueryのみでつくるギミック
ループさせる画像は、上端・下端の色が同じようなものを選ぶと継ぎ目が見えないので自然になります。ループさせている範囲の上にコピーを置いても綺麗です。
JavaScript
(function($){
$(function(){
var bpX = 0;
var bpY = 0;
setInterval(function(){
bpX += 0;
bpY += -0.4;
$('#bgImg').css('background-position', bpX+'px '+bpY+'px')
})
});
})(jQuery);
HTML
<div id="bgImg"></div>
CSS
#bgImg {
width: 100%;
height: 520px;
background: url(img01.jpg) bottom center;
background-size: 100% auto;
}
- Tweet
