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

クラスアップデートガイド

こんにちはカンコーディングです。クラスが更新されました。

1.理解を助けるために現在製作されているコア説明中心の授業のほか、JavaScriptを作成して説明する授業が追加されました。

2. JQUERYで制作されたコードをバニラJSに変更する授業が追加されました。

3.セクション12ボーナスクラスが追加されました。

4.セクション12ボーナスの例が追加されました。^__^*

楽しくするUIスクロールインタラクション！

全川のプレビュー映像

最近の作業プロジェクト

💡講義の紹介

こんにちはカンコーディングYouTubeチャンネルのスクロール関連UI、モーションの一部の基本原理がこのクラスに含まれています。ギャングコーディングチャンネルにもさまざまなインタラクションがあるので確認してください：D

PS。初心者基準で授業を制作しました！入門者の方は授業が少し難しいかもしれません。 :)

セクション2-1

スクロールパーセントを取得します。
画面の左側のテキストをすべて読むほど、ゲージがすべて冷えていることがわかります。

^{▲スクロールに応じて上がるゲージバー}

セクション2-2

セクション2では、ネイバーやGoogleなどで使用する無限スクロール原理について学んでみましょう。

^{▲無限スクロール}

セクション3

セクション3では、初心者のための基本的なトランジション、トランスフォーム、ベンダープレフィックスを学びます。
CSS Animationとトランジション加速度処理についても学びます。

^{▲ Transform, Transition & CSS Animation}

セクション4

セクション4では、前に学んだ基本的なスクロール原理とCSSアニメーションを活用して、次のように単純なパララックス効果を作成し、スクロール特定のポイントで変更されるアニメーション効果を学びます。

^{▲ Parallax Scrolling Animation}

セクション5

セクション5では、上下にスクロールするときに画面サイズだけ上下に移動するインタラクションを学び、
先ほど学んだCSS Animationとパララックス効果を応用したマルチパララックス効果も実装してみます。

（画面サイズだけ上下に移動するインタラクションは、 edgeブラウザでsmooth scrolling機能を打つと正常に動作しません。この機能はブラウザが提供するオプションで、 smooth scrolling機能をオフにすると正常に動作します。では、その機能が機能しないようにする方法を学びます。

^{▲マルチパララックススクロール}

セクション6

セクション6では、5つのcssモーションエフェクトと、javascriptとcssアニメーションで作成した日付カウントエフェクトを作成し、そのセクションの位置に到着したときに作成したモーションをプレイする方法を学びます。

^{▲様々なモーション効果}

セクション7

セクション7では、セクションを固定して処理するインタラクションを学びます。次のようにイントロテキストが消え、黒の背景文が開かれてバック背景画像がズームアウトされ、登場し、最後にエンディングテキストが表示されるストーリーのあるインタラクションを学びます。

^{▲ストーリーのあるインタラクションを作る}

セクション8

セクション8では、商品画像を右に固定し、画像とテキストの内容をマッチングさせるインタラクションを学びます。

^{▲商品画像に合わせたテキストインタラクションの作成}

セクション9

セクション9で学ぶ例は、コンテンツを固定し、複数の画像をキャンバスに描画するビデオインタラクションです。次のように製品の説明を処理する部分も学びます。

^{▲複数枚の画像をキャンバスにドローして作るインタラクション}

セクション10-1

セクション10が追加されましたセクション10 UIはこれまで学んだ基本基盤に基づいて作成され、知識共有者と一緒に作る授業（です（3D効果はIEブラウザ未サポート。モバイル機器とChrome Firefox Safariオペラがサポートします）

^{▲スクロールするときにセクション位置に反応するナビゲーションを活性化、セクションのタイトルにマッチして変更されるタイトルテキスト、セクションごとに変更されるテキストカラー 先ほど学んだ講義を応用し、次の3つの機能を持っているUIを実装してみます。}

セクション10-2

cssを活用して3Dモデルを作成してスクロールするときに変形するように実装してみますまるで一方のCFのようではないですか？

^{▲cssを活用して3Dモデルを作る}

セクション10-3

簡単にフォローしてみる応用編先ほど学んだ3dモデルにイメージを適用して3d物を作ってみて、スクロールをするときに少し立体感のあるように動くように実装してみます。

^{▲ビデオや大量の画像を使わなくても基本的な3d効果を実現}

セクション10-4

先ほど学んだ3dモデルにそれぞれのセクション画像を適用し、セクションに合った画像に変更されるように処理します

次の効果を応用すれば、セクションごとに変わる3dモノを実装できますよね？

^{▲セクション画像と3Dモデル画像のマッチング}

値ひとつを修正して4次元空間感の効果とこんなライン効果も作れますよ！

^{▲値ひとつ修正してこんなことも可能なの？ ：D}

PS。セクション10レッスンのインタラクションは、クローンではなく知識共有者のアイデアで作られたインタラクションです。

Section 10-5 課題

この授業は、先ほど作ったセクション10例をカスタマイズする挑戦課題授業です。

