各要素の横へのアニメーション移動

Question

アニメーションを使うのが初めてなのでわからないところがあり質問お願いします。

３つの要素を各ボタンで横へとスライドのように動いて欲しいのですが（選択したボタンは中央でストップ）
真ん中に移動した要素は表示９０vwに、両サイドは少し見える程度（要素は隠す）に表示させたいです。
またその移動の際、ボタンも要素もループして欲しいのですがそのような可能なのでしょうか？

swiperで実証してみましたが色々問題がありアニメーションで作りたいです。
動きのイメージはこのような感じです
https://jsfiddle.net/jto759ky/#&togetherjs=ifPUhNpwiU

コードの作成に参考にしたのはこちらのサイトの＜要素にクラスを付けたり消したりしてアニメーションさせてみる＞です
https://qiita.com/soarflat/items/4a302e0cafa21477707f

よろしくお願い致します。

<nav>
  <input class="button1" type="button" value="1">
<input class="button2" type="button" value="2">
<input class="button3" type="button" value="3">
</nav>

<div class="container">
<div class="wrapper">
  <div class="box1">１</div>
  <div class="box2">２</div>
  <div class="box3">３</div>
</div>
</div>

body{
  overflow-x: hidden;
}

nav{
  display: flex;
  justify-content: center;
}
.container{
  width: 270vw;
}
.wrapper{
  display: flex;
}

.box1 {
  height: 200px;
  width: 90vw;
  background: pink;
  transition: all 450ms 0s ease;
}
.box2 {
  height: 500px;
  width: 90vw;
  background: #607964;
  transition: all 450ms 0s ease;
}
.box3 {
  height: 350px;
  width: 90vw;
  background: #adf4e7;

}
.active1 {
  transform: translateX(1.4%);
  background: red;
  transition: all 450ms 0s ease;
}
.active2 {
  transform: translateX(-31.7%);
  background: yellow;
  transition: all 450ms 0s ease;
}
.active3 {
  transform: translateX(-65%);
  background: blue;
  transition: all 450ms 0s ease;
}

var $box = $('.container');
var $button = $('.button1');

$button.on('click', function(){
  $box.toggleClass('active1');
});

var $box = $('.container');
var $button = $('.button2');

$button.on('click', function(){
  $box.toggleClass('active2');
});

var $box = $('.container');
var $button = $('.button3');

$button.on('click', function(){
  $box.toggleClass('active3');
});

Comments

[Lhankor_Mhy]

HTML に .box1 などがないようです。

[mikan23]

コメントありがとうございます。
<div class=container>
<div class="box1">１</div>
の.box1とはまた別のことでしょうか？

[Lhankor_Mhy]

ああ、すみません、隠れていたものを見落としていたようです。
失礼しました。

Answer 1

外側にもう一つ要素を置く必要があると思います。
一番外側を「窓」にして、そこから横に長い.containerを横移動させながら覗くイメージで作るといいかと思います。
また、ループについては、1番初めに戻るのであれば比較的簡単かと思いますが、無限スクロールをするのであれば要素を複製したり移動したりする必要があるでしょう。

個人的には、ライブラリを使った方が無難かな、と思います。

Comments

[mikan23]

コメントありがとうございます。
教えていただいたように外側に.containerを追加し、内側をwrapperにコードを変更しました。
ありがとうございます。

一番初めに戻るループであればどのような方法はあるのでしょうか？
また、選択した要素が90vw、その時他の要素が10vwで見えるようにする方法などお分かりになりますか？

ライブラリは聞いたことなかったので調べてみましたが下記のようなものでしょうか？
これをどこに当てはめていいかがわからず。。。
/* slideLeft */
@-webkit-keyframes slideLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0); }
100% {
-webkit-transform: none; } }
@-moz-keyframes slideLeft {
0% {
-moz-transform: translate3d(-100%, 0, 0); }
100% {
-moz-transform: none; } }
@-o-keyframes slideLeft {
0% {
-o-transform: translate3d(-100%, 0, 0); }
100% {
-o-transform: none; } }
@keyframes slideLeft {
0% {
transform: translate3d(-100%, 0, 0); }
100% {
transform: none; } }

.u--slideLeft {
-webkit-animation: slideLeft 1s;
-moz-animation: slideLeft 1s;
-o-animation: slideLeft 1s;
animation: slideLeft 1s; }

/* slideRight */
@-webkit-keyframes slideRight {
0% {
-webkit-transform: translate3d(100%, 0, 0); }
100% {
-webkit-transform: none; } }
@-moz-keyframes slideRight {
0% {
-moz-transform: translate3d(100%, 0, 0); }
100% {
-moz-transform: none; } }
@-o-keyframes slideRight {
0% {
-o-transform: translate3d(100%, 0, 0); }
100% {
-o-transform: none; } }
@keyframes slideRight {
0% {
transform: translate3d(100%, 0, 0); }
100% {
transform: none; } }

