inflearn logo
inflearn logo

JavaScriptで学ぶfullPage + anime + SVG Animationポートフォリオ

Vanilla Javascript + fullPage.js + SVG AnimationインタラクティブWebポートフォリオ! 就職と転職のための必須コース!

難易度 初級

受講期間 無制限

Interactive Web
Interactive Web
JavaScript
JavaScript
Interactive Web
Interactive Web
JavaScript
JavaScript
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

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

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

4.2

5.0

gangsugi

100% 受講後に作成

svg ということを主に直接コーディングして作ってから、こうして anime というのが利用できるということがわかりました。じっくりとゆっくりと説明してくれて耳にすっぽり入ってきていい講義でした。完全イチオシ!!!

5.0

TaeHyun Lim

100% 受講後に作成

anime.jsを勉強しようとしているこの講義を見てみましたね。良い講義ありがとうございます〜

5.0

lwshan

100% 受講後に作成

面白い!

受講後に得られること

  • fullPage.jsの使い方

  • fullPage スクロールアニメーション

  • anime.js基礎の使い方

  • anime.jsを使用したJavaScriptアニメーション

  • バニラJavaScriptスライダーロジック

  • SVGを活用したインタラクティブWeb

  • Flex Layout

純粋なJavaScriptで作る
インタラクティブWebポートフォリオ!

VanillaJS + fullPage + Anime!

プログラミング文法を通して
文法を書く方法を学んだら、
今はどのようにコードを扱うのか
知っておくべきです🙂

fullPage.jsとは何ですか?

開発者Álvaro Trigoが製作したプラグインで、マウススナップを利用して動作するJavaScriptライブラリです。
マウススナップで機能する全画面ページをすばやく簡単に作成する役割を果たします。

fullPage.js公式サイト(ショートカット)

ゲンテムゲン!
anime.jsにする
SVGアニメーション。

anime.jsは、シンプルで強力なAPIを含む軽量のJavaScriptアニメーションライブラリです。 CSSプロパティ、SVG、DOMプロパティ、およびJavaScriptオブジェクトと連携します。

anime.js公式サイト(ショートカット)

この講義は!

fullPage.jsでフルスクリーンを作成し、
anime.jsでSVGアニメーションを実装する
実習中心の講義です。


どのスキルを学びますか?

fullPage.js & anime.js 基礎

fullPageの基本設定から、Navigation Anchor(ナビゲーション設定)、Active Classの活用法、コールバック関数の使用と活用法、バニラのJavaScriptで作成するSlider Logicを学びます。

また、華やかで素敵なアニメーション効果を作るために anime 基礎使用法や anime.js を活用した Timeline Animation、SVG Animation などインタラクティブアニメーションに必要なスキルを学習します。

目立つインタラクティブアニメーション

5つの練習の例を直接確認してください!

ラインアニメーション、グラフ効果、背景と連動するスライダー活用、SVGパスタグを活用した動く背景ページ、クリックによってアニメーションが進むページなど、さまざまな方法で応用できるインタラクティブアニメーションWebポートフォリオテンプレートを自分の手で作成できるようになります。


Webパブリッシャー/デザイナー
新ポートフォリオをご用意したら!

基本原理学習

実際の雇用のためのポートフォリオとして使用できるインタラクティブテンプレートを実装するための原理を知ることができます。

骨格を立てる

バニラのJavaScriptを使ったテンプレートに私のUIデザインを置き、自分でポートフォリオを作成して応用しましょう。

対話型ポートフォリオ

Webパブリッシャー/デザイナーの就職を準備し、SVG Anime Animationによるインタラクティブポートフォリオが必要な方にお勧めします。


予想される質問 Q&A

Q. コーディングをどのくらいすればこの講義を聞くことができますか?

HTML、CSS、JavaScriptの基礎を備えた方が学習することをお勧めします。 (選手の知識を参照)

Q.レッスンに使用されるスクリプトはjQueryを使用しますか?

Vanilla JavaScriptを使った講義です。

Q. このクラスを聞くとポートフォリオを作成できますか?

はい、作成できます。

オフラインの授業でコーディングを全く知らなかった学生たちが国費教育課程を修了した後、新入WebパブリッシャーやUI/UXデザイナーとして就職したりします。この時、基本的に使用するテンプレートが fullPage.js であり、講義では anime.js を利用した SVG、Stagger Animation をさらに活用しました。

基本的な使い方や活用法にあわせている講義なので、学習した内容に自分のコンテンツで作ったUIデザインを加えれば十分に実際のポートフォリオとして活用できるはずです。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • パブリッシャー、デザイナーの雇用のためのWebポートフォリオを作成する必要がある方!

  • ポートフォリオを作る自信がなく、助けが必要な方!

  • どうやって作ったのか気になるウェブサイトの原理を身につけてみる方!

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

  • HTMLの基礎

  • CSSの基礎

  • JavaScriptの基礎

こんにちは
lizbです。

