初心者でも作れるスクロールインタラクション。第1回 JavaScript

こんにちは。 :)

 

セクション12で使用した式の補足クラスが追加されました。 ^^..

そしてセクション12ボーナスの例も追加されているので、参考にしてください。

 

ありがとうございます。 :)

こんにちは〜！最近..物価も上がりすぎてみんな色々と大変そうですねㅠㅠ..

少しでも役に立つようにボーナス例を追加しました！

 

PS。よくわからないことを聞いたらお知らせします。

ありがとう：D

こんにちは:)

バニラJS完成コードを添付して載せました。

ビデオクラスはすべてアップロードされています。

バニラレッスンはセクション2からセクション6まで行われます:)

理由は

セクション7からセクション11に出てくるjqueryパターンは

セクション2～6ですべて出てくるので重複する授業なので特に必要ないからですよ！

もし難しい部分があれば質問に載せて頂ければ追加で作ってあげるようにします:)

ありがとうございます。

こんにちは！

今日もお知らせします。

1. Mac Chromeのバグパッチ

セクション5-2 Macのクロームバーグは、開発段階のChromeブラウザでは発生しません（直接確認2022.1.30日）

開発段階のChromeブラウザはまだ公式に配布されていないためバグが発生しますが、後に公式バージョンが配布された場合

Safari Chromeのバグは発生しないと予想されます。

 

2. edgeブラウザスムーススクロール

昨日、edgeブラウザのネイティブ機能であるSmoothスクロールを使用すると、セクション5-2でバグが発生することをお知らせしました。

今日のバグ修正ビデオを作成します。

私が以前に作ったauto slideも問題が生じたか確認してみました。

SJ AUTO SLIDEにも似たロジックを使ったんですよ！

しかし、auto slideではバグが発生しませんでした。

それで理由を見てください。

私はUI FRを作成したときに独自に開発したスムーススクロール機能があります。

この機能のためバグが生じませんでしたね。

しかし、この機能を外すとバグが生じました。

つまり、現在edgeブラウザに実装されているスクロール技術に問題があるのは明確な事実です。

私が考えると、edgeブラウザはバージョンアップし、明らかにこの問題にパッチを当てると思います。

パッチになればあえてバグ処理をしなくてもいいので参考にすればいいようです。

 

スムーススクロール機能などの場合は、さまざまな式を作成する必要があります。

FRだと思うので、あちこちが絡んでいるから

授業で作るのは事実上大変だと思います。

 

それでも、さまざまなバグ処理パターンを通じて何か少しでも役に立てば幸いです。

 

ありがとう:)

旧正月をお過ごしください：D

 

 

こんにちは:)

 

更新案内:)

 

1. jqueryを使ってスクロールインタラクションを制作する部分の実習と説明をともに授業がすべて追加されました。

もし授業が難しい方がいる場合は、コードを書いて説明する実習編の授業を先に参考し、次の説明編でもう一度理解するパターンを使用すると良いようです。

 

 

2.セクション5-2セクション移動インタラクションにバグが見つかりました。このバグはMAC環境のChromeブラウザでトラックパッドを使用したときに発生しました（iMacマジックマウスは問題ありません）

バグの内容は

1つずつ移動するセクションがブラウザの一番上に配置されているときにトラックパッドなどを利用してクイックスクロールする場合

一番最初のセクション移動アニメーションが実行されず、その後からアニメーションが実行される場合です。 (断続的に発生)

 

そのバグを分析した結果、Macのような場合、移動するセクションに入ると問題が発生します。

セクションに入ったときにスクロールイベントが機能しないことを指定しました。

つまり、wheelイベントを追加してセクションに入るとき、wheelをブロックして分岐処理してイベントに対するデフォルト動作をしないように指定して解決しました。

 

しかし、wheelイベントのみを使用すると、Windows環境でバグが発生しました。

Windows環境でwheelイベントのみを使用するとバグが発生する理由は

