강의

멘토링

커뮤니티

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) 11 đánh giá

158 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

  • ggangcoding162118
JavaScript
JavaScript
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
jQuery
jQuery
JavaScript
JavaScript
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
jQuery
jQuery

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

5.0

5.0

foxball

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

5.0

Glacier

100% đã tham gia

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

5.0

기쁜 도미

100% đã tham gia

đã sinh con.

Bạn sẽ nhận được điều này sau khi học.

  • 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,345

Học viên

79

Đánh giá

163

Trả lời

4.7

Xếp hạng

3

Các khóa học

Xin chào. Tôi là Kkang-coding, một người bắt đầu với vai trò nhà phát triển Backend nhưng đã chuyển sang Frontend và hiện đang rất say mê phát triển UI. :)

Tôi bắt đầu khóa học này để chia sẻ những bí quyết và kỹ thuật xây dựng UI/UX mà tôi đã tích lũy được trong hơn 10 năm qua khi thực hiện nhiều dự án website doanh nghiệp, trang thương mại điện tử SI và website cho các hộ kinh doanh nhỏ. Tôi đã từng tham gia vào nhiều dự án của các tập đoàn lớn tại Hàn Quốc, đồng thời cũng từng điều hành doanh nghiệp thiết kế website tập trung vào đối tượng hộ kinh doanh nhỏ.

Tôi thỉnh thoảng chia sẻ các tương tác của Apple và các tương tác sáng tạo mà tôi thực hiện như một sở thích trên các cộng đồng lập trình trong nước để giới thiệu những kỹ thuật thú vị, và đã nhận được sự quan tâm của rất nhiều người.

Tôi thỉnh thoảng vẫn chia sẻ các tương tác của Apple và các tương tác sáng tạo mà tôi làm vì sở thích trên các cộng đồng lập trình trong nước để giới thiệu những kỹ thuật thú vị.

Nhờ sự quan tâm của rất nhiều người mà tôi đã có cơ hội tạo ra khóa học này.

Khóa học mà tôi xây dựng sẽ hướng dẫn các bạn cách tạo ra những hiệu ứng tương tác và đồ họa chuyển động đa dạng, tuyệt vời, khiến người xem phải trầm trồ, đồng thời đảm bảo tính tương thích với các trình duyệt tiêu chuẩn và có thể áp dụng trực tiếp vào thực tế. Ngoài ra, tôi cũng dự định tạo ra các khóa học giúp các nhà phát triển Frontend hoặc Web Publisher có thể tự tay xây dựng trang chủ, trang thương mại điện tử... từ con số không bằng cách sử dụng các giải pháp công nghệ.

Hẹn gặp lại các bạn trong bài học nhé :)

Hẹn gặp lại bạn trong khóa học nhé :)

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ả

11 đánh giá

5.0

11 đá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ị :)

499.630 ₫

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!