강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Kết thúc thực hành phát triển tương tác [Xây dựng năng lực]

Chúng tôi hào phóng tiết lộ bí quyết về JS và CSS tương tác được sử dụng trong thực tế.

(4.9) 56 đánh giá

1,184 học viên

  • coding11
Interactive Web
JavaScript

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

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

  • Bí quyết phát triển tương tác Vanilla JS

  • CSS 3D, hoạt hình, biến đổi, chuyển tiếp

  • Cách sử dụng TweenMax để làm việc hiệu quả hơn

  • StageResize, tương tác đáp ứng

  • Sử dụng Mobile Touch và định hướng

Tương tác web dễ dàng hơn + sáng tạo hơn! 💎

UX hợp thời trang được tạo ra bằng chính đôi tay của tôi.

Để triển khai UX hợp thời trang ngoài việc triển khai dịch vụ đơn giản, các nguyên tắc cơ bản vững chắc là quan trọng nhất. Bạn có thể triển khai UX thời thượng của các trang web nổi tiếng ở nước ngoài chỉ bằng cách sử dụng JavaScript thuần túy (Vanilla JS) mà không cần dựa vào khung hoặc plugin cụ thể.

Từ chuyển động ưa thích bằng cách sử dụng TweenMax cho đến các sự kiện cuộn, khả năng phản hồi và cảm ứng trên thiết bị di động, chúng tôi đã tích lũy được 15 năm bí quyết phát triển tương tác. (Ngắn và đậm!)

 

 


Có ai có thể phát triển tương tác không?

chuyển động web tương tác ,
Bạn có thể tự mình làm tốt được không?

“Các nhà thiết kế và lập kế hoạch muốn có những hiệu ứng khó...”
“Tôi có ý tưởng nhưng việc thực hiện lại khó khăn”
“Tôi đã học JavaScript nhưng tôi không thể sử dụng nó.”
“Tôi có thể sao chép và dán, nhưng tôi không thể áp dụng nó.”
“Tôi muốn phá bỏ rào cản trở thành nhà xuất bản và tăng lương.”

Tôi cũng là sinh viên chuyên ngành thiết kế với chuyên ngành phi phát triển. Không phải là tôi thiếu những điều cơ bản; tôi đã bắt đầu phát triển mà không có bất kỳ điều cơ bản nào cả. Tôi đã từng trải qua những trải nghiệm vô cùng khó khăn nên tôi biết rất rõ khó khăn là gì và mình mắc kẹt ở đâu. Vào thời điểm đó, tôi tạo ra khóa học này với suy nghĩ 'Thật tuyệt nếu có một khóa học như thế này'.

  • Chúng tôi sẽ dạy bạn bí quyết để dễ dàng giải quyết những tình huống khó khăn mà bạn có thể gặp phải tại nơi làm việc.
  • Trở thành nhà phát triển sáng tạo dựa trên các nguyên tắc cơ bản vững chắc và tăng lương của bạn!
Danh mục mẫu 1 (Xem)
Danh mục mẫu 2 (Xem)
Video bài giảng bên ngoài

Tính năng bài giảng

Gần với công việc thực tế
Ví dụ thực tế

Nguyên tắc cơ bản tương tác
Giải thích bằng mã ngắn gọn

Thay vì lý thuyết nhàm chán
Đi thẳng vào hành động

Nguồn được cung cấp!
Cùng xem lớp


Cảm nhận những gì bạn sẽ học

Phần. 1

  • Sử dụng các khái niệm cơ bản về JavaScript như biến, ngẫu nhiên, câu lệnh if, bộ tính giờ, v.v.
  • Một số trò chơi cực kỳ đơn giản để thực hiện

Phần. 2

  • Tìm hiểu các khái niệm phân trang, điều này rất quan trọng khi tạo các sản phẩm tương tác.
  • Tạo các trang hoàn toàn khác nhau bằng cách thay đổi kiểu trong cùng một tập lệnh
  • Triển khai chức năng vuốt bằng sự kiện chạm trên thiết bị di động

Phần. 3

  • Tạo trang Coding Eleven chứa đầy các ngôi sao
  • Hiệu ứng thị sai đơn giản sử dụng hình ảnh hai ngôi sao
  • Chuyển động màn hình mượt mà bằng cách sử dụng plugin TweenMax và ScrollTo
  • So sánh với phiên bản được triển khai bằng JavaScript thuần túy không có plugin

