「CSSでアニメーションを作ってみたけど、複雑な動きになると難しい…」
「スクロールに合わせてふわっと表示される、あの動きを作ってみたい」
「Webデザインの授業で習った次に、何を学べばいいんだろう？」
そんなふうに感じたことはありませんか？
Webサイトの動き（アニメーション）は、見ている人の目を引き、サイトの印象を大きく左右します。
今回のライブ授業では、そんな動きを作るためのJavaScriptライブラリ 「GSAP（ジーサップ）」 の基本を、実際にコードを見ながら体験していただきます。
GSAPって、どんなもの？
GSAPは、JavaScriptで動くアニメーション用のライブラリです。
Webサイトの「ふわっと表示される」「スッと横から入ってくる」「スクロールに合わせて動く」といった表現を、少ないコードで作れるのが特長です。
- ブラウザの違いを気にしにくく、軽量で柔軟に使える
- 複雑なアニメーションも、少ないコードで書ける
- ScrollTriggerというプラグインで、スクロール連動の動きも簡単に実装できる
今回のライブ授業で体験できること
1．GSAPの基本メソッドを知る 「gsap.to()」「gsap.from()」「gsap.fromTo()」という3つの基本の書き方を、サンプルを見ながら学びます。 「何をどう書くと、どう動くのか」を、動きを見ながら確認できます。
2．ScrollTriggerでスクロール連動アニメーションを体験する 画面をスクロールしたタイミングで、要素がふわっと現れる動きを紹介します。 タイトルやセクションの見せ方にも使える表現です。
3．数値を変えて、実際に触ってみる 動きの距離や時間、タイミングの数値を変えながら、「こう変えると、こう動くんだ！」を体験します。 ちょっとしたアレンジにも挑戦できます。
「今日はGSAPの基本を知って、こういうアニメーションの実装方法もあることを知る」ことがゴールです。 難しく考えず、気軽に参加してくださいね。
こんな方におすすめです
- Webデザインやコーディングを学び始めている方
- HTML・CSSの次のステップとして、JavaScriptでの表現に興味がある方
- 動きのあるWebサイトを作ってみたい方
- デジハリ名古屋の授業の雰囲気を知りたい方
開催概要
日時：11月8日（日）15:00〜
形式：対面開催
参加費：無料
デジタルハリウッドSTUDIO名古屋
〒460-0003 愛知県名古屋市中区錦3丁目7−15 8F
校舎様子
参加方法
下記よりご連絡ください
◇TEL ： 052-955-5532
◇Mail ： info@dhs758.jp
◇LINE：https://lin.ee/sO9cMoO
※「29日のライブ授業に参加希望です。」とお伝えください。
個別のスクール説明会も常時開催中！
※ご予約の際、ご希望のスクールは『STUDIO名古屋』をご選択ください。
052-955-5532 受付時間：10:00～21:00