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

授業アップデートのお知らせ

こんにちは。授業が更新されました。

1. 理解を深めるために、現在制作されている核心説明中心の授業に加えて、JavaScriptを書きながら説明する授業が追加されました。

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

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

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

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

全講義プレビュー動画

最近の作業プロジェクト

💡 講座紹介

こんにちは。깡코딩YouTubeチャンネルにあるスクロール関連のUI、モーションの一部の基本原理がこの授業に含まれています。깡코딩チャンネルにも様々なインタラクションがあるので確認してみてください😆

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

セクション 2-1

スクロール率の計算です。
画面左側のテキストを読み終える頃には、ゲージが全て満たされていることがわかります。

^{▲ スクロールに応じて満ちていくゲージバー}

セクション2-2

セクション2では、NaverやGoogleなどで使用されている無限スクロールの原理について学んでいきます。

^{▲ 無限スクロール}

セクション3

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

^{▲ Transform、Transition & CSS Animation}

セクション4

セクション4では、これまで学んだ基本的なスクロールの原理とCSSアニメーションを活用して、次のように簡単なパララックス効果を作り、スクロールの特定地点で変化するアニメーション効果について学びます。

^{▲ パララックススクロールアニメーション}

セクション5

セクション5では、上下にスクロールする際に画面サイズ分だけ上下に追従するインタラクションを学び、
これまで学んだCSS Animationとパララックス効果を応用した多重パララックス効果も実装してみます。

(画面サイズ分上下に移動するインタラクションはEdgeブラウザでsmooth scrolling機能をオンにした場合、正常に動作しません。この機能はブラウザが提供するオプションで、smooth scrolling機能をオフにした場合は正常に動作します。授業ではEdgeブラウザをチェックして、Edgeでは該当機能が動作しないようにする方法を学びます。)

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

セクション6

セクション6では5つのCSSモーション効果とJavaScriptとCSSアニメーションで作る日付カウント効果を作成し、該当セクションの位置に到達したら作成したモーションを再生する方法を学びます。

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

セクション7

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

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

セクション8

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

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

セクション9

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

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

セクション10-1

