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!
156 học viên
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.
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
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ả.
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,333
Học viên
72
Đánh giá
163
Trả lời
4.7
Xếp hạng
3
Các khóa học
안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)
10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.
저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요
많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.
제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.
그럼 수업에서 뵙겠습니다 :)
Tất cả
11 bài giảng ∙ (1giờ 41phút)
Tài liệu khóa học:
Tất cả
9 đánh giá
5.0
9 đánh giá
Đánh giá 33
∙
Đánh giá trung bình 4.8
5
Thưa ông, xin vui lòng cho tôi biết cách áp dụng nó cho Swiper.js. Tôi đang loay hoay một thời gian. ㅠㅠ
Xin chào, cảm ơn bạn đã đánh giá có giá trị của bạn. :) Khi áp dụng vào Swiper js cũng vậy! const Swiper = new Swiper('.swiper-container', { hiệu ứng: 'mờ dần', tốc độ: 0, điều hướng: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, TRÊN: { slideChange: hàm () { var thisSlide = $('.swiper-container').find('.swiper-slide').eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); } } }); Bằng cách này, bạn có thể sử dụng chức năng gọi lại slideChange được gọi khi slide thay đổi. :)
Đánh giá 3
∙
Đánh giá trung bình 5.0
5
Đó là một bài giảng ngắn gọn mà tôi có thể áp dụng.
Xin chào :) Cảm ơn bạn đã đánh giá có giá trị của bạn.
Đánh giá 3
∙
Đánh giá trung bình 5.0
Đánh giá 13
∙
Đánh giá trung bình 4.9
5
Tốt, đây thực sự là một bài giảng hay.
Xin chào :) Cảm ơn đánh giá có giá trị của bạn :D
Đánh giá 6
∙
Đánh giá trung bình 4.7
5
Đó là một bài giảng tuyệt vời với đầy đủ những lời khuyên hữu ích mặc dù nó ngắn! Tôi sẽ sử dụng nó theo nhiều cách khác nhau: D
Xin chào! Tôi sẽ rất vui nếu tôi có thể sử dụng các mẹo này theo nhiều cách khác nhau :) Cảm ơn bạn đã đánh giá có giá trị :)
507.142 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!
![[2024]Thực hành HTML cơ bản của LivehayanHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/334082/cover/faaaa70e-cae8-4488-afb0-5a2d4e7c0905/334082.png?f=avif&w=420)
![[Khóa học toàn diện về phát triển web] Từ những điều cơ bản về JavaScript thuần túy đến đào tạo thực tếHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/330076/cover/e46f4bde-0146-42d6-a2fa-64d9bd510d27/vanila-javascript-1)
![[Chân lợn ảo] Từ thiết kế đến viết mãHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![Chức năng phát triển thiết kế web [2025] Toàn bộ thực hành (có thể hỏi qua KakaoTalk)Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[Tiêu chuẩn ra đề năm 2025] Hướng dẫn hoàn hảo về bài thi thực hành chức năng thiết kế webHình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