ミッション1。セクションに入ると、一度実行する必要がある関数と実行し続ける必要がある関数を分離します。

助けが必要な場合は、クラスのビデオを参照してください：D

Section 10-6 課題

この授業は、先ほど作ったセクション10例をカスタマイズする挑戦課題授業です。

▲商品をディテールに紹介するUIを実装してみます

ミッション1。最初のセクションに黒いディンドを追加し、スクロールするときに背景色がゆっくり登場するようにしてください

ミッション2。 2〜4番目のセクションに到着したときに携帯電話を回転させる

自分で挑戦して作って助けが必要な場合は、授業映像を参考にしてください！

セクション11

セクション11はSVGとビデオで作るインタラクションです

先ほど学んだスクロール式を活用してスクロールするときにSVGラインを描き、映像が登場するインタラクションをとても簡単に作ってみます

▲SVGと映像活用インタラクション

Section 12 - Bonus クラスを追加

セクション12は、テキストが表示され消えるインタラクションです。

そのインタラクションは最新のブラウザでのみサポートされています。

▲先に学んだkeyframesを活用したインタラクション

Section 12 - Bonus の例を追加

セクション12で簡単に学んだキーフレームを活用して追加したボーナスの例です。この例では、さまざまなアプリケーションを可能にする方法を見つけたら、cssだけが少し変更されたので、クラスはありません。難しい部分がある場合は、質問に残してください！

そのインタラクションは最新のブラウザでのみサポートされています。

▲ Bonus example 01

▲ Bonus example 02

▲ Bonus example 03

▲ Bonus example 04

▲ Bonus example 05

▲ Bonus example 06

カンコーディングオープンソースBONUS UI

PS。実務で活用できるボーナスUIは
講義がなく、サンプルコードだけがあります！

^{▲キャンバスワンを描く - インタラクティブなサイトまたは
簡単なドーナツチャートを作成するときに使用することをお勧めします。}

^{▲画像パノラマ - requestAnimationFrameで実装されたパノラマです。
再帰呼出とパノラマ無限ループ原理について勉強してください。}

^{▲画像タブ - 基本中に基本フェード効果と
スライドするボタン効果について学びましょう。}

^{▲モーダルガチャ嫌い：（
モーダルを開いてスクロールバーを隠すときに発生するガタガタを解消！
どのように実装しますか？非常に簡単なコードで勉強してください}

すごいわけではありませんが、以前に取ってくれた方、新入の方、JavaScriptが弱い方のためにオープンソースを作ってコミュニティに共有していたオープンコードです。

上記のコードもInflearnの受講者に役立つことを望んでいただきたいので、講義のサンプルファイルにボーナスUIとして添付しました。

ボーナスUIは講義はありませんが、自分でログも撮ってみて、コードも変更してみながら勉強してみて使ってみたいと思います。後で時間が経つとYouTubeで無料講義で上げる予定なので、コード分析が難しい方は後でYouTubeを参考にしてください。

💡川の特徴

1.コードを書いて説明するクラスがあり、コードを読み、説明するクラスがあります。
• 2つの授業中に重複する部分もありますが、復習の概念として活用すればより大きな助けになると思います。

2. jqueryで作成した部分をバニラjsに変更するクラスを進めます。
• ジェイ・クォーリーとバニラJSコードを学び、2匹のウサギをつかみましょう。

3.実務で使用するインタラクションを作るノウハウをそのままお知らせします。
•あなたの年俸を急上昇させるインタラクションを作成する方法を非常に詳細に説明します。

4. JavaScriptを知らなくても学ぶことができるように説明します。
•JavaScriptの部分はできるだけ詳しく説明します。まず、変数宣言部分と関数について紹介し、プログラム実行順に読み込んで一つ一つ説明するので、講義に出てくるパターンだけを月々覚えてもスキルを習得できるようにしました。

5. 応用されて作られた例中心の学習
•繰り返しのパターンを応用してさまざまな例と一緒に作って、一度見て終わる講義ではなく頭の中に残る講義を作ろうと努力しました。より簡単に理解し活用できることを期待しています。 :)

6.できるだけ簡単に説明します。
•私が初めてプログラミングを始めたとき、私は理解していなかったのでとても難しかった。だから初心者の方々の苦情を知るために、できるだけ簡単に理解できるようにコードを書いており、簡単な単語を選択して説明します。

7.退屈しないように製作しました。
• 途中で少しずつ隙間ができたら退屈します。タイトな編集で休むことなく説明します。一度にちょうど5分～15分だけ集中してみてください！

8.コードの量をできるだけ減らそうとしました:)
•コードが長すぎると習得するのが難しく、習得するのに時間がかかりますか？できるだけ短く簡潔にしようとしました。皆さんの時間は大切ですから！

9.コアのみ説明します。
•あなたの時間は大切ですから！ 「ディテールに知ればもっといいのですが…すぐに知らなくてもいい」ことは果敢に除外しました。

