回答編集履歴
1
解説を追記
answer
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
質問3の答え: 行ごとのアニメーションは、spanで行を囲っちゃうのが手だと思います。
|
|
2
|
-
質問1の答え: 縦スクロールとの連動は、onscrollイベントをlistenして、event.target.scrollTopを読むとスクロールの絶対量がpxで取得できます。
|
|
3
|
-
質問
|
|
1
|
+
質問3の答え: 行ごとのアニメーションは、spanで行を囲っちゃうのが手だと思います。それが難しければ、それこそ文字ごとにspanで区切っちゃっても問題はないでしょう。同じ行内にあるかは横の位置を比較すれば判定できますし。
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
質問1の答え: 縦スクロールとの連動は、onscrollイベントをlistenして、event.target.scrollTopを読むとスクロールの絶対量がpxで取得できます。また、横スクロールはelement.scrollTo()メソッドで実現できます。scrollOptions.behavior = 'smooth'にEdgeやSafariは対応していませんが、こちらは適切なpolyfillが存在します。
|
|
6
4
|
|
|
5
|
+
質問2の答え: 「特定のメッセージが画面に表れたとき」に何かを起こしたいのなら、色々な方法が考えられますが、そのメッセージのspanに対して「現れた」ことを示すカスタムイベントを発火させるのが一番拡張性が高い気がします。spanが画面内に入ったことの判定はIntersectionObserver APIを使うか、scrollイベントの度に横の位置で判定すればいいでしょう。
|
|
6
|
+
|
|
7
|
+
この質問は範囲が広すぎて、ちょっとTeratailで回答できる問題の範囲を越えているような気がするので、githubか何かにprojectを上げていただければ、forkなりなんなりでアイデアを出したりはできますよ。
|
|
8
|
+
|
|
7
9
|
難しければ回答に追記という形で幾つかサンプルコードをあげてみます。
|