Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

liタグを円状に並べてずっとスライドできるようにしたい。

解決したいこと

現在jsの勉強をしており、いろいろなパーツを作ってjsの処理や応用を学んでいるのですが、
下記のようにliタグを円形状に変形させて、はじめと最後のliをくっつけ、ずっとスクロールできるようにしたいのですが、そんな方法が存在するのかどうか分からず、行えるのであれば行う方法を教えていただきたいです。

・liタグを円形に配置する方法
・liタグのはじめと最後のタグをくっつける方法
・liタグを無限にスクロールするようにする方法

image.png

最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたらご教示いただけますと幸いです。
何卒よろしくお願いします。

0

1Answer

こういうことですか?
https://jsfiddle.net/Lhankor_Mhy/zw7kL1to/

ul {
    width: 100px;
    height: 100px;
}

li {
    offset-path: circle(30% at center);
    width: max-content;
    animation: test 10s linear 0s infinite forwards;
}

li:nth-child(1) {
    animation-delay: -10s;
}

li:nth-child(2) {
    animation-delay: -9s;
}

li:nth-child(3) {
    animation-delay: -8s;
}

li:nth-child(4) {
    animation-delay: -7s;
}

li:nth-child(5) {
    animation-delay: -6s;
}

li:nth-child(6) {
    animation-delay: -5s;
}

li:nth-child(7) {
    animation-delay: -4s;
}

li:nth-child(8) {
    animation-delay: -3s;
}

li:nth-child(9) {
    animation-delay: -2s;
}

li:nth-child(10) {
    animation-delay: -1s;
}

@keyframes test {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}
1Like

Comments

  1. @Kobayashi0620

    Questioner

    回答いただきありがとうございます。
    円形の配置というものは行えるのですね!!

    文章が読みづらくすみません。
    円形のものが自動で回転するのではなく、ユーザーの操作で回転するようなイメージです

    ・スクロールした分回転する
    

    もしくは

    ・スクラッチ動作分回転する
    

    といったイメージになります。

  2. スクロールというのは、ページのスクロールのことですか? ページのスクロール位置にあわせて位置が決まるような感じですか?

    スクラッチとはなんですか?

  3. @Kobayashi0620

    Questioner

    スクロール
     こちらはまさしく、ページのスクロール位置にあわせて位置が決まるような感じです

    スクラッチ動作
     自分はドラッグ状態で円形状にスライドすることを言ってます

  4. スクラッチ動作については、円形状にドラッグするという定義がなかなか難しそう(どの程度ドラッグの軌跡が円形から外れている場合はスクラッチと判定しないか、など)ですね。

    スクロールについては了解しましたが、しかし、ページのサイズは有限ですので『無限にスクロールする』とは矛盾します(いつかスクロールに終わりが来る)が、かまいませんか?

  5. @Kobayashi0620

    Questioner

    スクラッチ動作については、

    作れるには作れるのですね!
    なにか参考記事があれば教えていただきたいです。

    スクロールについては了解しましたが、

    矛盾、、承知しました!
    ありがとうございます!
    頼りきり担ってしまいすみません。

  6. @Kobayashi0620

    Questioner

    ありがとうございます
    参考にしてみます

  7. @Kobayashi0620

    Questioner

    え、作ってくださったのですか!?
    本当にありがとうございます
    咀嚼して自分の力にしていきます
    本当にありがとうございます

Your answer might help someone💌