Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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) 54 đánh giá

1,176 học viên

  • coding11
Interactive Web
JavaScript

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

Dịch cái này sang tiếng Việt

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

Học viên

218

Đánh giá

210

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ả

54 đánh giá

4.9

54 đánh giá

  • hagora님의 프로필 이미지
    hagora

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    34% đã tham gia

    예전부터 이런 인터렉션이 너무 궁금했어요! 스크립트에 대한 기본 개념은 있지만, 막상 인터렉션을 작업해야 할 때면 어떻게 풀어나가야 할지 막막하고 답답했거든요 ㅠㅜ 근데 이 강의를 통해 답답했던 마음이 풀린 기분입니다!! (상쾌 ^^) 실무로도 사용 가능한 예제들로 꾸며져서 더 좋았고, 다른 작업에도 응용해보고 싶어요~! :) 다음 강의도 기다려집니다! 좋은 강의 감사합니다!

    • 코딩일레븐
      Giảng viên

      수강평 감사드립니다 :) 실무에도 바로 사용하실 수 있는 예제들로 준비했습니다. 제가 실제로 사용하는 코드들이기도 하고요. 도움이 되셨다니 다행입니다. 아직 초기라 수강평이 별로 없는데, 큰 힘이 됩니다 헛헛. 즐거운 하루 보내세요~

  • 티라미수님의 프로필 이미지
    티라미수

    Đánh giá 17

    Đánh giá trung bình 5.0

    5

    70% đã tham gia

    드디어 2탄이 나왔네요! 목차만 봐도 너무너무 재밌을 것 같아서 설레네요. 완강이 아쉬울 것 같은 느낌ㅠㅠ.. 아끼면서 보고싶네요ㅎㅎㅎ 제가 중요하게 생각하는 것이 기본기인데, 강사님의 수업방침과 일치해서 더 재밌게 느껴지는 것 같아요 : ) 인프런을 통해 갖고 계신 지식을 공유해주셔서 너무 감사드립니다. 항상 패럴렉스나 모션쪽은 어렵게만 느껴졌는데, 초급편과 중급편 강의를 들으면서 조금 친해졌네요 ㅎㅎ 강의 도중에 흘러간 말이지만 다음 강의는 canvas 랑 TweenMax 로 구성되어도 재밌을 것 같아요! 다음 강의도 기대하겠습니다! 꼭 올려주세요! 😆😆

    • 코딩일레븐
      Giảng viên

      오홋. 첫 수강평입니다. 정말 감사드립니다. 편한마음으로 즐기시면서 들으실 수 있는 강의라고 생각합니다. 닉네임처럼 올해 연봉올리기 성공하시기를 기원합니다!

  • Hyungjin님의 프로필 이미지
    Hyungjin

    Đánh giá 20

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    잘 수강했습니다! 강의 너무 좋아요 👍 처음에 기본적인 동작 개념을 먼저 알려주시고 이후 기능을 추가해 완성해 나아가는 강의 방식이랑 강의 마다 길지 않고 핵심적인 개념 위주로 알려주셔서 좋았습니다. 역량 강화편에는 더욱더 다양한 인터랙티브 웹 구현 테크닉들을 배워서 재밌게 수강했네요 😁

    • 공부하자님의 프로필 이미지
      공부하자

      Đánh giá 15

      Đánh giá trung bình 4.9

      4

      100% đã tham gia

      덕분에 좋은 공부 하고 갑니다. 별 5개 다 드리지 못해서 송구합니다. 사람마다 만족하는 부분이 있고, 아닌 부분이 있으니 저는 거의 다 만족했지만, 설명이 매끄럽지 못하고, 스르륵 넘어가는 부분이 좀 있어서 갠적으로 학습함에 있어서 불편한 점이 없지 않아 있었습니다. 그 외에는 바닐라 자바스크립트와 처음 접해보는 라이브러리 등을 알 수 있어서, 향후 공부하는 데 있어서 방향을 잡을 수 있어서 좋았습니다. 3d 입체 이런 것도 css, 자바스크립트 자체만으로도 다양한 효과를 주는 것이 가능하다는 사실을 알게된 이후로 뭔가 코드 뿐만 아니라 디자인적 사고에 있어서도 열린 느낌입니다. 여러모로 많은 도움을 받았고, 다음에도 유사한 강의가 나온다면 찾아 볼 것 같습니다. 감사하고 고마웠습니다

      • Carrie Choi님의 프로필 이미지
        Carrie Choi

        Đánh giá 17

        Đánh giá trung bình 5.0

        5

        55% đã tham gia

        쉽게 설명해주셔서 좋았고 다음 강의도 기다려집니다ㅎㅎ

        • 코딩일레븐
          Giảng viên

          수강평 감사드립니다~ 실무에 도움이 되셨으면 좋겠네요. 재미있는 게 생각나면 보너스 강의를 추가 하도록 하겠습니다. 즐거운 주말 보내세요~ ^^

      Ưu đãi có thời hạn, kết thúc sau 3 ngày ngày

      66.000 ₫

      25%

      1.850.631 ₫

      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!