2021.09.25

10/6のAdvance Everyday

昨日のイラスト

 

昨日のスクリプト

勉強と課外活動と、どうバランスを取っていくのかっていうのはかなり頭を抱える悩みになると思うのですが、個人的には最近になって整理がついた気がしてて。

ビル・ゲイツとかマーク・ザッカーバーグも、結局大学には行っていて、でも在学中に外で進めている活動が大きくなりすぎた結果大学を中退したわけです。

この「みんなが通る道」を残しながら、他の時間で事業を大きくして最終的に「みんなが通る道」から「降りざるを得ない状況」を作り出していくことが目標になるのかなと。

CODING MANUAL

今回はすごくイケてるデザインになったと思います。

ドッツの色を変えると同時にサイズを少し大きくしたりも考えたのですが、レイアウトが崩れてしまったので次回以降に後回し。

 

<div class="timeline_whole">
      <div class="timeline">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495 1709">
          <defs>
            <style>
              .cls-1 {
                fill: #e86b79;
              }
              .cls-2 {
                fill: none;
                stroke: #e86b79;
                stroke-miterlimit: 10;
                stroke-width: 8px;
              }
            </style>
          </defs>
          <g id="レイヤー_2" data-name="レイヤー 2">
            <g id="レイヤー_1-2" data-name="レイヤー 1">
              <rect
                class="cls-1 ball1"
                x="326"
                width="169"
                height="169"
                rx="84.5"
              />
              <rect
                class="cls-1 ball2"
                x="127"
                y="308"
                width="169"
                height="169"
                rx="84.5"
              />
              <rect
                class="cls-1 ball3"
                x="23"
                y="616"
                width="169"
                height="169"
                rx="84.5"
              />
              <rect
                class="cls-1 ball4"
                y="924"
                width="169"
                height="169"
                rx="84.5"
              />
              <rect
                class="cls-1 ball5"
                x="85"
                y="1232"
                width="169"
                height="169"
                rx="84.5"
              />
              <rect
                class="cls-1 ball6"
                x="296"
                y="1540"
                width="169"
                height="169"
                rx="84.5"
              />
              <path class="cls-2" d="M410.6,49.94s-734,922,0,1596" />
            </g>
          </g>
        </svg>
      </div>

      <div class="text_timeline">
        <h3 class="timeline_1">生まれるかも<span>2003</span></h3>
        <h3 class="timeline_2">生まれるのか<span>2004</span></h3>
        <h3 class="timeline_3">生まれるんだろうか<span>2005</span></h3>
        <h3 class="timeline_4">生まれるのでしょうか<span>2006</span></h3>
        <h3 class="timeline_5">生まれる!?<span>2007</span></h3>
        <h3 class="timeline_6">生まれるわけない<span>2008</span></h3>
      </div>
    </div>
.timeline_whole {
  @include flex(row, space-between);

  max-width: 350px;
  margin: 1000px auto 1000px auto;

  .timeline {
    width: 50%;

    .ball1 {
      fill: #ff69b4;
    }
  }

  .text_timeline {
    width: 40%;
    @include flex(column, space-between);

    h3 {
      span {
        display: block;
        font-size: 0.8;
      }
    }

    .timeline_2,
    .timeline_3,
    .timeline_4,
    .timeline_5,
    .timeline_6 {
      display: none;
      opacity: 0;
    }
  }
}
timeline = new TweenMax.to(".timeline", 0.5, { scale: 1.2 });

var timeline_scene = new ScrollMagic.Scene({
  triggerElement: ".timeline_whole",
  triggerHook: 0,
  duration: 1000,
})
  .setPin(".timeline")
  .setTween(timeline)
  .addTo(controller);

var tl_timeline = new TimelineMax();

var timeline1 = tl_timeline
  .to(".timeline_1", 2, { opacity: 0 })
  .set(".timeline_1", { display: "none" })
  .set(".timeline_2", { display: "block" })
  .to(".timeline_2", 2, { opacity: 1 }) //
  .to(".timeline_2", 2, { opacity: 0 })
  .set(".timeline_2", { display: "none" })
  .set(".timeline_3", { display: "block" })
  .to(".timeline_3", 2, { opacity: 1 }) //
  .to(".timeline_3", 2, { opacity: 0 })
  .set(".timeline_3", { display: "none" })
  .set(".timeline_4", { display: "block" })
  .to(".timeline_4", 2, { opacity: 1 }) //
  .to(".timeline_4", 2, { opacity: 0 })
  .set(".timeline_4", { display: "none" })
  .set(".timeline_5", { display: "block" })
  .to(".timeline_5", 2, { opacity: 1 }) //
  .to(".timeline_5", 2, { opacity: 0 })
  .set(".timeline_5", { display: "none" })
  .set(".timeline_6", { display: "block" })
  .to(".timeline_6", 2, { opacity: 1 }); //

var timeline_scene_text = new ScrollMagic.Scene({
  triggerElement: ".timeline_whole",
  triggerHook: 0,
  duration: 1000,
})
  .setPin(".text_timeline")
  .setTween(timeline1)
  .addTo(controller);

var tl_timeline_ball = new TimelineMax();

var timeline_ball = tl_timeline_ball
  .to(".ball1", 1, { fill: "#E86B79" })
  .to(".ball2", 1, { fill: "#FF69B4" })
  .to(".ball2", 1, { fill: "#E86B79" })
  .to(".ball3", 1, { fill: "#FF69B4" })
  .to(".ball3", 1, { fill: "#E86B79" })
  .to(".ball4", 1, { fill: "#FF69B4" })
  .to(".ball4", 1, { fill: "#E86B79" })
  .to(".ball5", 1, { fill: "#FF69B4" })
  .to(".ball5", 1, { fill: "#E86B79" })
  .to(".ball6", 1, { fill: "#FF69B4" });

var timeline_scene_ball = new ScrollMagic.Scene({
  triggerElement: ".timeline_whole",
  triggerHook: 0,
  duration: 1000,
})
  .setTween(timeline_ball)
  .addTo(controller);

コード長めだけど結構整理されてると思うっ

村木 瞬Shun Muraki
Web Designer

Neutral between linear and non-linear.

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

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