강의

멘토링

커뮤니티

Programming

/

Front-end

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

  • ggangcoding162118
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

  1. Tạo ra nhiều hiệu ứng hình ảnh khác nhau có thể sử dụng trong thực tế.
  2. 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
  3. 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ể.
  4. 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.
  5. 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.

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

Xin chào
Đây là

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 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.

 

저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요

많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.

 

제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.

 

그럼 수업에서 뵙겠습니다 :)

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á

  • kbba785883님의 프로필 이미지
    kbba785883

    Đánh giá 33

    Đánh giá trung bình 4.8

    5

    64% đã tham gia

    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. ㅠㅠ

    • ggangcoding162118
      Giảng viên

      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. :)

  • glaciershard2755님의 프로필 이미지
    glaciershard2755

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Đó là một bài giảng ngắn gọn mà tôi có thể áp dụng.

    • ggangcoding162118
      Giảng viên

      Xin chào :) Cảm ơn bạn đã đánh giá có giá trị của bạn.

  • rje2875734264님의 프로필 이미지
    rje2875734264

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    đã sinh con.

  • ejjung3127219님의 프로필 이미지
    ejjung3127219

    Đánh giá 13

    Đánh giá trung bình 4.9

    5

    100% đã tham gia

    Tốt, đây thực sự là một bài giảng hay.

    • ggangcoding162118
      Giảng viên

      Xin chào :) Cảm ơn đánh giá có giá trị của bạn :D

  • sprout0719002828님의 프로필 이미지
    sprout0719002828

    Đánh giá 6

    Đánh giá trung bình 4.7

    5

    100% đã tham gia

    Đó 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

    • ggangcoding162118
      Giảng viên

      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 ₫

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!