Phần. 4

  • Giải thích đầy đủ về cách sử dụng TweenMax
  • Cần sử dụng stageResize cho các trang phản hồi
  • Chuyển động thẻ ngẫu nhiên ba chiều sử dụng Twin Max

Phần. 5

  • Ứng dụng của script phân trang đã học ở trên
  • Sản xuất chuyển động ngẫu nhiên TweenMax cho nhiều mục đích sử dụng khác nhau

Phần. 6

  • thẻ lập thể 3D
  • Biểu thức ba chiều sử dụng thuộc tính Transform và TranslateZ
  • Tương tác bằng cách sử dụng độ nghiêng di động


Click để xem trực tiếp trên web


 

Đánh giá trung bình 4,9
Bài giảng mới của Coding Eleven.

Cảm ơn!
Cảm ơn bạn vì những ý kiến ​​khác nhau mà bạn đã để lại trong bài đánh giá khóa học của mình.
Điều này đã được phản ánh trong bài giảng này.

Đi tới các bài giảng trước

Kỹ năng tương tác có thể được sử dụng ngay trong thực tế!

Câu hỏi thường gặp

Q. Người không chuyên có thể tham gia khóa học này không?

Mình cũng không chuyên ngành ^^ Chỉ cần quan tâm đến phát triển tương tác là đủ.

Q. Tôi có cần chuẩn bị gì trước khi tham gia bài giảng không?

Thật dễ dàng để nghe nếu bạn biết những điều cơ bản về HTML và CSS. (Bao gồm mã CSS đầy đủ ^^)

H. Tôi không biết nhiều về JavaScript. Có được không?

Chúng ta bắt đầu với các khái niệm cơ bản như biến, mảng và hàm.
Nếu bạn không biết gì trong quá trình này, vui lòng đặt câu hỏi qua bảng câu hỏi!

Hãy tham khảo trước khi tham gia khóa học!

  • Vui lòng tham khảo 'ghi chú lớp học' ở cuối video. Mình đã giải thích những phần còn thiếu trong video.
  • Sử dụng tập lệnh ECMA 2015 (ES6).
  • Mã hoàn thành được cung cấp . Vui lòng tải file từ Phần 0 - Bài 3.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người tìm việc, nhà thiết kế, nhà xuất bản, nhà phát triển phía trước

  • Những người muốn phát triển sáng tạo như các trang nước ngoài

  • Những người sao chép và dán JS nhưng gặp khó khăn khi áp dụng nó

  • Những người muốn thêm cảm xúc vào việc thực hiện các chức năng đơn giản

Cần biết trước khi bắt đầu?

  • Kiến thức cơ bản về HTML, CSS

Xin chào
Đây là

3,329

Học viên

227

Đánh giá

213

Trả lời

4.6

Xếp hạng

3

Các khóa học

15년 이상 여러 기업과 언론사에서 front-end 개발 및

데이터 시각화, 인터랙티브 사이트 제작을 했습니다.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!

Chương trình giảng dạy

Tất cả