785

受講生

43

受講レビュー

92

回答

4.7

講座評価

7

講座

知識共有者のオフライン国費支援コースの受講レビューを見る

「レスポンシブウェブデザイン養成課程」受講レビューはこちら
(2022.03-2022.07)

3月から現在まで、長いと言えば長く、短いと言えば短い時間だったかもしれませんが、私の人生においては本当に重要で価値のある期間だったと思います。事前知識はある程度ありましたが、どうすればいいのか、どの方向へ進むべきか、何をすべきか全く分からず途方に暮れていました。しかし、先生が誠心誠意教えてくださったおかげで、技術面でも就職面でも確かな成長を遂げることができたと感じています。そのおかげで自信もつき、就職後も上手くやっていけそうだという気がしています!授業を担当してくださったパン・ミジョン先生、そして就職担当の先生方、本当にありがとうございました!:) 無事に就職して卒業します!後輩の皆さんも頑張って、良い経験を積んでくださいね!ファイト!:)

3月から7月までウェブパブリッシャー養成課程を受講しました :) デザイン以外は何も分からない状態で挑戦したのですが、先生や仲間の応援と支えのおかげで、多くのことを得られた気がします。学院で学んだことを土台に、これからも一生懸命勉強していきます~~ いつも親切に教えてくださったパン・ミジョン先生、そして就職担当の先生方、本当にありがとうございました!

「フロントエンド開発者養成課程」受講レビューはこちら
(2020.11.17-2021.05.11)

6ヶ月という時間が短く感じられるほど、訓練課程は興味深いものでした。アイデアを出しデザインをする作業は時間がかかりましたが、訓練課程を通じてコツを掴み、作業時間を大幅に短縮していく自分の姿を見て、実力がどんどん向上したようで誇らしかったです。職業の方向性をうまく定められずにいた私にとって、この訓練課程で学んだことは自分だけの知識であり、職業の方向性を示してくれる道しるべでした。そして、6ヶ月間共に学んだフロントエンド開発者養成課程3教室の仲間たちとパン・ミジョン講師は、素晴らしい縁であり心の支えでした。パン・ミジョン講師と就職支援チームの方々、行政職員の方々が熱心に助けてくださったおかげで、訓練課程を修了する前に就職が決まったのだと思い、心から感謝しています。この課程以外にも他にも良い課程がたくさんあるので、大宇職業能力開発院という学院を、私のように就職への不安があったり、職業の方向性をうまく定められなかったりする後輩や友人たちに推薦したいです。

初めて来たときは、デザインもコーディングも一度も学んだことがない私が、果たしてこの過程を受講して就職できるだろうか?と、とても心配していたように思います。ですが、通えば通うほど、そのような不安は消えていきました。イラストレーター、フォトショップ、HTML、CSS、JS、Vueなど、多くのことを学びました。新しく学ぶことが多いので、序盤は難しいかもしれませんが、情熱あふれるパン・ミジョン先生が本当に丁寧に教えてくださるので、心配しなくても大丈夫だと思います(笑)。他のスクールのレビューを見ると、毎年同じレパートリーの授業だったり、ひどい場合は先生に質問してもよく分かっていないケースもありますが、先生は常に情熱を持って新しいことも教えようとしてくださり、知識も豊富なので、たくさん助けていただきました!ウェブパブリッシャー、ウェブデザイナーを目指しているなら、超オススメです。~~

昨年2020年11月、偶然の機会に大宇職業能力開発院という素晴らしい機関を知り、ここで素晴らしい先生に出会って良い教育を受講できたことに心から感謝しています。もし私がこの教育訓練課程を受けていなかったら、おそらく今のような就職の機会を得ることは難しかったでしょう。大学卒業後、就職の分かれ道で方向性を定められず彷徨っていた時期に、他ではなかなか学べない先生の実際の教務経験とノウハウが詰まった5〜6ヶ月間の教育課程は、ウェブ開発について全く知らなかった私にとって大きな学びと成長の期間となりました。これを基盤に、多様なデザインとウェブ開発を学び、自分だけのポートフォリオも作ることができました。私にはあまりに馴染みのないコーディング言語を学ぶことは難しく、途中で諦めたくなる瞬間が何度もありましたが、諦めずに10回でも繰り返し教えてくださる先生の情熱と導きのおかげで、6ヶ月の課程をすべて修了する前(80%以上受講)に早期就職が決まり、教育課程を無事に終えることができました。このように、初めての職場を得て新たな出発ができるようにしてくださった先生と、大宇職業能力開発院という機関に深く感謝いたします。

非専門家でも理解しやすいように教えてくださり、そのおかげで無事に就職もできました。この課程を受講できて本当に嬉しいです。

