jQuery

【jQuery】ウォールギャラリを作成し、ランダムにアイテムをスワップするアニメーションを作成SwappingWall

March 23, 2017

SwappingWall.jqueryはウォールギャラリを作成し、ランダムにアイテムをスワップするアニメーションを作成します。jQuery2.2.1以上が必要です。

Example

divを作成

// HTML

<div class="list">
 <img src="img/img1.jpg">
 <img src="img/img2.jpg">
 <img src="img/img3.jpg">
 <img src="img/img4.jpg">
 <img src="img/img5.jpg">
 <img src="img/img6.jpg">
 <img src="img/img7.jpg">
 <img src="img/img8.jpg">
</div>

CSS

// CSS

.list{
	width: 100%;
	padding: 0;
	margin: 0; 
}
.list img{
	float: left;
}

JS

// JS 

$('.list').SwappingWall({
 'time': 2000,
 'itemsInRow': 4,
 'duration': 400,
 'responsive': [
  {
   'breakpoint': 991,
   'itemsInRow': 3,
  },
  {
   'breakpoint': 768,
   'itemsInRow': 2,
  }
 ]
})