A3 code note

Photoshopで自分が行った作業がどんなコードになるのか出力できます。

https://helpx.adobe.com/jp/photoshop/kb/downloadable-plugins-and-content.html

https://youtu.be/QEn6t1Dln_M?si=kfvM0YrMLMpVT6Zi

スクロールすると、文字にマーカーが引かれる

CodePen Embed Fallback

https://youtu.be/AH1dGaGAJhg?si=vOf9WU_-Nz4UZwb9

labelを設定すると、その前にする部分のアニメーションは飛ばして、見たい部分のアニメーションをすぐに見ることができます。※すぐに動くので、更新後すぐに下げないと見れないです。

CodePen Embed Fallback

8行目elasticの他の動きは以下参照https://greensock.com/docs/v3/Eases

https://youtu.be/_hbvq1TuZs8?si=3roWzKYZvCnLHEFU

react で Scroll Triggerを使用します。

gsapインストール

ターミナルを開いて、以下コマンド実行

npx create-react-app scrolltrigger-react

一番下に "Happy hacking!" が出てきたら、以下２行も実行

cd scrolltrigger-react code .

開いたエディタでターミナルを開き、以下コマンド実行

npm start

すると、http://localhost:3000/ が開いたと思います。次にgsapのインストールです。ターミナルを分割し、( 1:29 )新しく開いた方で以下実行

npm install gsap

package.json の 6行目に gsapが追加されていると思います。その次の行でも、react, react-dom, react-scripts　などがインストールされているのが分かります。

src > app.jsこのファイルには回転しているロゴや、文字などのブラウザに表示されているすべてのdom要素が含

https://youtu.be/7YsNBbQ55H8?si=jdELGJ2p4YOyaMxL

スクロールするとふわっとヘッダーに背景色が入る

CodePen Embed Fallback

10:26これは検証画面のコンソールログで確認できます。

CodePen Embed Fallback

https://youtu.be/-qQhTxTtpeQ?si=Wdv6-2cjmF3TMnn5 CodePen Embed Fallback

https://youtu.be/FH0B3Gdm0P0?si=6A4w2qiYISWYZgMw

See the Pen Scroll Trigger Tutorial - 5 - Pin by a3 (@nniisii) on CodePen.

pin: true,　　ー　そのものが固定される

pin: ".square",　ー　トリガーを設定できる

pinSpacing: true,　ー　トリガーが終了後次の要素が出てくる

https://youtu.be/SCfZBtedicw?si=3It64LFF-IMTuZcL

See the Pen Scroll Trigger Tutorial - 4 - Scrub by a3 (@nniisii) on CodePen.

scrub : start から end になるまでにかけて移動したり戻ったりする。scrub: 4　＝　４秒かけてscrubする

https://youtu.be/If_Yp4TCt9c?si=DHCPvm_tliTPAPwY

See the Pen Scroll Trigger Tutorial - 3 - Toggle Actions by a3 (@nniisii) on CodePen.

toggleActions

4:30onEnter : 　下にスクロールしてscroller-startと触れたとき onLeave : 　下にスクロールしてscroller-end と触れたときonEnterBack : 上にスクロールしてscroller-end と触れたときonLeaveBack : 上にスクロールしてscro

https://youtu.be/ZCtXfJMdgE0?si=XMQWELxaqjsI8B0l

See the Pen Scroll Trigger Tutorial - 2 - Start and End by a3 (@nniisii) on CodePen.

https://youtu.be/WEky7V490Rs?si=EkvKRbDjxrJy0Lm6 GSAP Installation

「GSAP download」と検索するか、下記リンクにアクセスhttps://greensock.com/docs/v3/Installation?checked=core%2CscrollTrigger

「GSAP 3 Install Helper」> CDN > "ScrollTrigger" にチェック

下の COPY CODE をクリックし、2行コピーする

code

See the Pen Scroll T

const breakfast = "お茶漬け" console.log("今日の朝ごはんは" + breakfast + "でした。") //=> 今日の朝ごはんはトーストでした。

上記のように+で文字を繋げると、少し記述が冗長です。バッククオート(`)で囲む特殊な書き方の文字列を使うと、もう少し簡単に書けます。

const breakfast = "納豆ごはん" console.log(`今日の朝ごはんは${breakfast}でした。`) //=> 今日の朝ごはんは納豆ごはんでした。 console.log(`8 + 7 = ${8 + 7}`) //=> 8 + 7 = 15

${〜}のところに、文字列の中に入れたい値や変数を書きます。この書き方の文字列をテンプレート文字列と呼びます。

多くのキーボードでは、バッククオートはShift + @で入力できます。テンプレート文字列では、改行がそのまま書けるという特徴もあります（'や"で囲んだ文字列ではできません）。

const html = ` <div class="container"> <p>test</p> </div> `