강의

멘토링

로드맵

BEST
Programming

/

Front-end

アップルのウェブサイトのインタラクションクローン!

アップルのウェブサイトによく登場する高度なインタラクション効果を最初から直接開発する方法を学ぶことができます。

  • studiomeal
Interactive Web
Clone Coding
JavaScript
SVG
HTML/CSS

学習した受講者のレビュー

こんなことが学べます

  • アップルのウェブサイトでよく使われる高度なインタラクション技術

  • 高解像度ビデオインタラクション

  • スクロールによるキーフレームと要素コントロール

  • 高解像度画像処理のためのキャンバス活用法

アップル製品紹介ページのように素晴らしいウェブインタラクション、
私の手で開発したいのなら? 🍎

Apple製品ページ
コア原理を直接実装 🏰

Appleの製品紹介ページは製品ごとにデザインと効果は少しずつ違いがありますが、インタラクションの核心原理は似ています。スクロールを細かく利用してさまざまなデザイン要素をコントロールしますが、まさにこんなアップル製品ページにあてはまるコアインタラクションの原理を理解し自分で作ってみる授業です。適用された効果を活用して、有機的にリンクされた完成したページを作成します。

Macbook Proの紹介ページ(クリック)

Airpods Proの紹介ページ(クリック)

最近、アップルで新製品が発売されると製品を見てみる味もありますが、今回の製品紹介ページはどれほど素敵か期待する楽しみがあるでしょう。特にウェブの方はみんな楽しんでいますか?


自分で実装した経験で
新しいものを作りましょう🧰

他の人が作ったものを持っていくことなく、コア原理を分析して直接一つ一つ実装する方法で進行するので、アップルとまったく異なる形やアイデアを実装するときにも大きな助けになると思います。
一生懸命頑張れば、難易度のある視覚実装に関わる開発にもっと自信を持てるはずです。

일분이

見ながら「こんなのはどうするの?」
「私も私のプロジェクトにこれを適用したい」
こういう考えをされる方のための授業です。


汗の汗

原理からちゃんと💡

学習内容

  • Webページスケルトンの作成
  • スクロールインタラクションの実装原理と実装実践
  • 高解像度ビデオインタラクションとスクロールアクションと連動
  • 位置とサイズ計算を用いたスクロールインタラクションの実施実習
  • よりスムーズに高画質ビデオを制御する
  • SVGアニメーションの作成

講義の特徴

👌原理を考え、標準のWeb技術だけを利用して床から一つずつ作ります。
👌 伸びないタイトなカット編集でも10時間以上、逃さず実習できるように細かく構成しました。
👌標準技術のみを使用しているため、時間が経っても変わらないしっかりした基本機を身につけることができます。


事前にお知らせします📌

  • CSSとJSの基本を知っていなければ、スムーズな学習が可能です。
  • CSSとJSの基礎整理が必要な場合は、私のYouTubeチャンネルの基礎整理画像で最初に勉強してください。
  • インタラクティブWeb開発の基礎知識をしっかり勉強できるインタラクティブWeb開発 適切に始める講義を先に受講してからこの授業を受けることをお勧めします。
  • EMCA 2015 (ES6) バージョンのスクリプトを使用します。
  • 完成したソースコードを提供します。

ボーナスコンテンツ追加ガイド

2020年9月に新しく発表したiPadエア紹介ページの新しいインタラクション効果を作るコードと講義映像が追加されました。

関連ロードマップ🚎

「Oh!」感嘆者が出てくるダイナミックなインタラクティブなウェブサイトを作りましょう。
1分コーディングのインタラクティブウェブサイトを作る
講義で構成されるロードマップです。
この講義を含む

こんな方に
おすすめです

学習対象は
誰でしょう?

  • アップルのウェブサイトのカラフルで素晴らしいインタラクションの実装方法が気になる方

  • クリエイティブあふれるインタラクティブウェブの実装に興味のある方

  • 特別なポートフォリオウェブサイトを作りたい方

  • ギャザイナー、デバルザへのロマンを持っている人

  • 普段1分コーディングの講義が良かった方

前提知識、
必要でしょうか?

  • CSS、JavaScriptの基本知識

こんにちは
です。

19,428

受講生

1,242

受講レビュー

1,175

回答

5.0

講座評価

11

講座

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

カリキュラム

全体

60件 ∙ (11時間 55分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

225件

5.0

225件の受講レビュー

  • anminam님의 프로필 이미지
    anminam

    受講レビュー 8

    平均評価 5.0

    5

    93% 受講後に作成

    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.

    • studiomeal
      知識共有者

      ㅋㅋㅋㅋㅋㅋㅋ 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 ㅋㅋㅋㅋㅋ

  • andamirocll9612님의 프로필 이미지
    andamirocll9612

    受講レビュー 1

    平均評価 5.0

    5

    37% 受講後に作成

    Oh. What is it.. This is interesting...

    • studiomeal
      知識共有者

      It's funny.. You said something I really like! Haha Thank you for your good review on the first class review, Heopnim^^

  • fortedev님의 프로필 이미지
    fortedev

    受講レビュー 1

    平均評価 3.0

    3

    35% 受講後に作成

    #Best in web design and interaction! #From a programmer's perspective, well..? If you are a web designer who wants to do publisher work or a publisher who is close to design, it may not be a problem, but if you are someone like me who dreams of becoming a great programmer who is more familiar with the front-end or back-end than the design field, you often have questions when looking at the code. I personally thought this. 'Can't the code structure be more concise?' 'Hey, wouldn't it be cleaner if I processed it as a function...?' 'Huh? If I processed this as a formula, the value would come out automatically, so why do I have to input numbers like 0.22 one by one?' ## Don't code while modifying it like I did. It is good for your mental health to copy it as it is. I wrote the code by modifying it little by little instead of copying 1 Minute Coding's code as it is, and I feel like I'm going to die while debugging. ㅠㅠ I wonder if it would have been better if you had used a well-structured code while considering students who are not familiar with programming. The current code is too poorly readable and is messy like spaghetti code, so if you modify it and miss it for a moment, it's quite difficult to analyze... But don't misunderstand. This is the only drawback. Everything else is great. There's nothing to criticize. The concepts are explained in detail and delicately. It's also good that you explain them in detail with pictures. It's easy to understand, and the lectures are thoughtfully edited, so it's less boring. I'm leaving a review so that it will be helpful to students like me among the many students. Please think of it as completely copying the code and avoid doing useless things like I did.

    • bucheongosok9525님의 프로필 이미지
      bucheongosok9525

      受講レビュー 1

      平均評価 5.0

      5

      93% 受講後に作成

      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.

      • studiomeal
        知識共有者

        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!

    • zxho251786님의 프로필 이미지
      zxho251786

      受講レビュー 3

      平均評価 4.7

      5

      95% 受講後に作成

      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!

      • studiomeal
        知識共有者

        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^^

    期間限定セール、あと7日日で終了

    ¥45

    24%

    ¥9,139

    studiomealの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!