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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

788閲覧

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

mikan23

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/09 06:58

編集2022/01/12 10:55

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

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

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

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

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

html

1<nav> 2 <input class="button1" type="button" value="1"> 3<input class="button2" type="button" value="2"> 4<input class="button3" type="button" value="3"> 5</nav> 6 7<div class="container"> 8<div class="wrapper"> 9 <div class="box1"></div> 10 <div class="box2"></div> 11 <div class="box3"></div> 12</div> 13</div>

css

1body{ 2 overflow-x: hidden; 3} 4 5nav{ 6 display: flex; 7 justify-content: center; 8} 9.container{ 10 width: 270vw; 11} 12.wrapper{ 13 display: flex; 14} 15 16.box1 { 17 height: 200px; 18 width: 90vw; 19 background: pink; 20 transition: all 450ms 0s ease; 21} 22.box2 { 23 height: 500px; 24 width: 90vw; 25 background: #607964; 26 transition: all 450ms 0s ease; 27} 28.box3 { 29 height: 350px; 30 width: 90vw; 31 background: #adf4e7; 32 33} 34.active1 { 35 transform: translateX(1.4%); 36 background: red; 37 transition: all 450ms 0s ease; 38} 39.active2 { 40 transform: translateX(-31.7%); 41 background: yellow; 42 transition: all 450ms 0s ease; 43} 44.active3 { 45 transform: translateX(-65%); 46 background: blue; 47 transition: all 450ms 0s ease; 48}

js

1var $box = $('.container'); 2var $button = $('.button1'); 3 4$button.on('click', function(){ 5 $box.toggleClass('active1'); 6}); 7 8var $box = $('.container'); 9var $button = $('.button2'); 10 11$button.on('click', function(){ 12 $box.toggleClass('active2'); 13}); 14 15var $box = $('.container'); 16var $button = $('.button3'); 17 18$button.on('click', function(){ 19 $box.toggleClass('active3'); 20});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/06/09 08:16

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

2021/06/09 08:36

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

2021/06/09 08:38

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

回答1

0

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

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

投稿2021/06/09 08:50

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mikan23

2021/06/10 05:04

コメントありがとうございます。 教えていただいたように外側に.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

2021/06/10 05:20

> 一番初めに戻るループであればどのような方法はあるのでしょうか? 一番初めに戻る、というのは「1が押された時と同じ」ということです。 現状、.active しか状態が存在しないと思いますが、「1が押された時」「2が押された時」「3が押された時」の状態が必要かと思います。 --- > また、選択した要素が90vw、その時他の要素が10vwで見えるようにする方法などお分かりになりますか? 『両サイドは少し見える程度(要素は隠す)に表示』ではなくて、他の要素の幅を変えるということですか? それでしたら、各状態で`width`を変更すればいいかと思います。 --- > ライブラリは聞いたことなかったので調べてみましたが下記のようなものでしょうか? ライブラリとは Swiper などのことです。
mikan23

2021/06/10 07:27

先ほどコード変更の際に各.activeを追加しておきました。 >一番外側を「窓」にして、そこから横に長い.containerを横移動させながら覗くイメージで作るといいかと思います。 このお話ですが、各.activeが押された時に.containerごと移動するということでしょうか? 想像しているものと違ったりしたら申し訳ありません。 ご提案いただいた方法で .containerを270vw(各要素90vwにするため)、 各.activeのtransform: translateX(-%);をイメージに沿って調整しました。 jsのvar $box = $('.box1'); などを全て var $box = $('.container');に変更しました。 >『両サイドは少し見える程度(要素は隠す)に表示』ではなくて、他の要素の幅を変えるということですか? その方法だと見え方が若干変わりますよね?なので横に移動する形にしました、ありがとうございます。 >ライブラリとは Swiper などのことです。 swiperなどですね、一度試しましたがたまにスライドが反応しないなどがあって断念しました。 あと、このページを開いた時に2が真ん中に来て欲しいのと この1,2,3の同じボタンを押した時、二回押さないと移動しなかったり二回目を押すと戻ったりするので 一度でその位置にスッと移動して欲しいのですがそれは可能でしょうか? 何度も何度も申し訳ごございませんがもしお分かりでしたらお願いします。
Lhankor_Mhy

2021/06/10 07:36

> このお話ですが、各.activeが押された時に.containerごと移動するということでしょうか? はい、各buttonが押された時に、.containerごと移動するというイメージです。 --- > このページを開いた時に2が真ん中に来て欲しい 初めから、.active2 を付しておけばいいのではないかと思います。 --- > 一度でその位置にスッと移動して欲しい toggleClass ではなくて、removeClass と addClass を使うべきだと思います。
mikan23

2021/06/10 08:28

>初めから、.active2 を付しておけばいいのではないかと思います。 すみませんちょっと理解ができなくて.active2をどこに出したら良いのでしょうか? >toggleClass ではなくて、removeClass と addClass を使うべきだと思います。 ありがとうございます、使うのが初めてなので調べました。 $button.on('click', function(){ $box.removeClass('active3'); $box.addClass('active3'); }); 変化がないのですがどこか間違っているでしょうか?
Lhankor_Mhy

2021/06/10 08:36

> .active2をどこに出したら良いのでしょうか? .containerのクラス属性につけるということです。 --- > 変化がないのですがどこか間違っているでしょうか? 2のボタンを押した状態は、.containerに.active2がついています。 3のボタンを押した時に、あるべき状態は、.containerに.active3がついている状態です。.active2がついていては困ります。 つまり、2のボタンを押した後に3のボタンを押した場合、すでについている.active2を消す必要があるのです。
mikan23

2021/06/10 09:14

>.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'); }); このような解釈でよろしいでしょうか? 何度も質問してしまい、勉強不足で申し訳ないです。。。
mikan23

2021/06/11 06:23

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

2021/06/11 06:25

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問