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

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

新規登録して質問してみよう
ただいま回答率
85.50%
UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

UI Design

UI Design(UIデザイン)は、ユーザインターフェースをデザインすることです。ユーザーとシステムがスムーズにコミュニケーションを取るために、OSやアプリ画面などを使いやすくデザインすることを指します。

Q&A

解決済

1回答

2963閲覧

スクロールに応じて特定の線に沿うように走るUI実装のイメージが湧かない

DaisukeMori

総合スコア217

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

UI Design

UI Design(UIデザイン)は、ユーザインターフェースをデザインすることです。ユーザーとシステムがスムーズにコミュニケーションを取るために、OSやアプリ画面などを使いやすくデザインすることを指します。

1グッド

0クリップ

投稿2020/08/12 06:09

編集2020/08/12 08:04

イメージ説明

イメージ説明

デザインカンプのみです。まだコーディングはしていません。

選定言語

HTML CSS Javascript
できればこれで実現したい。

このWebサイトのようなスクロールに応じて電車が線を走るようなUIの実装イメージがわきません。
スクロールに応じて単純に追従する実装ならいろいろググれば出てきますが、
こういう複雑な追従方法はググっても出てきません。

こういうUIはそもそも実現不可能なのでしょうか?
実現できるならアイデアのヒントだけでもいいのでご教示お願いできないでしょうか?

kmtr👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kai0310

2020/08/12 06:11

> このWebサイトのようなスクロールに応じて電車が線を走るようなUIの実装イメージがわきません。 スクリーンショットではどのようなアニメーションなのか分かりません。URL等を明記してください。 (質問本文は修正することができます。)
DaisukeMori

2020/08/12 07:53

これはデザインカンプのみです。 こういうの実装するにはどうすればいいかわからなかったので コーディング入る前に聞きたかっただけです。
guest

回答1

0

ベストアンサー

SVGを利用するのはどうでしょうか?下記のようなイメージです。
https://codepen.io/fanus/post/svg-circle-trail-animation

投稿2020/08/12 06:53

kmtr

総合スコア213

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dameo

2020/08/13 00:41 編集

なんで低評価なんだか分かりませんが、固定値埋め込んで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>
kmtr

2020/08/13 02:59

> なんで低評価なんだか分かりません そうですよね、不思議です。 追記ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問