웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
깡코딩
웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!
초급
인터랙티브 웹, JavaScript, HTML/CSS
簡単かつ迅速に作る様々なイメージエフェクト！
JavaScriptとCSSで散らばった画像を1つの画像に仕上げるさまざまなパターンの画像エフェクトに沿って作成し、ランダムに表示されるように処理します。
学習した受講者のレビュー
こんなことが学べます
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,330
受講生
71
受講レビュー
163
回答
4.7
講座評価
3
講座
안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)
10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.
저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요
많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.
제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.
그럼 수업에서 뵙겠습니다 :)
カリキュラム
全体
11件 ∙ (1時間 41分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
9件
5.0
9件の受講レビュー
foxball受講レビュー 32
∙
平均評価 4.8
5
64% 受講後に作成선생님 swiper.js 에서도 적용하는방법좀 알려주세요 한참해매고 있습니다. ㅠㅠ
- 깡코딩知識共有者
안녕하세요 소중한 수강평 감사합니다. :) 스와이퍼 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 콜백 함수를 사용하면 됩니다. :)
￥2,844
ggangcoding162118の他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기강의 썸네일](https://cdn.inflearn.com/public/courses/335863/cover/836195ea-22e0-4a97-84a9-5c520b028729/335863.png?f=avif&w=420)
![[환상의족발] 디자인부터 코딩까지강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
