2021.09.25

10/5のAdvance Everyday

昨日のイラスト

アイコンたちはここからダウンロードしたものを使っています。

http://iconstore.co/

 

昨日のスクリプト

「SNSをやめたい」みたいなことを最近すごく思うようになったんですが、SNSって存在としては大きいから、全部止めるのはすごいもったいないと思うんです。

個人的におすすめなのは、作業合間にiPadで観る「YouTube」を「NewsPicks」にリプレイスすること。

NewsPicksもプレミアム会員であれば動画コンテンツは充実してるし、更新頻度も高いから、作業途中に流すのはYouTubeみたいにどうでもいい動画を観ることにはならないNewsPicksをお勧めします。笑

CODING MANUAL

先に断っておきたいのですが、これ正しい書き方か分からないです。笑

setPinで要素の差をつけてからそのままスクロールアウトさせるのってdurationの数字をずらす方法であってるんだろうか…

あと工夫した点としてアイコンのサイズをスケールさせてますっ

<div class="icon_on_phone">
      <img src="svg/instagram_icon_on_phone.svg" class="icon_scale instagram" />
      <img src="svg/twitter_icon_on_phone.svg" class="icon_scale twitter" />
      <img src="svg/youtube_icon_on_phone.svg" class="icon_scale youtube" />
    </div>

    <div class="text">
      <p>
        マルチディスプレイ環境(複数のPCモニターを同時使用すること)が整ったら、ぜひ体験しておきたいのが「モニターの縦置き」です。筆者もデュアルディスプレイの片方を縦置きにして3ヶ月ほど経ちますが、もう横置きには戻れません!これまでは視野の外になっていた情報をスクロールなしで表示でき、以前と比べ物にならないくらい作業効率がアップしました。<br />
        この記事は次のような方におすすめです。
      </p>
    </div>
.icon_on_phone {
  max-width: 250px;
  margin: 1000px auto 50px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  img {
    display: block;
    width: 60px;
  }
}

.text {
  margin: 0 auto 10000px auto;
}
icon_scale = new TweenMax.to(".icon_scale", 0.5, { scale: 1.5 });

var icon_on_phone1 = new ScrollMagic.Scene({
  triggerElement: ".instagram",
  triggerHook: 0.6,
  duration: 120,
})
  .setPin(".instagram")
  .setTween(icon_scale)
  .addTo(controller);

var icon_on_phone2 = new ScrollMagic.Scene({
  triggerElement: ".twitter",
  triggerHook: 0.6,
  duration: 1,
})
  .setPin(".twitter")
  .setTween(icon_scale)
  .addTo(controller);

var icon_on_phone3 = new ScrollMagic.Scene({
  triggerElement: ".youtube",
  triggerHook: 0.6,
  duration: 180,
})
  .setPin(".youtube")
  .setTween(icon_scale)
  .addTo(controller);

 

村木 瞬Shun Muraki
Web Designer

Neutral between linear and non-linear.

デジタルメディアのフォーマット
「Linear Native」について研究。

テーマは”リニアとノンリニアのニュートラル”