くるくるパネル [ codepen ]

複数枚の画像を重ねて横回転で切り替えるエフェクトを入れた実装です。なんだかコミカルな雰囲気を感じさせるエフェクトでかなり好きです。

SUPER MARIO MAKER 2 公式サイトで実装されているものから勉強させていただきました。

スーパーマリオメーカー 2 | Nintendo Switch | 任天堂

公式サイトでは５つの画像を必ず用意しなければいけない感じの実装になっていたのでちょっと拡張させていただいて、 Stylus で書いた↓この部分の数字を増やせばいくつでもいける感じにしてみました。

item-count = 5

このために JavaScript も少し拡張させていただきました。

// 元ソース
function switch_img(side) {
 for (var i = 0; i < $('.js-rotatebnr').length; i++) {
   $('.js-rotatebnr').eq(i).removeClass(function(index, className) {
     var removeClassName = 'is-';
     reg = new RegExp("\\b" + removeClassName + "\\S+", 'g');

     return (className.match(reg) || []).join(' ');
   });
 }
 if(side === 'bnr1') {
   $('.js-rotatebnr').addClass('is-bnr1');
   setTimeout(function() {
     switch_img('bnr2');
   }, 5000);
 } else if(side === 'bnr2') {
   $('.js-rotatebnr').addClass('is-bnr2');
   setTimeout(function() {
     switch_img('bnr3');
   }, 5000);
 } else if(side === 'bnr3') {
   $('.js-rotatebnr').addClass('is-bnr3');
   setTimeout(function() {
     switch_img('bnr4');
   }, 5000);
 } else if(side === 'bnr4') {
   $('.js-rotatebnr').addClass('is-bnr4');
   setTimeout(function() {
     switch_img('bnr5');
   }, 5000);
 } else {
   $('.js-rotatebnr').addClass('is-bnr5');
   setTimeout(function() {
     switch_img('bnr1');
   }, 5000);
 }
}

// 拡張ソース
function switch_img(side) {
 let _timer = 5000;
 // let _timer = 3000;
 // 要素数
 let _item_count = $('.js-rotatebnr .panel_item').length;
 // 表示対象要素番号
 let _number = side.substr(-1, 1);
 // 次の要素番号
 let _next = _number < _item_count ? parseInt(_number, 10) + 1 : 1;
 // 正規表現使って不要な is_*** クラスを削除
 for (var i = 0; i < $('.js-rotatebnr').length; i++) {
   $('.js-rotatebnr').eq(i).removeClass(function (index, className) {
     var removeClassName = 'is_';
     reg = new RegExp("\\b" + removeClassName + "\\S+", 'g');
     return (className.match(reg) || []).join(' ');
   });
 }
 // イメージ切り替え
 $('.js-rotatebnr').addClass(`is_bnr${_number}`);
 setTimeout(function () {
   switch_img(`bnr${_next}`);
 }, _timer);
}

勉強になりました🙏