0

CSSのみで画像を無限スクロールしたのですが、スマホで見たときに画像どうしが折り重なってしまいます。
2つめのul要素が前に出てきているのが原因だと思うのですが、スマホの時のみliやimgの幅を変更してみても解決できません。
これを折り重ならずに画像1枚分が幅いっぱい表示されるようにしたいです。
どこをどう直せばよいでしょうか。

参考にしたサイトはこちらです。
https://chocolat5.com/tips/loop-image-animation/

<div class="loop__wrap">
  <ul>
    <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
  </ul>
  <ul>
    <li><a href=""><img src="./assets/img/001.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/002.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/003.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/004.jpg" alt=""></a></li>
    <li><a href=""><img src="./assets/img/005.jpg" alt=""></a></li>
  </ul>
</div>

 .loop__wrap{
            width: 100vw;
            height: 100%;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            overflow-x: hidden;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row nowrap;
            flex-flow: row nowrap;
            overflow: hidden;

            ul{
                display: -webkit-flex;
                display: flex;
                -webkit-flex-flow: row nowrap;
                flex-flow: row nowrap;
                width: 100%;
                margin: 0;
                padding: 0;

                @include mq(md){
                    margin: 0.2px;
                }

                li{
                    width: 100%;
                    display: inline-block;


                     img{
                         display: block;
                         width: auto;
                         height: 100%;

                     }
                     img + img{
                        animation: loop2 50s linear infinite;
                     }
                }

                  &:first-child{
                      animation: loop 50s -25s linear infinite;
                      backface-visibility: hidden;
                      will-change: toransform;

                  }
                  &:hover{
                      animation-play-state: paused;
                  }
            }
             ul + ul{
                 animation: loop2 50s linear infinite;
             }
            a{
                width: auto;
                display: block;
                height: 100%;
            }
        }

レスポンシブのmixinはこちらです。

$breakpoint-sm: 357px !default;
$breakpoint-md: 768px !default;
$breakpoint-lg: 1024px !default;

$breakpoints: (
    'sm': 'screen and (max-width: 357px)',
    'md': 'screen and (max-width: 768px)',
    'lg': 'screen and (min-width: 1024px)'
) !default;

@mixin mq($breakpoint: md){
    @media #{map-get($breakpoints, $breakpoint)}{
        @content;
    }
}

アニメーションのmixinはこちらです


@keyframes loop{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes loop2{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to{
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

ご回答宜しくお願い致します。

4
  • Sass のコードが不完全に見えます。少なくとも現在のコードでは、定義されていない mixin があるため、エラーが発生するはずです。問題が再現出来るコードを追記していただけませんか?
    – supa
    Commented 2019年8月15日 10:56
  • mixinを追加しました
    – user21426
    Commented 2019年8月16日 14:29
  • jsFiddle にて現象の再現確認を行ないましたが、質問文のような問題を再現出来ませんでした。
    – supa
    Commented 2019年8月16日 14:42
  • 本当ですね。あとアニメーションのmixinを追記しました。
    – user21426
    Commented 2019年8月16日 15:12

1 件の回答 1

0

.loop__wrap 内の ul 要素に対して width: 100% を設定しているため、 ul 要素の横幅より ul 要素内の li 要素の横幅が大きくなっていることが原因です。簡単な対処策としては、当該 width プロパティの記述を削除することが考えられます。

.loop__wrap ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  /* width: 100%; */  /* 削除 */
  margin: 0;
  padding: 0;
}

@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

.loop__wrap {
  width: 100vw;
  height: 100%;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  overflow: hidden;
}

.loop__wrap ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  /* width: 100%; */  /* 削除 */
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .loop__wrap ul {
    margin: 0.2px;
  }
}

.loop__wrap ul li {
  width: 100%;
  display: inline-block;
}

.loop__wrap ul li img {
  display: block;
  width: auto;
  height: 100%;
}

.loop__wrap ul li img+img {
  animation: loop2 50s linear infinite;
}

.loop__wrap ul:first-child {
  animation: loop 50s -25s linear infinite;
  backface-visibility: hidden;
  will-change: toransform;
}

.loop__wrap ul:hover {
  animation-play-state: paused;
}

.loop__wrap ul+ul {
  animation: loop2 50s linear infinite;
}

.loop__wrap a {
  width: auto;
  display: block;
  height: 100%;
}
<div class="loop__wrap">
  <ul>
    <li>
      <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
    </li>
    <li>
      <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
    </li>
    <li>
      <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
    </li>
    <li>
      <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
    </li>
    <li>
      <a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a>
    </li>
  </ul>
  <ul>
    <li>
      <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
    </li>
    <li>
      <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
    </li>
    <li>
      <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
    </li>
    <li>
      <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
    </li>
    <li>
      <a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a>
    </li>
  </ul>
</div>

もしくは、以下のように ul 要素の幅に合わせて画像幅を伸縮させることでも問題を解決出来ます。

.loop__wrap ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  flex: 0 0 100%; /* 追記 */
  margin: 0;
  padding: 0;
}

.loop__wrap ul li {
  width: 100%;
  display: inline-block;
  flex: 1; /* 追記 */
}
.loop__wrap ul li img {
  display: block;
  width: 100%; /* 変更 */
  height: 100%;
}

@charset "UTF-8";
@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
.loop__wrap {
  width: 100vw;
  height: 100%;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  overflow: hidden;
}
.loop__wrap ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  flex: 0 0 100%; /* 追記 */
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .loop__wrap ul {
    margin: 0.2px;
  }
}
.loop__wrap ul li {
  width: 100%;
  display: inline-block;
  flex: 1; /* 追記 */
}
.loop__wrap ul li img {
  display: block;
  width: 100%; /* 変更 */
  height: 100%;
}
.loop__wrap ul li img + img {
  animation: loop2 50s linear infinite;
}
.loop__wrap ul:first-child {
  animation: loop 50s -25s linear infinite;
  backface-visibility: hidden;
  will-change: toransform;
}
.loop__wrap ul:hover {
  animation-play-state: paused;
}
.loop__wrap ul + ul {
  animation: loop2 50s linear infinite;
}
.loop__wrap a {
  width: auto;
  display: block;
  height: 100%;
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}
<div class="loop__wrap">
  <ul>
    <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
    <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
    <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
    <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
    <li><a href=""><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></a></li>
  </ul>
  <ul>
    <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
    <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
    <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
    <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
    <li><a href=""><img src="http://placehold.jp/703d3d/ffffff/150x150.png?text=%20" alt=""></a></li>
  </ul>
</div>

この質問に回答するには、ログインする必要があります。