セクション10が追加されました セクション10のUIはこれまで学んだ基礎をもとに作られており、知識共有者と一緒に作る授業(です (3D効果はIEブラウザ非対応。モバイル機器とChrome、Firefox、Safari、Operaで対応しています)

^{▲ スクロール時にセクション位置に反応するナビゲーションのアクティブ化、セクションのタイトルと連動して変更されるタイトルテキスト、セクションごとに変更されるテキストカラー これまで学んだ講義を応用して、次の3つの機能を持つUIを実装してみます。}

セクション10-2

cssを活用して3Dモデルを作り、スクロールする時に変形されるように実装してみますまるで一編のCFのようではないですか??

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

セクション10-3

簡単に試してみる応用編 先ほど学んだ3Dモデルに画像を適用して3Dオブジェクトを作り、スクロール時により立体感のある動きを実装してみます。

^{▲ ビデオや大量の画像を使用しなくても基本的な3D効果を実装}

セクション 10-4

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

次の効果を応用すればセクションごとに変わる3Dオブジェクトを実装できますよね??

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

値を1つ修正するだけで、4次元空間のような効果やこのようなライン効果も作れます!

^{▲ 値を一つ修正するだけでこんなことも可能なんて?? :D}

PS. セクション10の講義に出てくるインタラクションは、クローンではなく知識共有者のアイデアで作られたインタラクションです。

Section 10-5 チャレンジ課題

この授業は、先ほど作成したセクション10の例題をカスタマイズするチャレンジ課題授業です。

ミッション1. セクションに進入時、一度だけ実行されるべき関数と継続的に実行されるべき関数を分離してみてください

困ったときは授業動画を参考にしてください :D

Section 10-6 チャレンジ課題

本授業は、先ほど作成したセクション10の例題をカスタマイズするチャレンジ課題授業です。

▲ 商品を詳細に紹介するUIを実装してみます

ミッション1. 最初のセクションに黒いディムドを追加し、スクロールする時に背景色がゆっくりと現れるように作ってみてください

ミッション2. 2~4番目のセクションに到達したときスマートフォンが回転するように作ってみましょう

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

セクション11

セクション11はSVGと映像で作るインタラクションです

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

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

セクション12 - ボーナス授業追加

セクション12はテキストが現れて消えるインタラクションです

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

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

Section 12 - ボーナス例題追加

セクション12で簡単に学んだキーフレームを活用して追加したボーナス例題です。この例題を通じて様々に応用できる方法を見つけていただければと思いますし、cssだけ少し変更されたため授業はありません。もし難しい部分があれば質問に残してください!

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

▲ ボーナス 例 01

▲ ボーナス例 02

▲ ボーナス例 03

▲ ボーナス例 04

▲ ボーナス例 05

▲ ボーナス例 06

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

PS. 実務で活用可能なボーナスUIは
講義はなく、サンプルコードのみです!

^{▲ キャンバスで円を描く - インタラクティブなサイトや
シンプルなドーナツチャートを作る際に便利です。}

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

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

^{▲ モーダルのガタつきは嫌:(
モーダルを開く際にスクロールバーを隠すときに発生するガタつきを解決!
どうやって実装するの??とても簡単なコードで学んでみましょう}

大したことではありませんが、以前就活生の方々、新入社員の方々、JavaScriptが苦手な方々のために作ったオープンソースをコミュニティに共有したオープンコードです😆(ワクワクした気持ちで作っていましたね)

上記のコードもInflearnの受講生の皆様のお役に立てればという願いを込めて、講義のサンプルファイルにボーナスUIとして添付しました😊 サンプルファイルをご覧いただくとbonus_uiフォルダにありますので、ぜひご活用ください😊

ボーナスUIには講義はありませんが、ご自身でログを出力したり、コードを変更したりしながら学習して使ってみてください。後で時間ができたらYouTubeを通じて無料講義としてアップする予定ですので、コード分析が難しい方は後でYouTubeを参考にしてください😊

💡 講義の特徴

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

2. jQueryで作成した部分をバニラJSに変更する授業を行います。
• jQueryとバニラJSのコードを学習して一石二鳥を狙いましょう。

3. 実務で使用するインタラクションを作るノウハウをそのままお伝えします。
• 皆さんの年収を急上昇させるインタラクションを作る方法を、とても〜詳細に説明いたします。

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

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

6. できるだけわかりやすく説明します。
• 私がプログラミングを初めて始めた時、理解できずにとても苦労しました。だから初心者の方々の悩みがわかるので...できるだけ理解しやすいようにコードを書き、わかりやすい言葉を選んで説明します。

7. 飽きないように制作しました。
• 途中で少しでも隙間ができると退屈になりがちですが、タイトな編集で休む暇なく説明します。一度に5分〜15分だけ集中してみてください!

8. コードの量を最大限減らすよう努力しました :)
• コードが長すぎると学習も難しく、習得にも時間がかかりますよね?できるだけ短く簡潔に作るよう努力しました。皆さんの時間は貴重ですから!

9. 要点のみを説明します。
• 皆さんの時間は貴重ですから!「詳しく知っていればより良いけれど...今すぐ知らなくても大丈夫」なものは思い切って除外しました。

10. 雑談を最小限にします。
• 皆さんの時間は貴重ですから!雑談や不要な説明は思い切って省きました。

11. サンプルコードのズームイン・アウト編集。
• サンプルコードのズームイン編集により、モバイル端末の画面でもコードが見やすくなりました。通学路、通勤路でも少しの時間を投資してみてください :D

💡 お知らせします

• JAVASCRIPT ES5文法とJQUERYを使用します。(バニラではes6も使用。)
• ただ真似して作って終わらせようとせず、まだ基礎が不足していて当面授業内容のすべてが理解できなくても、時間を長めに取ってコードを修正してみたり応用してみたりしながら、自分だけのコードにしてみるといいと思います。
• 時々初心者の方が質問を投稿されますが、プログラミングは最初は馴染みがなくても、ハングルのように繰り返し見ているうちに慣れてきて、気づかないうちにコードが目に入ってくるようになります!😊 もちろん初心者の方を考慮してコードに難しい文法を除外し、できるだけ簡単に作成しました
• 焦って少し見て終わらせようという考え、したがって作ってみて終わらせよう!という考えよりも、一歩ずつ理解しながら修正、応用して作ってみると、自分も知らないうちに必ず成長しているはずだと思います😊
• 初心者向けスクロールインタラクション第1編では、スクロールインタラクションの基礎をしっかり学べるように制作されました。ご自身のスキルが中級以上であれば、第2編をお待ちください 😆
• ご自身のスキルが中級レベルで、スクロールインタラクションのスキルを学ぶためにこの講座を受講される方に事前にお知らせします。この講座は初心者の方に役立つように説明されているため、スキルが中級以上の場合、講座の内容が非常に簡単に感じられる可能性があります
• この講義は初心者基準で説明されて制作されました。入門者の方はcssとhtmlの基礎がしっかりしていないと、スムーズに講義を進めることができません。
• html、css、javascriptの基礎がない場合は？？私の考えでは、とにかく真似してやってみるだけでも十分に学べると思います^^;;ただし、何度も繰り返し視聴して、コードを修正したりログを出力したりしながら、自分のコードにしていく必要がありますよね？？
• 一生懸命作ったソースコードを提供します 😊 (使用されたオープンソースライブラリ - jQuery)
• ガンコーディング YouTubeチャンネル(クリックして移動)でも様々なモーション、UIインタラクションを紹介しています。今後このチャンネルでは、初心者の方のための基本的な講義やお役立ちTips、最新IT情報、UI・モーションインタラクションなどをお届けする予定です。
• バニラ授業はセクション2からセクション6までのみ進行します。理由は、セクション7からセクション11に出てくるjqueryパターンはセクション2~6ですべて出てくるため重複する授業なので作成しませんでした。そんなことはないと思いますが、もし難しい部分があれば質問に残してください!追加で授業を作成してアップロードいたします。😊

💡 予想される質問 Q&A

Q. 授業内容の中で難しい部分は教えていただけますか?
もちろんお教えします 😊 質問と回答に投稿していただければ、1~5時間以内にメールが届きますので、確認後すぐに回答させていただいております。難しい点や気になる点は必ず理解してから進んでください!

Q. 非専攻者でも受講できますか?
A. 非専攻者でも、HTMLの基本、基本的なCSSのwidth、color、positionなどのプロパティさえ知っていれば、十分に活用できるように講義を作成しました。

Q. 実務ではjQueryは使用しないのですか?
A. 韓国で開発されているウェブサイトのほとんどはjQueryを使用して開発されており、現場でのメンテナンスやjQueryを使用するプロジェクトも多いです。また、Front-EndフレームワークであるReact、Vue JSでもjQueryを使用してDOMを操作することもあります。バニラJSに慣れていれば、jQueryはとても簡単なので、一緒に知っておくと現場で大いに役立つでしょう。😊

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

最初!

授業のサンプルコードを事前に準備しておき、講義動画と比較しながら学習してみましょう 講義で説明する変数、数式を理解しにくい場合は、一時停止ボタンを押してCONSOLE.LOGで確認してから進みましょう!

二番目!

セクション2から落ち着いて視聴しながら、スクロールインタラクションの原理について必ず理解しましょう! 講義を途中から見ている方がいらっしゃるようですが、スクロールインタラクション講義1編の授業内容はセクション2から11まで継続的に応用されて繰り返され、反復学習を通じて自然に原理を理解できるように制作しました。

三番目!

コードをテストする部分は完成されているサンプルコードを直接修正してみて、数式に関連する変数はログを出力してみながら個人的な時間を投資して必ず復習してみることをお勧めします!(もしログを出力する方法が分からなければ??お気軽にお問い合わせください!)

四つ目!知っておくと良いこと!

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

全体構造を把握し、実行順序を理解できるようになると、プログラムをカスタマイズしたり、エラーが発生した際にどの部分を先に修正・改善すべきかが正確に頭の中に描けるようになります!プログラムの全体構造を頭の中に描く習慣を身につければ、知らず知らずのうちにプログラム構造を作る上でのノウハウが生まれ始めるはずです😊