Webゲームを作って学ぶインタラクティブWeb！ JAVASCRIPT
ggangcoding162118
Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！
Basic
Interactive Web, JavaScript, HTML/CSS
簡単かつ迅速に作る様々なイメージエフェクト！
JavaScriptとCSSで散らばった画像を1つの画像に仕上げるさまざまなパターンの画像エフェクトに沿って作成し、ランダムに表示されるように処理します。
（5.0）受講レビュー 11件
受講生 158名
難易度 初級
受講期間 無制限
JavaScript
JavaScript
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
jQuery
jQuery
JavaScript
JavaScript
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
jQuery
jQuery
学習した受講者のレビュー
学習した受講者のレビュー
5.0
5.0
foxball
64% 受講後に作成
先生swiper.jsでも適用する方法を教えてください。 ㅠㅠ
5.0
Glacier
100% 受講後に作成
簡単に応用できる講義でした。
5.0
기쁜 도미
100% 受講後に作成
生まれました。
受講後に得られること
JavaScriptとCSSを活用してさまざまなイメージエフェクトを実装し、実装したエフェクトをひとつにまとめてランダムに表示されるように処理、関数にしてUIに適用させ、没入度の高いインタラクションを作成します。
散らばったイメージが一箇所に集まって一つのイメージを成すエフェクトの開発
UIがユニークなウェブサイト制作
簡単で迅速なイメージエフェクトを作成し、さまざまなアプリケーションを試してみてください！
講義プレビュー
▲映像で確認すると、授業内容をより詳しく見ることができます。
💡講義の紹介
クラスポイント1
散在していた画像が順次実行されながら、一つの画像を成す効果を作ってみます。
▲順次実行されるエフェクト
クラスポイント2
開発者の好みに合わせて属性を変更して、より多様で自由なイメージエフェクトを作成します。
▲カスタムエフェクト
クラスポイント3
3Dエフェクトを追加して、もう少し立体的なエフェクトを作成します。
▲3D効果適用
クラスポイント4
上記で実装したすべてのエフェクトをひとつにまとめてランダムに表示されるようにし、オープンソーススリックスライダーにエフェクトを適用してスライドするときに、さまざまなエフェクトがランダムに露出されるようにすることで、より華やかで没入度の高いスライダーを作ってみます。
▲スライダーにエフェクトを適用
TIP。イメージエフェクトを幅広く応用する方法！
スクロールインタラクションにイメージエフェクトを適用してみると、スクロールに応答してランダムに表示されるスクロールUIエフェクトまで実装できます。
※スクロールUIを作成する授業は、該当講義には含まれていません。
💡川の特徴
- 実務で使用できるさまざまなイメージエフェクトを作成します。
- 素早く簡単な修正で約15個のエフェクトを作成します。
皆さんだけのアイデアを加えて応用してみると、100個以上の多様なエフェクトも作れると思います。 - コードの量をできるだけ減らそうとしました。
コードが長すぎると学ぶのが難しくて習得するのに時間がかかりますよね？できるだけ短く簡潔にしようとしました。 - 雑談を最小限に抑えます。
皆さんの時間は大切ですから！不要な説明、雑談などは思い切ってしまいました。 - サンプルコードズームイン/ズームアウト編集
サンプルコードズームイン編集で、モバイルデバイスでもコードを簡単に確認できました。登校道、出勤道に少しずつ時間を投資してみてください：D
💡お知らせします
使用した言語とライブラリ
- CSS、JavaScript（JavaScript）、jQuery（ジェイクエリ）
クロスブラウジング
- システムとブラウザによっては若干の違いがある場合があります。
授業難易度
- CSSとJavaScriptの基本が必要なので、スムーズに講義を進めることができます。 (初級以上)
応用してみてください！
- 授業内容を応用すれば、受講生の皆さんだけの独創的なエフェクトを作ることができます。
💡予想質問Q&A
Q. 非専攻者も聞くことができますか？
A. 専攻者/非専攻者にかかわらず、CSS、JavaScriptの基本を知っていれば十分に学習して活用できます。
💡過去の講義を一緒に見る
初心者でも作れるアップルスクロールインタラクション。 1本JavaScript
スクロールインタラクションに必要なさまざまなモーションエフェクトを学びましょう。
スクロールインタラクションに必要なさまざまなモーションエフェクトを学びましょう。
こんな方に
おすすめです
学習対象は
誰でしょう？
UI/UXに興味のある方
モーションエフェクトに興味のある方
クリエイティブで個性の強いホームページに興味を持つ多くの人
特別なポートフォリオを作りたい就労生の方々
デザイナーだがインタラクションに興味のある方
インタラクションスキルを追加して年俸上げたい方々！
前提知識、
必要でしょうか？
HTML、CSS、JavaScript
1,345
受講生
79
受講レビュー
163
回答
4.7
講座評価
3
講座
こんにちは。バックエンドエンジニアからスタートし、フロントエンドエンジニアに転向してUI開発に夢中になっているカンコーディング（Kkang-Coding）です。 :)
10年余りの間、多数の企業サイトやショッピングモール、SI、小規模事業者向けのホームページ制作を通じて培ってきたUI/UX制作技法のノウハウなどを共有するために、この講義を始めることになりました。国内の様々な大企業のプロジェクトを経験し、小規模事業者に焦点を当てたホームページ制作事業も行ってきました。
私は時折、国内のコーディング関連コミュニティで、趣味で作ったApple風のインタラクションや創作インタラクションを共有し、面白い技術を紹介してきました。
多くの方々に関心を持っていただき、このように講義まで作ることになりました。
私が制作していく講座では、標準ブラウザを考慮し、実務で使用可能な、思わず感嘆の声が漏れるような多様で素晴らしいインタラクションやモーショングラフィックスの制作方法をお教えする予定です。また、フロントエンド開発者やウェブパブリッシャーがソリューションを利用して、ホームページやショッピングモールなどをゼロから構築できる講座も制作する予定です。
それでは授業で お会いしましょう :)
カリキュラム
全体
11件 ∙ (1時間 41分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
11件
5.0
11件の受講レビュー
kbba785883受講レビュー 33
∙
平均評価 4.8
5
64% 受講後に作成先生swiper.jsでも適用する方法を教えてください。 ㅠㅠ
- ggangcoding162118知識共有者
こんにちは大切な受講評ありがとうございます。 :) スワイパーjsに適用するときも同じです〜！ const swiper = new Swiper('.swiper-container', { effect: 'fade', speed: 0, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on: { slideChange: function () { var thisSlide = $('.swiper-container').find('.swiper-slide').eq(this.activeIndex); ggangImgEffect（thisSlide、this.activeIndex）; } } }）; このように、スライドが変更されたときに呼び出されるslideChangeコールバック関数を使用できます。 :)
- glaciershard2755
受講レビュー 3
∙
平均評価 5.0
- rje2875734264
受講レビュー 3
∙
平均評価 5.0
- ejjung3127219
受講レビュー 13
∙
平均評価 4.9
- sprout0719002828
受講レビュー 6
∙
平均評価 4.7
5
100% 受講後に作成短い時間であっても、蜂蜜のヒントがあふれるあまりにも良い講義です！いろいろ活用します：D
- ggangcoding162118知識共有者
こんにちは！ヒントをいろいろ活用できればもっと嬉しいことはないようですね:) 大切な受講評ありがとうございます:)
￥2,968
ggangcoding162118の他の講座
知識共有者の他の講座を見てみましょう！
![[幻想的な足足]デザインからコーディングまでCourse Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
