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

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

ただいまの
回答率

90.50%

  • HTML5

    4018questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2070questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS animationで複数行あるスライダーをうまくループさせたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 846

lingwood

score 23

前提・実現したいこと

複数行のスライダーを作成しています。
以下のような感じです。

← スクロールしていく
■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■ ■
※■は画像です。

今までJQuery(SimplyScroll)でアニメーションをつけていたのですが、
スマホ(特にアンドロイド機種)になると動きがスムーズでは
なかったり、止まってしまったりとあまり良くありませんでした。

そこで、CSSのanimationプロパティを使ってスライダーを作成してみたところ
動きはスムーズにいき、途中までは良いのですが、
当然と言えば当然なのですが、最後の方になりますと隙間が大きく空いてしまいます。
(背景であればリピートできるのですが・・・)

_     ↓ 隙間が大きく空いてしまう。 
■ ■ ■ ■     |
■ ■ ■ ■     |
■ ■ ■ ■     |
_         ↑ 実際の画面幅

以下にデモを作成してみました。
https://jsfiddle.net/jn46Laho/10/

実現したいこととして、

1.後ろにできれば隙間なく(多少はあっても大丈夫です。)、ループさせる
2.もしくは、右端までスクロールしたら逆方向にスクロールさせる(行ったり来たりするような)

上記のどちらかをうまくできないでしょうか?

← スクロールしていく
■ ■ ■ ■ ■ ■ ■ ■ ■|
■ ■ ■ ■ ■ ■ ■ ■ ■|
■ ■ ■ ■ ■ ■ ■ ■ ■|
_            ↑右端。ここまで来たらピタッと止まって逆へスクロールしていく

リバースして、

スクロールしていく →
|■ ■ ■ ■ ■ ■ ■ ■ ■
|■ ■ ■ ■ ■ ■ ■ ■ ■
|■ ■ ■ ■ ■ ■ ■ ■ ■
↑左端までまで来たらピタッと止まって右へスクロールしていく

ちなみに画像の数は30。200px幅の要素を3行の10列で並べています。
widthは2000pxで上にoverflow:hiddenをかけています。
また、ブレイクポイントは768pxでかけていますが、
レスポンシブ時にもそのまま表示しても大丈夫なため、
とにかく隙間の改善もしくは画面幅にぴったりくるようにしたいです。

該当のソースコード

【テストHTML】

<div id="posts">
<div class="slidethis">
<ul class="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
</div>


【CSS】トライ1(流れていくだけ)

#posts ul li {
  display: inline-block;
  width: 194px;
  height: 150px;
  margin-bottom: 4px;
  background: #f0f0f0;
  list-style: none;
}
#posts .slidethis {
  position: relative;
  height:592px;
  overflow: hidden;
}

#posts .container {
  width: 2000px;
}

#posts .slidethis .container {
  position: absolute;
    top: 0;
  animation: move 45s linear 0 ;
  -webkit-animation:move 45s infinite linear;
  animation:move 45s infinite linear;
}
#posts .slidethis .container:hover {
  animation-play-state: paused;
}

@keyframes move{
    from{
        -ms-transform:translateX(0);
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
    to{
        -ms-transform:translateX(-1600px);
        -webkit-transform:translateX(-1600px);
        transform:translateX(-1600px);
    }
}


【CSS】トライ2(行ったり来たり)

  display: inline-block;
  width: 194px;
  height: 150px;
  margin-bottom: 4px;
  background: #f0f0f0;
  list-style: none;
}
#posts .slidethis {
  position: relative;
  height:592px;
  overflow: hidden;
}

#posts .container {
  width: 2000px;
}

#posts .slidethis .container {
  position: absolute;
    top: 0;
  animation: move 45s linear 0 ;
  -webkit-animation:move 45s infinite linear;
  animation:move 45s infinite linear;
}
#posts .slidethis .container:hover {
  animation-play-state: paused;
}

@keyframes move{
 0% { left:0; }
 25% { left: -100%;}
 50% { right: 0;}
 100% { right: -100%;}
}

keyframesの数値をいろいろ変更したりもして試行を繰り返しているのですが、
良い解決策にたどり着けずにおります。
よろしくお願いします。
 
 

追記

すみません、いろいろ考えたのですが、
CSSのみで実現するのはやはり難しいのでしょうか?
レスポンシブで画像サイズを変更する等はないので、
そのまま流しっぱなしではありますが、
やはりブレイクポイント毎に計算して幅を調整する
必要があるのでしょうか?
有識者の皆さま、何卒ご教授いただけますよう、
よろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

animation-direction: alternate;
で往復は解決します。隙間が大きく開くのは-1600pxが大きすぎるからです。

#posts .slidethis .container {
  position: absolute;
    top: 0;
  /*せっかちだったので早めた*/
  animation: move 10s linear 0 ;
  -webkit-animation:move 10s infinite linear;
  animation:move 10s infinite linear;
  /*ここ*/
  animation-direction: alternate;
}
#posts .slidethis .container:hover {
  animation-play-state: paused;
}

@keyframes move{
    from{
        -ms-transform:translateX(0);
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
    to{
        /*少し詰めた*/
        -ms-transform:translateX(-1400px);
        -webkit-transform:translateX(-1400px);
        transform:translateX(-1400px);
    }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/06 09:24

    sousuke 様
    おはようございます。昨日はご回答ありがとうございました。
    会社からでしたので帰宅してしまい、返信できず失礼いたしました。

    往復の件ですが、すみません、一応はできていたのですが、
    上のCSSにalternateが入っていませんでした。
    いろいろいじっているうちに消してしまったものをコピペしたみたいで、
    失礼いたしました。

    いずれに、どうしても隙間が気になってしまい、
    left:0、right:0等でぴったりとできないか等の
    試行を重ねているのですが、
    ググってみましたところleft、rightは効かない?
    みたいでしたので途方に暮れていました。

    -1600pxが大きすぎるとのことで詰めるのも考えたのですが、
    やはりブレイクポイント毎に計算してサイズを調整して
    あげるしかないのでしょうか・・・?

    キャンセル

  • 2018/01/12 09:48

    sousuke 様

    こちらにもご回答いただいてくださってありがとうございました!
    javascriptの書き換えの件でもご回答を寄せていただき、
    本当にうれしかったです!!
    本件とJSの件は同じ箇所の問題に対するもので、
    sousukeさんのこちらのアドバイスをヒントに
    何とかCSSで解決を図りました。

    またの際にも何卒よろしくお願い致します。

    キャンセル

  • 2018/01/12 09:52

    すみません、コメントいただいてたのに気づかなかったですm(_ _;)m
    解決できて良かったです。b

    キャンセル

  • 2018/01/12 10:12

    いえいえ、とても助かりました!
    何とか解決することができホッとしています。

    またよろしくお願いします ^ ^

    キャンセル

0

CSSで解決いたしました。
レスポンシブ対応の複数行スライダー(といってもheightは固定)の実装において、
PC時は往復、スマホ時にはループにいたしました。

以下の点を留意いたしました。

1.PCでは表示領域を決める

→1カラムで横断するようなPCデザインの場合、translateXが大きくなりすぎてしまうため隙間が出たりしてしまうため、表示領域を決めてその中で往復するようにいたしました。

2.スマホ時にはブレイクポイントを複数作って対応

3.その際のiphoneエラーに対応

→タップ(リンク)が入るとiphoneでエラー(タップした後に戻るとスライダーが切れたように表示されなくなる)が発生。
position:fixedで回避いたしました。

という流れで解決することができました。

ありがとうございました!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • HTML5

    4018questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2070questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。