.u--slideRight {
-webkit-animation: slideRight 1s;
-moz-animation: slideRight 1s;
-o-animation: slideRight 1s;
animation: slideRight 1s; }

[Lhankor_Mhy]

> 一番初めに戻るループであればどのような方法はあるのでしょうか？

一番初めに戻る、というのは「1が押された時と同じ」ということです。
現状、.active しか状態が存在しないと思いますが、「1が押された時」「2が押された時」「3が押された時」の状態が必要かと思います。

---

> また、選択した要素が90vw、その時他の要素が10vwで見えるようにする方法などお分かりになりますか？

『両サイドは少し見える程度（要素は隠す）に表示』ではなくて、他の要素の幅を変えるということですか？
それでしたら、各状態で`width`を変更すればいいかと思います。

---

> ライブラリは聞いたことなかったので調べてみましたが下記のようなものでしょうか？

ライブラリとは Swiper などのことです。

[mikan23]

先ほどコード変更の際に各.activeを追加しておきました。

＞一番外側を「窓」にして、そこから横に長い.containerを横移動させながら覗くイメージで作るといいかと思います。
このお話ですが、各.activeが押された時に.containerごと移動するということでしょうか？
想像しているものと違ったりしたら申し訳ありません。
ご提案いただいた方法で
.containerを270vw（各要素90vwにするため）、
各.activeのtransform: translateX(-%);をイメージに沿って調整しました。
jsのvar $box = $('.box1');　などを全て　var $box = $('.container');に変更しました。

＞『両サイドは少し見える程度（要素は隠す）に表示』ではなくて、他の要素の幅を変えるということですか？
その方法だと見え方が若干変わりますよね？なので横に移動する形にしました、ありがとうございます。

＞ライブラリとは Swiper などのことです。
swiperなどですね、一度試しましたがたまにスライドが反応しないなどがあって断念しました。

あと、このページを開いた時に２が真ん中に来て欲しいのと
この1,2,3の同じボタンを押した時、二回押さないと移動しなかったり二回目を押すと戻ったりするので
一度でその位置にスッと移動して欲しいのですがそれは可能でしょうか？
何度も何度も申し訳ごございませんがもしお分かりでしたらお願いします。

[Lhankor_Mhy]

> このお話ですが、各.activeが押された時に.containerごと移動するということでしょうか？

はい、各buttonが押された時に、.containerごと移動するというイメージです。

---

> このページを開いた時に２が真ん中に来て欲しい

初めから、.active2 を付しておけばいいのではないかと思います。

---

> 一度でその位置にスッと移動して欲しい

toggleClass ではなくて、removeClass と addClass を使うべきだと思います。

[mikan23]

＞初めから、.active2 を付しておけばいいのではないかと思います。

すみませんちょっと理解ができなくて.active2をどこに出したら良いのでしょうか？

＞toggleClass ではなくて、removeClass と addClass を使うべきだと思います。
ありがとうございます、使うのが初めてなので調べました。
$button.on('click', function(){
$box.removeClass('active3');
$box.addClass('active3');
});
変化がないのですがどこか間違っているでしょうか？

[Lhankor_Mhy]

> .active2をどこに出したら良いのでしょうか？

.containerのクラス属性につけるということです。

---

> 変化がないのですがどこか間違っているでしょうか？

2のボタンを押した状態は、.containerに.active2がついています。
3のボタンを押した時に、あるべき状態は、.containerに.active3がついている状態です。.active2がついていては困ります。
つまり、2のボタンを押した後に3のボタンを押した場合、すでについている.active2を消す必要があるのです。

[mikan23]

>.containerのクラス属性につけるということです。
<div class="container" "active2">
こういうことでしょうか？

＞つまり、2のボタンを押した後に3のボタンを押した場合、すでについている.active2を消す必要があるのです。
var $box = $('.container');
var $button = $('.button1');

$button.on('click', function(){
$box.removeClass('active2','active3');
$box.addClass('active1');
});

var $box = $('.container');
var $button = $('.button2');

$button.on('click', function(){
$box.removeClass('active1','active3');
$box.addClass('active2');
});

var $box = $('.container');
var $button = $('.button3');

$button.on('click', function(){
$box.removeClass('active1','active2');
$box.addClass('active3');
});

このような解釈でよろしいでしょうか？
何度も質問してしまい、勉強不足で申し訳ないです。。。

[Lhankor_Mhy]

クラスを複数つけるには空白で区切ります。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class

---

removeClass() で複数のクラスを指定する方法も同様です。
https://api.jquery.com/removeClass/

---

想像でコードを書くのではなくて、きちんと調べてコードを書くようにした方がいいかと思います。

[mikan23]

jsの書き方がわからず何度もお尋ねして申し訳ございませんでした。
HTMLと同じようにスペース入れて訂正してみましたが、うまくいかないので
もう少し自分で見直してみます。
ご丁寧にありがとうございました。

[Lhankor_Mhy]

わかりました。ご不明の点がありましたらお知らせください。