Q&A
> このWebサイトのようなスクロールに応じて電車が線を走るようなUIの実装イメージがわきません。
スクリーンショットではどのようなアニメーションなのか分かりません。URL等を明記してください。
(質問本文は修正することができます。)
デザインカンプのみです。まだコーディングはしていません。
選定言語
HTML CSS Javascript
できればこれで実現したい。
このWebサイトのようなスクロールに応じて電車が線を走るようなUIの実装イメージがわきません。
スクロールに応じて単純に追従する実装ならいろいろググれば出てきますが、
こういう複雑な追従方法はググっても出てきません。
こういうUIはそもそも実現不可能なのでしょうか？
実現できるならアイデアのヒントだけでもいいのでご教示お願いできないでしょうか？
回答1件
0
ベストアンサー
SVGを利用するのはどうでしょうか？下記のようなイメージです。
https://codepen.io/fanus/post/svg-circle-trail-animation
投稿2020/08/12 06:53
総合スコア213
なんで低評価なんだか分かりませんが、固定値埋め込んでCSSで実現できそうですよね。
「ベジェ曲線上にマグロをトレースさせるCSSアニメーション - Qiita」
https://qiita.com/nishinoshake/items/944cb96d8cbd4382e126
この作者もSVGがいいとおっしゃってますね。読みやすいので。
ちなみにマグロのデータを間引いて作ったCSSの例がこちら。
↓をhoge.htmlとして保存して開く
<img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d8f973fe80d135e40a494e9f98c27e09.png">
<style>
img{
animation: 10000ms linear -10000ms infinite alternate anime
}
@keyframes anime {
0% {transform: translate3d(0px, 0px, 0px)}
5.2%{transform: translate3d(-0.65px, 0.5px, 0px)}
10%{transform: translate3d(-4.58px, 3.56px, 0px)}
15.2%{transform: translate3d(-15.9px, 12.12px, 0px)}
20%{transform: translate3d(-35.58px, 26.04px, 0px)}
25.2%{transform: translate3d(-68.84px, 46.68px, 0px)}
30%{transform: translate3d(-110.58px, 66.9px, 0px)}
35.19%{transform: translate3d(-164.36px, 81.56px, 0px)}
40%{transform: translate3d(-214.48px, 77.94px, 0px)}
45.2%{transform: translate3d(-251.94px, 44.34px, 0px)}
50%{transform: translate3d(-244.2px, -15.61px, 0px)}
55.2%{transform: translate3d(-168.65px, -77.29px, 0px)}
60%{transform: translate3d(-63.89px, -102.86px, 0px)}
65.2%{transform: translate3d(59.27px, -100.58px, 0px)}
70%{transform: translate3d(164.29px, -81.88px, 0px)}
75.2%{transform: translate3d(257.3px, -55.82px, 0px)}
80%{transform: translate3d(319.89px, -34.12px, 0px)}
85.2%{transform: translate3d(363.13px, -17.39px, 0px)}
90%{transform: translate3d(384.11px, -8.79px, 0px)}
95.19%{transform: translate3d(392.54px, -5.25px, 0px)}
100%{transform: translate3d(393.6px, -4.81px, 0px)}
}
</style>
> なんで低評価なんだか分かりません
そうですよね、不思議です。
追記ありがとうございます！
あなたの回答
tips
プレビュー
