html
1<article class="flip js-flip"> 2 <a href="#"> 3 <div class="flip__inner js-flip-inner"> 4 <div class="front"> 5 <div class="member"> 6 <img src="#" alt=""> 7 </div> 8 <h2><span>##</span><span>##</span></h2> 9 </div> 10 <div class="back"> 11 <div class="member"> 12 <img src="#" alt=""> 13 </div> 14 <h2><span>##</span><span>##</span></h2> 15 </div> 16</a> 17</article> 18<article class="flip js-flip"> 19 <a href="#"> 20 <div class="flip__inner js-flip-inner"> 21 <div class="front"> 22 <div class="member"> 23 <img src="#" alt=""> 24 </div> 25 <h2><span>##</span><span>##</span></h2> 26 </div> 27 <div class="back"> 28 <div class="member"> 29 <img src="#" alt=""> 30 </div> 31 <h2><span>##</span><span>##</span></h2> 32 </div> 33</a> 34</article>
↑上記のような「flip」が複数(3個以上想定)ある場合に、画像を切り替えたい対象のものだけを回転させたい!
(コインのように回転して裏の画像に切り替わるという想定)
js
1// UA判定のJSライブラリーを実行 2const uAParser = UAParser(); 3 4const $flip = $('.js-flip'); 5const $flipInner = $('.js-flip-inner'); 6 7// コインフリップ関数 8const coinflip = () => { 9 10 // イージング関数 11 let easing = (count, b, c, d, s) => { 12 if (s === undefined) s = 1.70158; 13 return c * ((count = count / d - 1) * count * ((s + 1) * count + s) + 1) + b; 14 }; 15 16 // 回転中の状態から元に戻す 17 let reset = () => { 18 $flipInner.css('transform', ''); 19 }; 20 21 let frame = 20; 22 let count = 0; 23 let rotation = { 24 x: 0, 25 y: 0 26 }; 27 // さわり始めた時のx座標とy座標を保存 28 let point = { 29 x: 0, 30 y: 0, 31 dx: 0, 32 dy: 0 33 }; 34 let tmp = { 35 x: 0, 36 y: 0 37 }; 38 let moving = false; 39 let animating = false; 40 41 let touchStartHandler = (e) => { 42 if (uAParser.device.type !== 'mobile') return; 43 if (moving) return; 44 let touch = e.originalEvent.touches[0]; 45 point.x = touch.screenX; 46 point.y = touch.screenY; 47 point.dx = 0; 48 point.dy = 0; 49 }; 50 51 let touchMoveHandler = (e) => { 52 if (uAParser.device.type !== 'mobile') return; 53 if (animating) return; 54 moving = true; 55 let touch = e.originalEvent.touches[0]; 56 let x = (touch.screenX - point.x); 57 let y = (touch.screenY - point.y); 58 point.dx += x; 59 point.dy += y; 60 61 if (Math.abs(point.dx) > 10) { 62 e.preventDefault(); 63 } 64 65 point.x = touch.screenX; 66 point.y = touch.screenY; 67 68 if (point.dx > 180) { 69 point.dx = 180; 70 } else if (point.dx < -180) { 71 point.dx = -180; 72 } 73 74 roll(point.dx); 75 }; 76 77 let touchEndHandler = () => { 78 if (uAParser.device.type !== 'mobile') return; 79 if (!moving || animating) { 80 return; 81 } 82 moving = false; 83 point.x = point.y = 0; 84 tmp.x = rotation.x + point.dx; 85 tmp.y = rotation.y + point.dy; 86 if (point.dx > 45) { 87 tmp.lx = rotation.x + 180; 88 } else if (point.dx < -45) { 89 tmp.lx = rotation.x - 180; 90 } else { 91 tmp.lx = rotation.x; 92 } 93 animating = true; 94 tmp.ly = 0; 95 count = 0; 96 setTimeout(loopHandler, 16); 97 }; 98 99 let loopHandler = () => { 100 let rx = easing(count, tmp.x, tmp.lx - tmp.x, frame - 1) - rotation.x; 101 let ry = easing(count, tmp.y, tmp.ly - tmp.y, frame - 1) - rotation.y; 102 if (count === frame) { 103 rotation.x += rx; 104 rotation.y += ry; 105 animating = moving = false; 106 return; 107 } 108 count++; 109 roll(rx); 110 setTimeout(loopHandler, 16); 111 }; 112 113 // 計算した値を指定 114 let roll = (x) => { 115 $flipInner.css('transform', 'rotateY(' + (x + rotation.x) + 'deg)'); 116 }; 117 118 // Event 119 $flip.on('touchstart', touchStartHandler); 120 $flip.on('touchmove', touchMoveHandler); 121 $flip.on('touchend', touchEndHandler); 122 123 // リセット用イベント 124 $(window).on('resize', reset); 125}; 126 127coinflip();
##補足
https://liginc.co.jp/489507
この記事を参考に、同じ動きを実装したく試しましたがうまくいきません。
複数の画像を設置したときに、すべての画像が同時に回転してしまいます。
配置した画像をそれぞれ個別に回転させたいです。
どうすれば良いかご教授いただければと思います。
よろしくお願いいたします。