웹 애니메이션의 새로운 표준, Web Animations API
1분코딩
라이브러리는 선택이지만, 웹 표준 기술은 필수입니다. 웹 애니메이션의 새로운 표준인 Web Animation API에 남들보다 빠르게 적응하고, 실무에도 바로 활용해보세요!
Basic
Web Animations API, JavaScript, HTML/CSS
BEST
Bản sao tương tác trang web của Apple!
Bạn có thể tìm hiểu cách phát triển các hiệu ứng tương tác nâng cao thường xuất hiện trên trang web của Apple từ đầu.
Đánh giá từ những học viên đầu tiên
Dịch cái này sang tiếng Việt
Các kỹ thuật tương tác nâng cao thường được sử dụng trên các trang web của Apple
Tương tác video độ phân giải cao
Kiểm soát khung hình chính và phần tử bằng cách cuộn
Cách sử dụng canvas để xử lý ảnh có độ phân giải cao
Tương tác web tuyệt vời như trang giới thiệu sản phẩm của Apple ,
Bạn có muốn thử tự tay phát triển nó không? 🍎
Trang sản phẩm của Apple
Tự mình thực hiện các nguyên tắc cốt lõi 🏰
Các trang giới thiệu sản phẩm của Apple có đôi chút khác biệt về thiết kế và hiệu ứng, nhưng các nguyên tắc tương tác cốt lõi của chúng thì tương tự nhau. Khóa học này khám phá và xây dựng các nguyên tắc tương tác cốt lõi áp dụng trên các trang sản phẩm của Apple , sử dụng thao tác cuộn chính xác để điều khiển các yếu tố thiết kế khác nhau . Bằng cách sử dụng các hiệu ứng được áp dụng, chúng ta sẽ tạo ra các trang hoàn chỉnh, được kết nối một cách tự nhiên .
Trang giới thiệu Macbook Pro (nhấp vào) 
Trang giới thiệu Airpods Pro (nhấp vào)
Ngày nay, mỗi khi Apple ra mắt một sản phẩm mới, việc lướt qua cũng rất thú vị, nhưng cũng không thiếu sự mong đợi về việc trang giới thiệu sản phẩm sẽ tuyệt vời đến mức nào. Tôi chắc rằng mọi người trên mạng đều đang thích thú với điều đó, phải không?
Từ kinh nghiệm thực hiện của riêng tôi
Tạo ra thứ gì đó mới 🧰
Vì chúng tôi không chỉ sử dụng những gì người khác tạo ra mà còn phân tích các nguyên tắc cốt lõi và triển khai chúng từng cái một , tôi nghĩ điều này sẽ rất hữu ích khi triển khai các hình thức hoặc ý tưởng hoàn toàn khác với Apple.
Sau khi làm việc chăm chỉ và kiên trì, bạn sẽ cảm thấy tự tin hơn khi phát triển các ứng dụng trực quan đầy thử thách.
Nhìn vào nó, tôi nghĩ, 'Làm sao mình có thể làm ra thứ như thế này?'
'Tôi cũng muốn thử điều này trong dự án của mình.'
Lớp học này dành cho những người có suy nghĩ như thế này.
Một giọt một lần
Làm đúng ngay từ đầu 💡
Nội dung học tập
- Tạo bộ khung trang web
- Nguyên tắc và thực hành triển khai tương tác cuộn
- Tương tác video độ phân giải cao và hành động cuộn
- Thực hành triển khai tương tác cuộn bằng cách tính toán vị trí và kích thước.
- Kiểm soát video chất lượng cao của bạn mượt mà hơn
- Tạo hoạt ảnh SVG
Các tính năng của bài giảng
👌 Chúng tôi xây dựng nó từ đầu bằng cách chỉ sử dụng các công nghệ web tiêu chuẩn, luôn ghi nhớ các nguyên tắc.
👌 Khóa học được cấu trúc chi tiết để bạn có thể luyện tập trong hơn 10 giờ mà không bỏ sót một nhịp nào, ngay cả khi biên tập chặt chẽ không kéo dài.
👌 Vì chúng tôi chỉ sử dụng các kỹ thuật tiêu chuẩn nên bạn có thể học được những kiến thức cơ bản vững chắc không thay đổi theo thời gian.
Tôi sẽ cho bạn biết trước 📌
- Bạn cần biết những kiến thức cơ bản về CSS và JS để học một cách dễ dàng.
- Nếu bạn cần có cái nhìn tổng quan cơ bản về CSS và JS, tôi khuyên bạn nên học qua các video tổng quan cơ bản trên kênh YouTube của tôi .
- Chúng tôi khuyên bạn nên tham gia khóa học này sau khi đã học khóa học "Bắt đầu với Phát triển web tương tác" vì khóa học này cung cấp nền tảng vững chắc về những nguyên tắc cơ bản của phát triển web tương tác .
- Sử dụng phiên bản EMCA 2015 (ES6) của tập lệnh.
- Mã nguồn hoàn chỉnh đã được cung cấp.
Thông tin nội dung thưởng bổ sung
Đã thêm mã và video hướng dẫn để tạo hiệu ứng tương tác mới trên trang giới thiệu iPad Air phát hành vào tháng 9 năm 2020.
Lộ trình liên quan 🚎
Tạo các trang web năng động, tương tác có thể khiến người dùng thốt lên "Ồ!"
Tạo một trang web tương tác với 1 Minute Coding
Đây là lộ trình các bài giảng. Bài giảng này được bao gồm .
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Bất kỳ ai tò mò về cách triển khai các tương tác thú vị và hấp dẫn trên trang web của Apple
Bất kỳ ai quan tâm đến việc triển khai một trang web tương tác, sáng tạo
Bất cứ ai muốn tạo một trang web danh mục đầu tư đặc biệt
Những người có giấc mơ về Gaeseiner hoặc Dibalza
Những người thường thích bài giảng viết mã dài 1 phút
Cần biết trước khi bắt đầu?
Kiến thức cơ bản về CSS và JavaScript
19,374
Học viên
1,236
Đánh giá
1,175
Trả lời
5.0
Xếp hạng
11
Các khóa học
서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.
개발자/디자이너/콘텐츠크리에이터
페이스북 https://www.facebook.com/1mincoding
Chương trình giảng dạy
Tất cả
60 bài giảng ∙ (11giờ 55phú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ả
223 đánh giá
5.0
223 đánh giá
minam AnĐánh giá 8
∙
Đánh giá trung bình 5.0
5
93% đã tham gia졔가 누누이 말씀을 드리지마는 이 애풀 웹샤이트 강이는 한국 인트렉슌강이중에서 간결하면서도 멋즤다 저는 이릏게 팽까합니다. 비록 안쓰본 애니메이숀이라든지 켄바스라든지 이른 어려운 슈업을 이릏케 긘 호읍, 다싀말해 율시간 늠는강이를 따라 흔다는게 이게 쉽찌가안크등요. 제가 혀녁 푸로구래머이지마는 DOM을 제대로 알지못해 씨에슈에슈를 를 맥이는데 솽당한 어려움이있다. 그른데 1분코딩은 조은 시나료를통해 강이쿈츄롤을 하니까 시가니 은제갔는지 몰라요. 보싀는 팬분들도 강이를통해 즈응말로 한단계 읍그레이드를 할수있다. 이르케 말씀을 드릴슈가 이쓰요.
- 1분코딩Giảng viên
ㅋㅋㅋㅋㅋㅋㅋ minam님은 닉네임답게 팽까도 참으로 믓찌게 쓰신다...이르케 말씀을 드릴쑤가 이쓰요. 번역기로도 절대 돌릴 수 없지만 무슨 말씀인지 다 알아듣겠는 마법 ㅋㅋㅋㅋㅋ 감사합니다 허선생님 아니 안선생님 ㅋㅋㅋㅋㅋ
- 박종성
Đánh giá 1
∙
Đánh giá trung bình 3.0
3
35% đã tham gia#웹디자인 및 인터렉션에서는 단연 최고! #프로그래머 관점에서는 글쎄..? 퍼블리셔 업무를 겸하고 싶으신 웹디자이너 분이나 디자인 쪽에 가까운 퍼블리셔라면 문제시되지 않을 수 있지만, 저처럼 디자인 분야보다는 프론트엔드내지 백엔드에 더 친화된 훌륭한 프로그래머를 꿈꾸시는 분이라면 코드를 보면서 의문이 들 때가 많습니다. 저는 개인적으로 이런 생각이 들었어요. '코드 구성이 더 간결할 수는 없을까' '어라 이건 함수로 처리하면 더 깔끔해질 것 같은데...?' '엥? 이걸 수식으로 처리하면 자동으로 값이 나올텐데 일일이 0.22와 같은 수를 입력하는 이유는 뭘까?' ## 저처럼 변형하면서 코딩하지 마세요. 그대로 베끼는 게 정신 건강에 이롭습니다. 1분 코딩님의 코드를 그대로 베껴쓰지 않고 조금씩 변형하면서 코드를 작성했더니 디버그하다가 죽을 것 같습니다. ㅠㅠ 프로그래밍에 익숙하지 않은 학생들을 고려하면서도 충분히 구조화된 코드를 사용하셨으면 어땠을까 하는 생각이 드네요. 지금 코드는 가독성이 너무 떨어지고 스파게티 코드처럼 이리저리 꼬여있어서 변형해서 코드치다가 잠깐 놓치면 분석하기 꽤나 어려운 코드라는 생각이 들어요... 하지만 오해는 마세요. 단점은 이거밖에 없습니다. 나머지는 다 좋아요. 흠잡을 데가 없습니다. 개념을 상세하게 그리고 섬세하게 알려주거든요. 그림으로 세세하게 알려주시는 점도 좋고요. 이해도 잘 되고 강의 편집도 사려 깊게 해주셔서 지루함도 덜합니다. 수많은 학생 중에서 저와 비슷한 학생도 있을테니 도움 되시라고 수강평 남깁니다. 코드를 완전히 베낀다 생각하시고 저처럼 쓸데없는 짓 피하시기 바랍니다.
- 김찬기
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
93% đã tham gia함수들의 작동원리, 값을 구하고 그 값을 활용하는 방법, 중간중간 스크립트 매소드나 변수 작성 시 저와 같은 초보들이 모를 수 있는 부분들을 콕콕 집어서 알려주셨습니다. 솔직히 이해가 가지 않는 부분도 많았지만, 스스로 이러한 코딩들 지속적으로 반복해서 작성하다 보면 언젠가 제 것으로 만들 수 있을 것 같은 자신감이 생겼어요!! 비전공자인데 이 강의를 바탕으로 저만의 포폴을 만들어 취업준비를 해보렵니다! 감사합니다
- 1분코딩Giảng viên
와, 자세하게 도움 되었던 부분들을 써주시니 저에게도 도움이 많이 되네요^^ 정말 열심히 공부하셨는데 수강평까지 멋지게 써주셔서 정말 감사합니다 찬기님. 멋진 포트폴리오 만드시고 원하시는 곳에 입사하시길 바랄게요!
1.614.287 ₫
Khóa học khác của studiomeal
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!
![모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]Course Thumbnail](https://cdn.inflearn.com/public/courses/334857/cover/4ccc6c75-74aa-4aba-b3d9-8aabe36e9452/334857.jpg?f=avif&w=420)
![[인프런 X 생활코딩] HTML과 인터넷Course Thumbnail](https://cdn.inflearn.com/public/courses/335806/cover/88d920fe-0c13-484f-8d31-1f1be0c6c4e0/335806.png?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드Course Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문Course Thumbnail](https://cdn.inflearn.com/public/courses/327126/cover/edca2ab2-47b4-45b7-92c6-5bb00fd125eb/327126.jpg?f=avif&w=420)
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)