강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

数行で終わるインタラクティブウェブ開発ノウハウ【初級編】

短時間で実務で最もよく使われるインタラクティブスキルをお知らせします。

  • coding11
3시간 만에 완강할 수 있는 강의 ⏰
Interactive Web
JavaScript

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

こんなことが学べます

  • 実務でよく使われるインタラクティブ開発スキル

  • 数行で終わるフェララックススクロール効果

  • mouse 位置値を用いたインタラクティブ効果

  • モーションに感性を加えるイージング(加速度)

数行のコーディングでインタラクティブサイトを開発しましょう!

Webインタラクティブページ開発の重要な原理をインパクトに準備しました。短くて太字!
一度煮ておくと一生使えます。


2023年3月22日
講義リニューアルを完了しました!
不足していた部分の完全改善:)

講義の特徴💡

  • 実務で活用も高い純粋なJavascriptを使用します。 (Vanilla JS)
  • インタラクティブな例を一緒に作成し、自然に必要なコードを習得します。
  • 最初は難しく見えるインタラクティブ効果がすぐに簡単になります。

講義紹介📝

インタラクティブ制作に必要な基本機
初心者の目の高さからじっくりお知らせします。
(トランスフォーム、トランジション、イージング(加速度)処理方法など)

▲初心者でも理解しやすく段階的に説明

▲わずか数行のコードで実装する海外サイトクローン
(サイトリンク)

▲センスのあるマウスモーション効果を追加

▲実務ですぐに使える例

▲スクロール値を用いた超簡易フェラレックスページ

▲多層制御によるリアルフェラックス効果
(直接製作した画像を提供します)

▲translateZ 3D Ferralexページ

この講義を頑張れば✒️

10年以上実務で繰り返し使用しているインタラクティブスキルのいくつかを確かに学びます。おそらく一生何度も何度も使うことになります。 (本気!)

頑張れば普段見た素敵なサイトがどのように作られているのか目に見えるでしょう。

お知らせします📖

  • クラスで使用されるエディタはVSCODE (ビジュアルスタジオコード)です。
  • 序盤の授業はオンラインで行っても良いです。
    -> https://jsbin.com/

他の講義に行く

現業で実際に使用するインタラクティブスクリプト

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 素敵なポートフォリオサイトを作りたい方

  • デバルになりたいデザイナー

  • デザイナーの感性が必要な開発者

  • "これは実装可能ですか?"という質問にストレスを受けた方

  • 時間がなかった方(織り、太字で構成)

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

  • html、css基礎

  • javascriptの基本

こんにちは
です。

3,317

受講生

226

受講レビュー

213

回答

4.6

講座評価

3

講座

15년 이상 여러 기업과 언론사에서 front-end 개발 및

데이터 시각화, 인터랙티브 사이트 제작을 했습니다.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!

カリキュラム

全体

53件 ∙ (5時間 45分)

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

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

受講レビュー

全体

140件

4.6

140件の受講レビュー

  • kyoo1196210님의 프로필 이미지
    kyoo1196210

    受講レビュー 4

    平均評価 4.8

    4

    2% 受講後に作成

    これまで気になったインタラクションなのに、繰り返される授業に理解度を高めました。 - 音が一定でない部分は補完が必要に見えますね^^

    • coding11
      知識共有者

      初受講ありがとうございます。 撮影の途中でマイクの設定感をつかみ、音質が変わりました。次からは注意を加えたいと思います〜 - 講義をリニューアルしました。もう一度見てください〜音質、画質ともに改善になりました

  • salary999님의 프로필 이미지
    salary999

    受講レビュー 19

    平均評価 5.0

    5

    2% 受講後に作成

    現業パブリッシャーで、現実的にjsの必要性が感じられ、今ちょうど黙っているように学んでいるjs初心者です:) この講義を購入することになった最も大きな理由は..イントロ映像にわら出てくるサイト見てすぐ決済することになりました。実際、現業でプロジェクト作業をするとき、そのサイトをリファレンスとして受けたことがありましたよ^^;; このため、私はすぐに支払いましたが。 講義の購入を悩んでいる方に私が個人的に感じた点を共有いたします。 (現在50%くらい聞いて、jsは私も初心者..ビギナーの立場で共有します。) 1.本当に王初歩タイプ - バニラjsは聞いただけを見た - addEventListenerという言葉は聞くだけだった - jsで特定の要素をどのようにインポートするのかわかりません。 本人が自分で基礎知識が足りないと判断されたら、他の講師様のjs理論講義を先に聞いた後にこの講義を聞くことをお勧めします。 2. それでも出力が出るタイプ - 一人で高品質のコードを書くことができないだけでif文を100個書いてもとにかく結果物は出すことができる - 少なくとも他人が編んだコードフローは把握できる ここに該当する場合は聞くこともできます。 個人的にはとても効率的な講義だと思います。現業では特定の技術だけ早くキャッ​​チして適用しなければならない時もありますが、この講義がぴったりそうに感じられます。短い時間でコアはすべて入っています。 問題は核心だけあるので理論が足りないと感じることができますが、理論は..グーグルシーンがあるので心配しなくてもいいです。私も混乱したり、もっと知りたい部分はグーグルで聞いています〜 最後に、講師に1つの小さな要求があります!画面に出てくるVSCodeのフォントサイズが小さいと思います。 :) そして、この講義の補強編として受講評に言及されたリサイズやモバイル版講義が出てもいいと思います。とにかく新規講義が出る前まで何度も何度も聞いているんです。ありがとうございます 👍👍

    • coding11
      知識共有者

      とこのように長い受講評は初めてです。本当にありがとうございました^^ 実際に知人にメッセンジャーなどで質問されたことから選んで講義で制作してみました。現業でよく使われるものでもありますよ。授業に出てくるコードが短いですが、応用すれば本当に多様な業務を処理できますよ〜実務に役立ててほしいです。無駄。もちろん次の講義も実務ですぐ使える内容で準備中です。 それでは楽しい一年になります〜 (ストローサイトのようなthree.js講義もしたいですねいつか!)

  • lizb님의 프로필 이미지
    lizb

    受講レビュー 4

    平均評価 5.0

    5

    2% 受講後に作成

    インタラクティブなWebクラスをいくつか聞きましたが、基本的な原則を学ぶことができてとても良かったです。ありがとうございます。

    • coding11
      知識共有者

      Joonsolさんに感謝します!

  • mingj8294182님의 프로필 이미지
    mingj8294182

    受講レビュー 2

    平均評価 5.0

    5

    2% 受講後に作成

    先生はたくさん気になっていましたが、講義していただきありがとうございます。繰り返し見ながらマスターします。

    • coding11
      知識共有者

      受講評ありがとうございます!レスポンシブ、モバイルWebで適用する方法なので...ほぼ似ているのですが、stageResizeを利用するサンプルをさらに作るように見えました。 AS方法を考えてみましょう。ありがとうございます。

  • seujuj2827님의 프로필 이미지
    seujuj2827

    受講レビュー 1

    平均評価 5.0

    5

    2% 受講後に作成

    面白い!

    • coding11
      知識共有者

      受講評ありがとうございます!(大きな力になりますㅜㅜ)

¥5,414

coding11の他の講座

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

似ている講座

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