デザインやコーディングツールを実務で使えるカリキュラムに合わせ、基礎から一歩ずつ丁寧に説明してくれます。自分自身で作業ができるよう、先生が最善を尽くしてサポートしてくださり、とても助かりました。国費の授業はクオリティが低いという偏見を打ち破るような教育でしたし、担任の先生も非常に進取的で、常に新しいことを教えようとしてくださったおかげで、多くのことを学ぶことができました。

非専門家でも理解しやすいように教えてくださり、そのおかげで無事に就職もできました。この課程を受講できて本当に嬉しいです。

以前から持っていた知識に加え、学院での教育を通じて様々なことを知り、学ぶことができました。資格も取得できるよう練習も重ね、私には難しかったコーディングという言葉も、大体は理解できるほどに上達しました。こちらを受講しながら就職も決まり、安心したと同時にとても嬉しく思っています。


建築学を専攻し、ウェブデザインと縁を結んでからかれこれ20年以上が経ちました。実務と講義を並行しながら、多くの喜怒哀楽を経て、現在は今の仕事をとても愛するようになり、興味と達成感を持ってさらに邁進するようになりました。私が持っている知識を共有することで、より多くの非専門家の方々が簡単に第一歩を踏み出せることを願い、あなたの望むすべてのことが叶うようお祈りいたします。

Lucete!

講義に関するお問い合わせメール: loo4love90@gmail.com

 

 

講師経歴  

  • 2018.3 - 現在。ウェブデザイン/マルチメディア/フロントエンド専門家課程 進行中

  • エリスアカデミー `クラスが違う HTML / CSS` オープン準備中

  • エリスアカデミー `クラスが違う javascript` オープン準備中

□ 現 大宇職業能力開発院 フロントエンド / マルチメディア / ウェブコンテンツ課程 講義
□ ハイメディア UI/UX ウェブパブリッシング 講義

□ イゼンコンピューター UI/UX ウェブパブリッシング講義
□ ザ・ジョウンコンピュータ学院 鍾路キャンパス ウェブデザイン講義
□ ザ・ジョウンコンピュータ学院 江南キャンパス ウェブデザイン/グラフィック講義
□ 英才職業専門学校 ウェブデザイン講義

 

  資格証  

□ ウェブデザイン技能士 資格
□ コンピューターグラフィックス運用技能士 資格

□ KPC 資格指導者(GTQ, GTQi, GTQid) 資格証

職業能力開発訓練教員3級(情報技術、デザイン、文化コンテンツ、情報技術戦略・計画

情報技術運用)
□ コンピュータ活用能力1級

 

もっと見る

カリキュラム

全体

44件 ∙ (7時間 13分)

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

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

受講レビュー

全体

5件

4.2

5件の受講レビュー

  • lwshan2154님의 프로필 이미지
    lwshan2154

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    面白い!

    • lizb
      知識共有者

      楽しく受講してくれたなんて僕もとても嬉しくてやりがいですよね~~^^

  • enyalife12235952님의 프로필 이미지
    enyalife12235952

    受講レビュー 3

    平均評価 5.0

    5

    9% 受講後に作成

    javascript 基礎知識がない私には多くの役に立つ講義でした。

    • lizb
      知識共有者

      授業についてたくさん悩んでいる最近ですね。より悩み、発展できるよう努力します。ありがとうございます。

  • gangsugi5753님의 프로필 이미지
    gangsugi5753

    受講レビュー 23

    平均評価 5.0

    5

    100% 受講後に作成

    svg ということを主に直接コーディングして作ってから、こうして anime というのが利用できるということがわかりました。じっくりとゆっくりと説明してくれて耳にすっぽり入ってきていい講義でした。完全イチオシ!!!

    • lizb
      知識共有者

      ありがとうございます!役に立ったなんて力があります~~^^ 次の講義をよく準備してみましょう!

  • thsoon님의 프로필 이미지
    thsoon

    受講レビュー 19

    平均評価 5.0

    5

    100% 受講後に作成

    anime.jsを勉強しようとしているこの講義を見てみましたね。良い講義ありがとうございます〜

    • lizb
      知識共有者

      はい、ありがとうございます。どうぞよろしくお願いいたします。良い受講評価もありがとうございます。 ^^

  • sssisis3484님의 프로필 이미지
    sssisis3484

    受講レビュー 9

    平均評価 3.9

    1

    100% 受講後に作成

    バニラjsにフルページSVGなどのキーワードで釣った。 実務家が聞くにはあまりにも簡単なレベル、 https://animejs.com/, https://alvarotrigo.com/fullPage/ ここで見た方がいいと思います。

    • lizb
      知識共有者

      実務者に合わせた授業ではありませんでした。川の詳細説明にも示されているように、新入ポートフォリオ作りの初級者向けコースです。役に立たなくて申し訳ありませんが、様とは違って公式サイトを見ても難しさを感じる初級者もいます。釣ったという表現は講義を数ヶ月間悩んで作ったんですけど、凄まじい気持ちさえありますね。もっと実務家に役立つ内容に悩んでみましょう。

lizbの他の講座

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

似ている講座

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

¥8,342