質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 183
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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

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

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

該当のソースコード

jQuery(document).ready(function( $ ){

// UA判定のJSライブラリーを実行
const uAParser = UAParser();

const $flip = $('.js-flip');
const $flipInner = $('.js-flip-inner');
const flipWidth = $flip.width();

// 円の直径を180度に割り当てる
const rate = 180 / flipWidth;

// .flip-innerクラスにつけるtransitionのduration値
const DURATION = 800;

// touchMoveのフラグ
let moving = false;

// touchEnd後、アニメーションしているときのフラグ
let animating = false;

// タップし始めたときのx座標
let startPointX = 0;

// タップを離したときのx座標
let endPointX = 0;

// 現在の回転量
let currentRotationVal = 0;

// デバイスを判定
let judgeDevice = () => {
  (uAParser.device.type !== 'mobile') ? $flip.addClass('is-pc') : $flip.removeClass('is-pc');
};

// スワイプしはじめたとき
let touchStartHandler = (e) => {
  if (uAParser.device.type !== 'mobile') return;
  if (moving) return;
  let touch = e.originalEvent.touches[0];
  // 触り始めたときのタップしたx,y座標を保存
  startPointX = touch.screenX;
};

// スワイプ中
let touchMoveHandler = (e) => {
  if (uAParser.device.type !== 'mobile') return;
  if (animating) return;
  moving = true;
  let touch = e.originalEvent.touches[0];

  // スワイプ量を保存
  endPointX = (touch.screenX - startPointX) * rate;

  // 半回転以上回転させないように-180度以上、180度以下に制限
  if (endPointX > 180 || endPointX < -180) {
    return;
  }

  roll(currentRotationVal + endPointX);
};

// 指を離したとき
let touchEndHandler = () => {
  if (uAParser.device.type !== 'mobile') return;
  if (!moving || animating) {
    return;
  }
  moving = false;

  // タップを離したとき、プラス方向に半分よりめくれていたら最後までめくる
  if(currentRotationVal + endPointX > currentRotationVal + 90) {
    currentRotationVal = currentRotationVal + 180;
  }
  // タップを離した時、マイナス方向に半分以上めくれていたら最後までめくる
  if(currentRotationVal + endPointX < currentRotationVal - 90) {
    currentRotationVal = currentRotationVal - 180;
  }

  // transitionしつつめくる
  $flip.addClass('is-animating');
  $flipInner.css('transform', 'rotateY(' + currentRotationVal + 'deg)');
  animating = true;

  setTimeout(() => {
    // cssで設定したduration分動いたら、transitionを切る
    $flip.removeClass('is-animating');
    animating = false;
  }, DURATION);

  // スワイプし始めた位置を初期化
  startPointX = 0;
};

// 回転
let roll = (rotationVal) => {
  $flipInner.css('transform', 'rotateY(' + (rotationVal) + 'deg)');
};

// リセット用イベント
$(window).on('resize', judgeDevice);

// イベント
$flip.on('touchstart', touchStartHandler);
$flip.on('touchmove', touchMoveHandler);
$flip.on('touchend', touchEndHandler);
$flip.on('mouseover', (e) => {
  if ($(e.currentTarget).hasClass('is-pc')) {
    $(e.currentTarget).addClass('is-hover');
  }
});

$flip.on('mouseout', (e) => {
  if ($(e.currentTarget).hasClass('is-pc')) {
    $(e.currentTarget).removeClass('is-hover');
  }
});

// 初期化
judgeDevice();

  });

試したこと

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。
https://liginc.co.jp/489507
この記事を参考に、同じ動きを実装したく試しましたがうまくいきません。
複数の画像を設置したときに、すべての画像が同時に回転してしまいます。

配置した画像をそれぞれ個別に回転させたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

-1

解決しました解決しました

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/21 11:53

    【質問をした後に自己解決してしまった --- ヘルプ|teratail(テラテイル)】
    https://teratail.com/help#resolve-myself
    > 後から読む人のためにも、具体的な解決手順を記載してください。

    キャンセル

  • 2020/07/21 11:54

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る