웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT
깡코딩
웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!
초급
인터랙티브 웹, JavaScript, HTML/CSS
Tạo các hiệu ứng hình ảnh khác nhau một cách nhanh chóng và dễ dàng!
Bằng cách sử dụng JavaScript và CSS, chúng tôi tạo ra các hiệu ứng hình ảnh gồm nhiều mẫu khác nhau để hoàn thiện các mảnh hình ảnh rải rác thành một hình ảnh duy nhất và xử lý chúng để xuất hiện ngẫu nhiên. Tôi nghĩ rằng nếu bạn áp dụng lớp này, bạn sẽ có thể tạo ra các hiệu ứng ban đầu của riêng mình!
(5.0) 9 đánh giá
156 học viên
3시간 만에 완강할 수 있는 강의 ⏰
JavaScript
HTML/CSS
Interactive Web
jQuery
Đánh giá từ những học viên đầu tiên
Dịch cái này sang tiếng Việt
Chúng tôi sẽ triển khai các hiệu ứng hình ảnh khác nhau bằng JavaScript và CSS, nhóm các hiệu ứng đã triển khai thành một, xử lý chúng để xuất hiện ngẫu nhiên, tạo chức năng và áp dụng nó vào giao diện người dùng để tạo ra các tương tác có tính tương tác cao.
Phát triển các hiệu ứng trong đó các hình ảnh rải rác kết hợp với nhau để tạo thành một hình ảnh
Tạo một trang web với giao diện người dùng độc đáo
Tạo hiệu ứng hình ảnh dễ dàng và nhanh chóng và áp dụng chúng theo nhiều cách khác nhau!
Xem trước bài giảng
▲ Bạn có thể xem nội dung lớp học chi tiết hơn bằng cách xem video.
💡 Giới thiệu khóa học
Bài học số 1
Hãy tạo hiệu ứng trong đó các hình ảnh phân tán được thực hiện tuần tự để tạo thành một hình ảnh duy nhất .
▲ Các hiệu ứng chạy tuần tự
Bài học số 2
Tạo hiệu ứng hình ảnh đa dạng và miễn phí hơn bằng cách thay đổi các thuộc tính cho phù hợp với sở thích của nhà phát triển.
▲ Hiệu ứng tùy chỉnh
Bài học số 3
Hãy thêm hiệu ứng 3D để làm cho nó trông ba chiều hơn một chút .
▲ Áp dụng hiệu ứng 3D
Bài học số 4
Hãy tạo ra một thanh trượt tuyệt đẹp và hấp dẫn hơn bằng cách kết hợp tất cả các hiệu ứng được triển khai ở trên thành một và làm cho chúng xuất hiện ngẫu nhiên , đồng thời áp dụng các hiệu ứng này vào thanh trượt slick nguồn mở để nhiều hiệu ứng khác nhau được hiển thị ngẫu nhiên khi thanh trượt trượt.
▲ Áp dụng hiệu ứng cho thanh trượt
MẸO. Cách áp dụng hiệu ứng hình ảnh theo nhiều cách khác nhau!
Nếu bạn áp dụng hiệu ứng hình ảnh cho các tương tác cuộn, bạn thậm chí có thể triển khai các hiệu ứng UI cuộn xuất hiện ngẫu nhiên khi cuộn.
※ Bài giảng này không bao gồm lớp học về cách tạo UI cuộn.
▶Đi đến Bài giảng tương tác cuộn
💡 Tính năng của khóa học
- Tạo ra nhiều hiệu ứng hình ảnh khác nhau có thể sử dụng trong thực tế.
- Tạo khoảng 15 hiệu ứng với các sửa đổi nhanh chóng và đơn giản.
Tôi nghĩ bạn có thể tạo ra hơn 100 hiệu ứng khác nhau nếu bạn thêm ý tưởng của riêng mình và áp dụng chúng :D - Tôi đã cố gắng giảm lượng mã càng nhiều càng tốt .
Nếu code quá dài thì sẽ khó học và mất nhiều thời gian để thành thạo, đúng không? Tôi đã cố gắng viết code ngắn gọn và súc tích nhất có thể. - Giảm thiểu nói chuyện phiếm.
Vì thời gian của bạn rất quý báu! Chúng tôi đã mạnh dạn loại bỏ những lời giải thích không cần thiết, những câu chuyện phiếm, v.v. - Chỉnh sửa mã mẫu phóng to/thu nhỏ
Phóng to mã ví dụ giúp bạn dễ hiểu hơn ngay cả trên thiết bị di động. Hãy dành chút thời gian khám phá mã này trên đường đi học hoặc đi làm nhé! :D
💡 Vui lòng thông báo
Ngôn ngữ và thư viện được sử dụng
- CSS, JavaScript, jQuery
Khả năng tương thích giữa các trình duyệt
- Có thể có một số khác biệt nhỏ tùy thuộc vào hệ thống và trình duyệt của bạn.
Độ khó của lớp học
- Bạn nên có hiểu biết cơ bản về CSS và JavaScript để theo học khóa học một cách suôn sẻ. (Trình độ mới bắt đầu hoặc cao hơn)
Hãy thử xem!
- Bằng cách áp dụng nội dung khóa học, học viên sẽ có thể tạo ra những hiệu ứng độc đáo của riêng mình.
💡 Câu hỏi dự kiến Hỏi & Đáp
H. Sinh viên không chuyên ngành cũng có thể tham gia khóa học này không?
A. Bất kể bạn có chuyên ngành hay không, nếu bạn biết những kiến thức cơ bản về CSS và JavaScript, bạn có thể học và sử dụng chúng một cách hiệu quả.
💡 Cùng xem lại bài giảng trước nhé
Tương tác Apple Scroll mà ngay cả người mới bắt đầu cũng có thể tạo. Phần 1: JavaScript
Tìm hiểu các hiệu ứng chuyển động khác nhau cần thiết cho tương tác cuộn.
Tìm hiểu các hiệu ứng chuyển động khác nhau cần thiết cho tương tác cuộn.
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Những người quan tâm đến UI/UX
Những người quan tâm đến hiệu ứng chuyển động
Những người quan tâm đến các trang web sáng tạo và độc đáo
Người tìm việc muốn tạo một danh mục đầu tư đặc biệt
Nhà thiết kế nhưng quan tâm đến sự tương tác
Những người muốn tăng lương bằng cách bổ sung thêm kỹ năng tương tác!
Cần biết trước khi bắt đầu?
HTML, CSS, JavaScript
1,330
Học viên
71
Đánh giá
163
Trả lời
4.7
Xếp hạng
3
Các khóa học
안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)
10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.
저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요
많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.
제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.
그럼 수업에서 뵙겠습니다 :)
Chương trình giảng dạy
Tất cả
11 bài giảng ∙ (1giờ 41phút)
Tài liệu khóa học:
Tài liệu bài giảng
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
9 đánh giá
5.0
9 đánh giá
foxballĐánh giá 32
∙
Đánh giá trung bình 4.8
5
64% đã tham gia선생님 swiper.js 에서도 적용하는방법좀 알려주세요 한참해매고 있습니다. ㅠㅠ
- 깡코딩Giảng viên
안녕하세요 소중한 수강평 감사합니다. :) 스와이퍼 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 콜백 함수를 사용하면 됩니다. :)
508.201 ₫
Khóa học khác của ggangcoding162118
Hãy khám phá các khóa học khác của giảng viên!
Khóa học tương tự
Khám phá các khóa học khác trong cùng lĩnh vực!
![[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)
