강의

멘토링

커뮤니티

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,485

受講生

1,257

受講レビュー

1,175

回答

5.0

講座評価

11

講座

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

カリキュラム

全体

60件 ∙ (11時間 55分)

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

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

受講レビュー

全体

228件

5.0

228件の受講レビュー

  • minam An님의 프로필 이미지
    minam An

    受講レビュー 8

    平均評価 5.0

    5

    93% 受講後に作成

    졔가 누누이 말씀을 드리지마는 이 애풀 웹샤이트 강이는 한국 인트렉슌강이중에서 간결하면서도 멋즤다 저는 이릏게 팽까합니다. 비록 안쓰본 애니메이숀이라든지 켄바스라든지 이른 어려운 슈업을 이릏케 긘 호읍, 다싀말해 율시간 늠는강이를 따라 흔다는게 이게 쉽찌가안크등요. 제가 혀녁 푸로구래머이지마는 DOM을 제대로 알지못해 씨에슈에슈를 를 맥이는데 솽당한 어려움이있다.그른데 1분코딩은 조은 시나료를통해 강이쿈츄롤을 하니까 시가니 은제갔는지 몰라요. 보싀는 팬분들도 강이를통해 즈응말로 한단계 읍그레이드를 할수있다. 이르케 말씀을 드릴슈가 이쓰요.

    • 1분코딩
      知識共有者

      ㅋㅋㅋㅋㅋㅋㅋ minam님은 닉네임답게 팽까도 참으로 믓찌게 쓰신다...이르케 말씀을 드릴쑤가 이쓰요. 번역기로도 절대 돌릴 수 없지만 무슨 말씀인지 다 알아듣겠는 마법 ㅋㅋㅋㅋㅋ 감사합니다 허선생님 아니 안선생님 ㅋㅋㅋㅋㅋ

  • 피로한 메기님의 프로필 이미지
    피로한 메기

    受講レビュー 1

    平均評価 5.0

    5

    37% 受講後に作成

    어. 뭐지.. 재밌네...

    • 1분코딩
      知識共有者

      재밌다.. 제가 넘 좋아하는 말씀 해주셨네요! ㅋㅋ 첫 수강평에, 좋은 평가도 감사합니다 헙님^^

  • 박종성님의 프로필 이미지
    박종성

    受講レビュー 1

    平均評価 3.0

    3

    35% 受講後に作成

    #웹디자인 및 인터렉션에서는 단연 최고! #프로그래머 관점에서는 글쎄..? 퍼블리셔 업무를 겸하고 싶으신 웹디자이너 분이나 디자인 쪽에 가까운 퍼블리셔라면 문제시되지 않을 수 있지만, 저처럼 디자인 분야보다는 프론트엔드내지 백엔드에 더 친화된 훌륭한 프로그래머를 꿈꾸시는 분이라면 코드를 보면서 의문이 들 때가 많습니다. 저는 개인적으로 이런 생각이 들었어요. '코드 구성이 더 간결할 수는 없을까' '어라 이건 함수로 처리하면 더 깔끔해질 것 같은데...?' '엥? 이걸 수식으로 처리하면 자동으로 값이 나올텐데 일일이 0.22와 같은 수를 입력하는 이유는 뭘까?' ## 저처럼 변형하면서 코딩하지 마세요. 그대로 베끼는 게 정신 건강에 이롭습니다. 1분 코딩님의 코드를 그대로 베껴쓰지 않고 조금씩 변형하면서 코드를 작성했더니 디버그하다가 죽을 것 같습니다. ㅠㅠ 프로그래밍에 익숙하지 않은 학생들을 고려하면서도 충분히 구조화된 코드를 사용하셨으면 어땠을까 하는 생각이 드네요. 지금 코드는 가독성이 너무 떨어지고 스파게티 코드처럼 이리저리 꼬여있어서 변형해서 코드치다가 잠깐 놓치면 분석하기 꽤나 어려운 코드라는 생각이 들어요... 하지만 오해는 마세요. 단점은 이거밖에 없습니다. 나머지는 다 좋아요. 흠잡을 데가 없습니다. 개념을 상세하게 그리고 섬세하게 알려주거든요. 그림으로 세세하게 알려주시는 점도 좋고요. 이해도 잘 되고 강의 편집도 사려 깊게 해주셔서 지루함도 덜합니다. 수많은 학생 중에서 저와 비슷한 학생도 있을테니 도움 되시라고 수강평 남깁니다. 코드를 완전히 베낀다 생각하시고 저처럼 쓸데없는 짓 피하시기 바랍니다.

    • 김찬기님의 프로필 이미지
      김찬기

      受講レビュー 1

      平均評価 5.0

      5

      93% 受講後に作成

      함수들의 작동원리, 값을 구하고 그 값을 활용하는 방법, 중간중간 스크립트 매소드나 변수 작성 시 저와 같은 초보들이 모를 수 있는 부분들을 콕콕 집어서 알려주셨습니다. 솔직히 이해가 가지 않는 부분도 많았지만, 스스로 이러한 코딩들 지속적으로 반복해서 작성하다 보면 언젠가 제 것으로 만들 수 있을 것 같은 자신감이 생겼어요!! 비전공자인데 이 강의를 바탕으로 저만의 포폴을 만들어 취업준비를 해보렵니다! 감사합니다

      • 1분코딩
        知識共有者

        와, 자세하게 도움 되었던 부분들을 써주시니 저에게도 도움이 많이 되네요^^ 정말 열심히 공부하셨는데 수강평까지 멋지게 써주셔서 정말 감사합니다 찬기님. 멋진 포트폴리오 만드시고 원하시는 곳에 입사하시길 바랄게요!

    • zxho25님의 프로필 이미지
      zxho25

      受講レビュー 3

      平均評価 4.7

      5

      95% 受講後に作成

      코딩뿐만 아니라, 그림이나 자재를 활용한 부연설명까지! 단순한 코드가 아니라 그 프로그래밍을 진행하는 개념과 설계를 알려주는 매우 유익한 강의입니다!

      • 1분코딩
        知識共有者

        난이도가 좀 있는 강의라서 최대한 이해하시기 쉽도록 노력해보았는데, 그 부분을 알아주시고 좋은 수강평도 남겨 주셔서 감사합니다^^

    ¥9,409

    studiomealの他の講座

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

    似ている講座

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