◀︎STUDY JavaScript_011-1 マウス・ホイールの操作
1
-----
-----
-----
-----
JavaScript プロパティ: WheelEvent.deltaY
- wheelイベントはホイールを動かしたときに発生するイベント.
- deltaY: 垂直方向のスクロール量.
- deltaX: 水平方向のスクロール量.
- deltaZ: Z軸のスクロール量.
▼ Download: ■ sample_JS_011-ABCDE
スクロールの使用目的
- ページの最上部にスクロールする
- 指定した位置へスクロールする
- ページをスクロールさせる
- スクロールによってオブジェクトが現れる
- スクロールによって画面が入れ替わる
サンプル - 1
div タグを使用し, フォント・サイズを 40px /
バックグラウンド・カラーを red に設定する.
サンプル - 2
背景の高さを 300px に設定して文字を天地の中心に置きながら文字色を white にする.
サンプル - 4
スクロールすると背景色が red / blue / green / yellow / black / silver / purple / brown / lime / orange / white の順にオパシティを伴って変化する(文字色は一回遅れで変更).
CSS: オパシティ解説
- スクロールすると オパシティが 0 〜 1 に変化する
- トランジションは 2 秒間
JavaSxript: 解説
- querySelectorAll でクラス → 表示を取得
- addEventListener で wheel を選択
- 1 という数から一つづつ増える関数にクリック数を与える
- deltaY 方向にスクロールするたびに「表示 その_01」 → 「表示 その_02」と増える
1
-----
-----
-----
-----
◀︎Contents STUDY JavaScript_011-1