10.雑談を最小化します。
•あなたの時間は大切ですから！雑談とか不要な説明は思い切ってしまいました。

11.サンプルコードズームインアウト編集。
•サンプルコードのズームイン編集で、モバイルデバイスの画面でもコードを理解しやすくしました。登校道、出勤道にもしばらくの時間を投資してみてください。

💡お知らせします

• JAVASCRIPT ES5文法とJQUERYを使用します。 （バニラではes6も使用。）
• 無条件にして作って見て終わろうとしないで、まだ基礎が足りなくてすぐに授業内容みんながわからなくても時間を長くとってコードを修正して応用してみて、自分だけのコードで作ってみるといいと思います。
• たまに入門者の方々が質問を投稿していますよ！プログラミングが最初は見慣れないが、ハングルのようにずっと見てみると、慣れて本人も知らない間にコードが目に入り始めるでしょう！ :) もちろん、初心者の方を考慮してコードに難しい文法を除いて、できるだけ簡単に作っておきました
• 早急にちょっと見て終わろうという考え、したがって作ってみて終わろう！という考えより一歩ずつ理解しながら修正、応用して作ってみると、本人も知らないうちにはっきり成長していると思います。
• 初心者のためのスクロールインタラクション第1編では、スクロールインタラクションの基本を確実に学ぶように製作されました。本人の実力が中級以上の場合は2編お待ちください。
• 本人の実力が中級なのにスクロールインタラクションスキルを学ぶためにこの講義を聞く方に事前にお知らせします。その講義は初心者の方に役立つように説明されており、実力が中級以上であれば講義の内容がとても簡単になります。
• この講義は初心者の基準で説明されて作成されました。入門者の方は、cssとhtmlの基本基が確実になければスムーズに講義を進めることができます。
• html、css、javascriptベースがない場合？私の考えにランダムに従っても十分に学べると思います^^;;しかし、非常に繰り返し見て、コードを修正してログを撮ってみて、自分のコードにする必要がありますか？
• 一生懸命作ったソースコードを提供します:) (使用されたオープンソースライブラリ - jQuery)
• カンコーディングYouTubeチャンネル（クリックするとショートカット）でも様々なモーション、UIインタラクションを紹介します。今後、このチャンネルには初心者のための基本的な講義やハチチップ最新のITニュースUI、モーションインタラクションなどを伝える予定です。
• バニラの授業はセクション2からセクション6までのみ行われます。理由はセクション7からセクション11に出てくるjqueryパターンはセクション2～6からすべて出てくるので重複する授業とはしませんでした。そうではありませんが、もし難しい部分があれば質問に残してください！さらにクラスを作り上げていきます。 :)

💡予想質問Q&A

Q. 授業内容の中で難しい部分は教えていただけますか？
当然お知らせします：D質問と回答に文を残すと私に1～5時間の間メールが来ますが確認後すぐに回答を差し上げています。難しいか気になる点はぜひ知って渡ってください！

Q. 非専攻者も聞くことができますか？
A. 非専攻者でも HTML の基本、基本的な CSS width、color、position などの属性だけを知っていれば十分に活用できるように講義を作成しました。

Q. 実務でジェイクエリは使用しませんか？
A.私たちの国で開発されているウェブはほとんどジェイクエリを使って開発されており、現業でメンテナンスやジェイクエリを使用するプロジェクトも多いです。また、 Frond-EndフレームワークであるReact、Vue JSでもジェイクエリーを使ってドームを操作することもあります。バニラJSに慣れているなら、JayQueryはとても簡単なので、一緒に知っていれば、ビジネスで多くの助けになるでしょう。 :)

💡スクロールインタラクション1を効率的に学習する方法！

最初！

授業例コードをあらかじめ用意しておき、講義映像と比較して学習してみてください講義で説明する変数、数式を理解しにくい場合は、ファズボタンを押してCONSOLE.LOGで確認して進んでください！

第二！

セクション2からじっくり見て、スクロールインタラクションの原理を理解してください！講義を途中からご覧の方がいらっしゃるようですが、スクロールインタラクション講義1編の授業内容はセクション2から11までずっと応用され、繰り返し、繰り返し学習を通じて自然に原理を理解するように製作しました。

第三！

コードをテストする部分は、完成しているサンプルコードを直接修正してみて、数式に関連する変数はログを撮ってみて、個人的な時間投資を通じてぜひ復習してみることをお勧めします！ （ログを撮る方法がわからない場合は？？大胆にお問い合わせください！）

第四！知っておくと良い点！

講義でコードを詳細に説明することに焦点を当てるのは、プログラムを作成するときにプログラムの実行順序とプログラム全体の構造を把握することが最も重要だからです。

構造全体を把握して実行順序を理解することで、プログラムをカスタマイズしたり、エラーが発生したときに、どの部分を最初に修正して改善すべきかを正確に頭の中に描くことになります！プログラムの全体的な構造を頭の中に描く習慣を育てれば、私も知らない間にプログラム構造を作る上でノウハウができ始めるでしょう:)