47 bài giảng ∙ (5giờ 33phú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ả

56 đánh giá

4.9

56 đánh giá

  • hyejin28160786님의 프로필 이미지
    hyejin28160786

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    34% đã tham gia

    Tôi thực sự tò mò về kiểu tương tác này từ lâu rồi! Tôi có khái niệm cơ bản về viết kịch bản, nhưng khi thực sự phải làm việc về tương tác, tôi bối rối và thất vọng không biết làm thế nào để giải quyết nó. Nhưng tôi cảm thấy sự thất vọng của mình đã được giải tỏa qua bài giảng này!! (Làm mới ^^) Tôi thậm chí còn thích nó hơn vì nó được trang trí bằng các ví dụ thực tế và tôi cũng muốn áp dụng nó vào các công việc khác! :) Tôi rất mong chờ bài giảng tiếp theo! Cảm ơn bạn vì bài giảng tuyệt vời!

    • coding11
      Giảng viên

      Cảm ơn bạn đã đánh giá :) Chúng tôi đã chuẩn bị sẵn các ví dụ có thể sử dụng ngay trong thực tế. Đây cũng là những mã mà tôi thực sự sử dụng. Tôi rất vui vì bạn thấy nó hữu ích. Vẫn còn sớm nên chưa có nhiều đánh giá, nhưng nó giúp ích rất nhiều. Chúc một ngày tốt lành~

  • salary999님의 프로필 이미지
    salary999

    Đánh giá 19

    Đánh giá trung bình 5.0

    5

    70% đã tham gia

    Phần 2 cuối cùng đã ra mắt! Chỉ nhìn vào mục lục thôi cũng thấy phấn khích vì có vẻ sẽ rất vui. Tôi cảm thấy thật tiếc khi hoàn thành khóa học ㅠㅠ.. Tôi nhớ bạn khi xem nó hahaha Điều tôi nghĩ quan trọng là những điều cơ bản và tôi nghĩ nó thú vị hơn vì nó phù hợp với chính sách lớp học của người hướng dẫn :) Cảm ơn bạn rất nhiều vì đã chia sẻ kiến ​​thức của mình thông qua Infron. Tôi luôn cảm thấy thị sai và chuyển động rất khó, nhưng sau khi tham gia các bài giảng dành cho người mới bắt đầu và trung cấp, tôi đã quen hơn một chút với chúng haha. Đây là một nhận xét được đưa ra trong một bài giảng, nhưng tôi nghĩ bài giảng tiếp theo sẽ rất thú vị ngay cả khi nó bao gồm canvas và TweenMax! Tôi đang mong chờ bài giảng tiếp theo! Hãy tải nó lên! 😆😆

    • coding11
      Giảng viên

      Ồ không. Đây là bài đánh giá khóa học đầu tiên của tôi. Cảm ơn bạn rất nhiều. Tôi nghĩ đây là một bài giảng mà bạn có thể nghe và thưởng thức một cách thoải mái. Giống như biệt danh của bạn, tôi hy vọng bạn thành công trong việc tăng lương trong năm nay!

  • hjux님의 프로필 이미지
    hjux

    Đánh giá 21

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Làm tốt! Tôi rất thích bài giảng 👍 Đầu tiên, hãy cho tôi biết khái niệm cơ bản về chuyển động. Sau đó, phương pháp bài giảng được hoàn thiện bằng cách bổ sung thêm các chức năng và Tôi thích rằng mỗi bài giảng không quá dài và tập trung vào các khái niệm chính. Tôi rất vui khi tham gia khóa học vì ngày càng học được nhiều kỹ thuật triển khai web tương tác hơn trong phần xây dựng năng lực 😁

    • stu님의 프로필 이미지
      stu

      Đánh giá 15

      Đánh giá trung bình 4.9

      4

      100% đã tham gia

      Nhờ có bạn mà tôi đã có thời gian học tập vui vẻ. Tôi xin lỗi tôi không thể cho bạn tất cả 5 sao. Có phần mọi người hài lòng và có phần không, nên hầu hết mọi thứ tôi đều hài lòng, nhưng phần giải thích chưa được trôi chảy và có một số phần bị bỏ qua nên có một số bất tiện trong quá trình học. Ngoài ra, thật tốt khi có thể tìm hiểu về JavaScript thuần và các thư viện mà tôi chưa từng gặp trước đây, điều này đã giúp tôi định hướng cho các nghiên cứu trong tương lai của mình. Kể từ khi biết rằng có thể tạo hiệu ứng lập thể 3D chỉ bằng CSS và JavaScript, tôi cảm thấy cởi mở hơn không chỉ với mã mà còn với tư duy thiết kế. Tôi đã nhận được rất nhiều sự giúp đỡ về nhiều mặt và tôi nghĩ tôi sẽ tìm kiếm những bài giảng tương tự trong tương lai. Tôi rất biết ơn và biết ơn.

      • carrrie437227님의 프로필 이미지
        carrrie437227

        Đánh giá 17

        Đánh giá trung bình 5.0

        5

        55% đã tham gia

        Tôi thích cách bạn giải thích nó một cách dễ dàng và tôi rất mong chờ bài giảng tiếp theo.

        • coding11
          Giảng viên

          Cảm ơn bạn đã đánh giá, tôi hy vọng nó sẽ giúp ích cho bạn trong công việc thực tế. Nếu tôi nghĩ ra điều gì thú vị, tôi sẽ thêm một bài giảng bổ sung. Chúc bạn cuối tuần vui vẻ nhé~ ^^

      1.851.685 ₫

      Khóa học khác của coding11

      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!