Advanced interaction techniques frequently used on Apple websites
High resolution video interaction
Controlling keyframes and elements using scrolling
How to use Canvas for high-resolution image processing
Awesome web interactions like Apple product introduction pages , Want to try developing it with your own hands? 🍎
Apple product page Implement the core principles yourself 🏰
Apple's product introduction pages vary slightly in design and effects, buttheir core interaction principles are similar.Thiscourseexploresandcreatesthe core interaction principles applicable acrossApple product pages, using precise scrolling to control various design elements . Utilizing the applied effects,we'll createcomplete, organically connected pages .
Macbook Pro introduction page (click)
Airpods Pro introduction page (click)
These days, when Apple releases a new product, it's fun to just browse, but there's also the anticipation of how amazing the product introduction page will be. I'm sure everyone on the web is enjoying it, right?
From my own experience implementing it Create something new 🧰
Since we don't just use what others have created, but analyze the core principles and implement them one by one , I think it will be of great help when implementing forms or ideas that are completely different from Apple's. After working hard and persevering, you will feel more confident in developing challenging visual implementations.
Looking at it, I thought, 'How can I make something like this?' 'I want to try this in my project too.' This class is for people who think like this.
One drop at a time Getting it right from the beginning 💡
Learning Content
Creating a web page skeleton
Scroll Interaction Implementation Principles and Practice
High-resolution video interaction and scrolling actions
Practice implementing scroll interaction using position and size calculations.
Control your high-quality video more smoothly
Creating SVG Animations
Lecture Features
👌 We build it from the ground up using only standard web technologies, keeping the principles in mind. 👌 It is structured in detail so that you can practice for more than 10 hours without missing a beat, even with tight cut editing that doesn't stretch. 👌 Because we only use standard techniques, you can learn solid fundamentals that won't change over time.
I'll let you know in advance 📌
You need to know the basics of CSS and JS to learn smoothly.
Anyone who is curious about how to implement the fancy and cool interactions on the Apple website
Anyone interested in implementing creative, interactive web
Anyone who wants to create a special portfolio website
People who have a romantic idea about the developer and developer
People who liked the 1-minute coding lectures
Need to know before starting?
Basic knowledge of CSS and JavaScript
Hello This is
19,616
Learners
1,274
Reviews
1,175
Answers
5.0
Rating
11
Courses
서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다. 비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.
I've said this many times, but this Apple web show Kang-i is one of the most concise and cool Korean interactive shows. Even though it's an animation or canvas that I've never used, it's not easy to follow the Kang-i's example of how to do difficult things like drawing quickly. Although I'm a late bloomer, I don't know DOM well, so I had a hard time figuring out the CS:GO. However, since Kang-i's tutorial is done with a good scenario for 1 minute coding, I don't know if it's a good show or not. Even fans who watch it can easily upgrade their skills through Kang-i. That's all I can say.
ㅋㅋㅋㅋㅋㅋㅋ As your nickname suggests, Minam uses the word "Pangka" really well... I guess I should put it this way. It's a magic that even a translator can't translate it, but I'll understand what you're saying ㅋㅋㅋㅋㅋ Thank you, Mr. Heo, no, Mr. Ahn ㅋㅋㅋㅋㅋ
The way functions work, how to get values and use them, and the parts that beginners like me might not know when writing script methods or variables in between were explained in detail. To be honest, there were many parts that I didn't understand, but if I continued to write these codes repeatedly, I gained the confidence that I would be able to make them mine someday!! I'm not a major, but based on this lecture, I'm going to create my own portfolio and prepare for employment! Thank you.
Wow, you wrote in detail about the parts that were helpful to me, so it was very helpful to me as well^^ You studied really hard, so thank you so much for writing such a great course review, Chan-gi. I hope you create a great portfolio and get hired at the place you want!
Not only coding, but also additional explanations using pictures and materials!
This is a very useful lecture that teaches the concepts and designs of programming, not just simple code!
Since this is a somewhat difficult lecture, I tried my best to make it as easy to understand as possible. Thank you for noticing this and leaving a good review^^
I am having so much fun following along. It's as if you are giving a lecture to students in front of you. You are so good at pointing out things you don't understand right away!! I want to listen to all of your other lectures^^