現在jsの勉強をしており、いろいろなパーツを作ってjsの処理や応用を学んでいるのですが、
下記のようにliタグを斜めに配置してはじめと最後のliタグを連結し無限に同じリストをスライドできるようにしたいのですが、そんな方法が存在するのかどうか分からず、行えるのであれば行う方法を教えていただきたいです。
・liタグを斜めに配置する方法
・はじめと最後のliタグをくっつけて無限にスクロールできるようにする方法
最後まで読んでいただきありがとうございます。
ご存じの方がいらっしゃいましたらご教示いただけますと幸いです。
何卒よろしくお願いします。
こういう感じでしょうか？
main {
flex: 1 1 auto;
display: block;
overflow: auto;
scroll-timeline-name: --main_view;
}
.content {
height: 50vh;
}
.wrapped {
overflow: hidden;
ul {
padding: 0;
margin-left: 10em;
transform-origin: left top;
transform: rotate(45deg);
animation: ul-scroll auto linear forwards;
animation-timeline:--main_view;
animation-range: contain 0% contain 100%;
li {
transform-origin: left top;
transform: rotate(-45deg);
word-break: keep-all;
}
}
}
@keyframes ul-scroll {
from {
margin-left: 10em;
}
to {
margin-left: 100%;
}
}
@Kobayashi0620
Questioner
イメージしているものとすごく近いです！
斜めの位置固定で画面中央を通っているイメージで、斜めにスワイプすると、移動していくようなイメージです。
説明が下手ですみません