Windowsでは、マウスホイールイベントが発生する頻度がMacに対して非常に低いため、スクロール値を正しく取得できないバグが発生しました。

簡単に言えば、スクロールイベントとホイールイベントが呼び出される数が異なるということです。

 

そのため、ウィンドウでは既存に作成されていたコードをそのまま使用するように処理します。

つまり、Macではwheelイベントを使用し、Windowsではscrollイベントを使用するように分岐処理する授業が追加される予定です。

 

このバグは、MacでもChromeでのみ発生するバグラグーグルでパッチができるので、既存の授業を変更せずにバグ修正映像を上げるようにします。

（UI実装時にスクロールイベントでスクロールの位置を変更するときにモーションを入れると作業が少し面倒です。）

 

3.バニラjs 変更作業がすべて完了しました。

既存のジェイクエリーで作成されていた部分をバニラjsに変更する授業が追加される予定です。

そのコードは、ieと古いブラウザを考慮せずに書かれています。

 

バニラjsコードの変更が簡単すぎるので、セクション5、6を除く残りは初心者の方も自分で変更できると思います。

 

バニラjsに変更した完成コードはセクション別の最後のstepファイルに作成され、まずアップロードする予定です。 （1月末～2月上旬）

 

そしてバニラjsに変更する過程の授業は2月中にすっきりアップロードする予定です。

更新された授業が苦労している方に多くのお役に立てば幸いです。

 

 

では、明けましておめでとうございます。

ありがとう：D

こんにちは:)

アップデート状況をお知らせします。

スクロールインタラクションで最も基本的で重要な部分がセクション2〜5です！

一度この部分は新しく作り上げておき、前よりも理解しやすいと思います！

 

- アップデートスケジュールガイド -

実際、私は首がかなり悪いです。疲れていると、炎症がハンサムになり、首がよくロックされます。

だから以前に録音したときにもかなり苦労しました。

音量を良く録音しようと声を大きく見上げるとぎこちない部分もできました。

 

今回も無理してアップデートを進めてから首に炎症が生じました。

以前にジェイコーリーで書かれた部分の実習編授業は、1月末頃のアップデートが完了するようです。 :(

 

そしてバニラjsに変更する授業は2月中更新になる予定です。

急いで待っている人もいらっしゃると思います。

できるだけ早く充実したレッスンを作成しましょう。

 

ありがとう:)

 

 

 

 

こんにちは:) カンコーディングです。

まず、スクロールインタラクションを受講してくれた受講生の皆さんに心から感謝の言葉を伝えます。 ^_^

私がスクロールインタラクションを初めて作った当時、原理理解に重点を置いて授業を制作しました。

時間が流れてみると、受講生の皆さん皆を満足させてあげることができないことが分かりました。

それで、既存のクラスは理論編として残されています。

入門者の皆さんまで皆が理解できるように作って学ぶ実習編授業を(jquery使用)追加し、

セクション全体ではないかもしれませんが、jqueryを引いたバニラSCRIPTでスクロールインタラクションを実装するクラスを追加したいと思います。 （分量が多すぎない場合は、すべてのセクションバニラクラスを追加予定）

合計2つの授業が無料で追加されます。

私は私が作った授業に責任感を感じ、皆さんに満足できる授業を作ります。

アップデートは1月以内に完了する予定で、特別な事項がある場合は2月中に終了する予定です。

もう一度ありがとうございます。

ありがとう:)

 

 

 

 

こんにちは:)

受講生の皆さん皆、元気に仲良くしていますか？

相違ではなく、今日のスクロールインタラクションサンプルコードが更新されて連絡させていただきました。

アップデート内容は以下の通りです。

1.セクション10完成コードを追加

2.セクション11完成コードを追加

単独でコード分析が可能な方は完成コードを参照していただければと思います。

勉強が目的の方は、セクション10、セクション11にあるミッションを処理してみてください。

セクション10とセクション11は、先に学んだ内容を持って作った授業なので、一人で解決してみることをお勧めします:)

ありがとう：D