9/30のAdvance Everyday

昨日のイラスト

昨日のスクリプト

今日は火曜日で、昨日の疲れを引きずりながらも意地で4:30にアラームとともに起きた。

とにかく最近は早寝早起きを徹底していて、夜は22時から23時の間にベットにつくよう努めてるし、睡眠時間はしっかり取れているんだが、やっぱり夜に作業を中断するのがすごく気持ちが悪いし、朝起きれずに1日が台無しになってしまうこともあってもう少し慣れが必要な気がしてる。

前からポッドキャスト×ブログ記事っていうのが面白そうだなと思っていて、ついに今日の朝適当に収録した音源をもとにSpotifyにてポッドキャストを開設してみた。

学校の行きにストーリーでスクリーンショットとともに自分の朝の究極の鼻声を聴くよう友達に促して「聞くわ！」みたいなポジティブリアクションをたくさんもらえて最高の出だしだった。

朝早くに起きて通学・通勤前に１、２時間自分の好きな作業を進めることっていろいろメリットがありそうだなと感じた１日だった。

CODING MANUAL

前回のAdvance Week1で言っていたように、画像ごとの整理されたアニメーション以外に、画面全体でテキストも巻き込んだ大きなムーブメントを作れたらもっと魅力的になるんじゃないか、ということで、今日はこんなコンポーネントを実装してみました。

先ほどIllustratorでペンツールを使ったベジェ曲線の書き方を覚えまして、その練習も兼ねて適当に書いたキャラクターをSVGで書き出し、前回と同様ScrollMagicとTweenMaxでアニメーションさせています。

//全体の背景色をダークモードに

tobedark1 = new TweenMax.to(".toBeDark", 0.3, {
  backgroundColor: "#2c2c2c",
});

var scene1 = new ScrollMagic.Scene({
  triggerElement: ".toBeDark",
  triggerHook: 0.3,
})
  .setTween(tobedark1)
  .addTo(controller);

//SVGの背景を白に反転

const tobedark2 = new TweenMax.to(".advance_dark", 0.5, { fill: "#fff" });

var scene2 = new ScrollMagic.Scene({
  triggerElement: ".toBeDark",
  triggerHook: 0.2,
})
  .setTween(tobedark2)
  .addTo(controller);

//SVGを囲っている<div class="svg_tobedark">に対して。上の動画では書いていないコード！

const tobedark3 = new TweenMax.to(".svg_tobedark", 0.5, {
  scale: 1.1,
  rotation: 360,
});

var scene3 = new ScrollMagic.Scene({
  triggerElement: ".svg_tobedark",
  triggerHook: 0.2,
})
  .setTween(tobedark3)
  .addTo(controller);

//テキストカラーを反転

const tobedark4 = new TweenMax.to(".tobedark_p", 0.3, { color: "#fff" });

var scene4 = new ScrollMagic.Scene({
  triggerElement: ".toBeDark",
  triggerHook: 0.1,
})
  .setTween(tobedark4)
  .addTo(controller);

上のようにSVGに直接scaleやrotationを指定しまうと下のようにトリミングされてしまったので、上記のようにSVGを囲っているdiv要素に対しての指定をした。

（よく考えてみればwidthをdiv要素に対して指定していたから、SVGに対してscaleやrotationをさせて変になってしまうのは当然だった）

今日のポッドキャスト

今日9/30の朝は忙しくしてしまったので、本日のポッドキャストリンクは昨日テストで収録したものをシェアします。すみませんっ💦

昨日のイラスト

昨日のスクリプト

CODING MANUAL

今日のポッドキャスト

カテゴリー

メニュー