Forked from: Crane_MolTech's Raphael.js のアニメ仕様指定ガイドの基本20 View Diff (146)

Fork
1
Fav
0
View
251
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 382 lines
  • HTML 1 lines
  • CSS 10 lines
右のテキスト欄のスクロール。

スクロールボタンのアイコンは正しく出れば下のようになります。
https://twitter.com/Crane_MolTech/status/1093321095304761344

ポイントはマウスダウンで requestAnimationFrame() によりダミーテキストを上下に動かしてスクロールを継続、アップで解除です。

この時注意しないといけないのは、ダミーテキストの上端と下端に達した時に自動的にスクロールを解除してそれ以上動かないようにする点です。

これは ①ダミーテキストの高さとY位置と、②clip-rect で見える範囲を指定した時のその矩形の上端・下端の範囲を利用 で実現しています。

AAで書くとこんな感じになります。「」で囲まれた矩形がclip-rect で見える範囲。
https://twitter.com/Crane_MolTech/status/1093332627686211584

---------------------------------------------

スクロールのスピードが遅く感じる場合は txtScU = 2; を4とか5にして下さい。
マイナス方向の変更も忘れずに。

  • Raphael.js のアニメ仕様指定ガイドの基本23
  • Raphael 1.5.2
  • Raphael.js のアニメ仕様指定ガイドの基本23

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by