コインのように画像がスワイプで回転する動きを、個別で回転させたい

前提・実現したいこと

スマートフォンで画像をスワイプでフリップ回転する動きを実現したい。現状は複数画像を設置した際に、ひとつの画像をスワイプするとすべての画像が連動してフリップする。

発生している問題・エラーメッセージ

動き自体は実現できましたが、複数の画像を設置したとき、ひとつの画像をスワイプするとすべての画像が一緒に連動して回転してしまう

該当のソースコード

JavaScript
1jQuery(document).ready(function( $ ){
2 
3// UA判定のJSライブラリーを実行
4const uAParser = UAParser();
5
6const $flip = $('.js-flip');
7const $flipInner = $('.js-flip-inner');
8const flipWidth = $flip.width();
9
10// 円の直径を180度に割り当てる
11const rate = 180 / flipWidth;
12
13// .flip-innerクラスにつけるtransitionのduration値
14const DURATION = 800;
15
16// touchMoveのフラグ
17let moving = false;
18
19// touchEnd後、アニメーションしているときのフラグ
20let animating = false;
21
22// タップし始めたときのx座標
23let startPointX = 0;
24
25// タップを離したときのx座標
26let endPointX = 0;
27
28// 現在の回転量
29let currentRotationVal = 0;
30
31// デバイスを判定
32let judgeDevice = () => {
33  (uAParser.device.type !== 'mobile') ? $flip.addClass('is-pc') : $flip.removeClass('is-pc');
34};
35
36// スワイプしはじめたとき
37let touchStartHandler = (e) => {
38  if (uAParser.device.type !== 'mobile') return;
39  if (moving) return;
40  let touch = e.originalEvent.touches[0];
41  // 触り始めたときのタップしたx,y座標を保存
42  startPointX = touch.screenX;
43};
44
45// スワイプ中
46let touchMoveHandler = (e) => {
47  if (uAParser.device.type !== 'mobile') return;
48  if (animating) return;
49  moving = true;
50  let touch = e.originalEvent.touches[0];
51
52  // スワイプ量を保存
53  endPointX = (touch.screenX - startPointX) * rate;
54
55  // 半回転以上回転させないように-180度以上、180度以下に制限
56  if (endPointX > 180 || endPointX < -180) {
57    return;
58  }
59
60  roll(currentRotationVal + endPointX);
61};
62
63// 指を離したとき
64let touchEndHandler = () => {
65  if (uAParser.device.type !== 'mobile') return;
66  if (!moving || animating) {
67    return;
68  }
69  moving = false;
70
71  // タップを離したとき、プラス方向に半分よりめくれていたら最後までめくる
72  if(currentRotationVal + endPointX > currentRotationVal + 90) {
73    currentRotationVal = currentRotationVal + 180;
74  }
75  // タップを離した時、マイナス方向に半分以上めくれていたら最後までめくる
76  if(currentRotationVal + endPointX < currentRotationVal - 90) {
77    currentRotationVal = currentRotationVal - 180;
78  }
79
80  // transitionしつつめくる
81  $flip.addClass('is-animating');
82  $flipInner.css('transform', 'rotateY(' + currentRotationVal + 'deg)');
83  animating = true;
84
85  setTimeout(() => {
86    // cssで設定したduration分動いたら、transitionを切る
87    $flip.removeClass('is-animating');
88    animating = false;
89  }, DURATION);
90
91  // スワイプし始めた位置を初期化
92  startPointX = 0;
93};
94
95// 回転
96let roll = (rotationVal) => {
97  $flipInner.css('transform', 'rotateY(' + (rotationVal) + 'deg)');
98};
99
100// リセット用イベント
101$(window).on('resize', judgeDevice);
102
103// イベント
104$flip.on('touchstart', touchStartHandler);
105$flip.on('touchmove', touchMoveHandler);
106$flip.on('touchend', touchEndHandler);
107$flip.on('mouseover', (e) => {
108  if ($(e.currentTarget).hasClass('is-pc')) {
109    $(e.currentTarget).addClass('is-hover');
110  }
111});
112
113$flip.on('mouseout', (e) => {
114  if ($(e.currentTarget).hasClass('is-pc')) {
115    $(e.currentTarget).removeClass('is-hover');
116  }
117});
118
119// 初期化
120judgeDevice();
121  
122  });
123
124