10/7のAdvance Everyday

昨日のイラスト

昨日のスクリプト

今日から中間考査の２週間前くらいになる。

とりあえずAdvanceは一時停止させて、これまで勉強してこなかった分取り返しに行こうと思っている。

これまでは「SNSも全部消してずっと勉強せざるを得ない状況に身を置く」ことが一番の努力だと考えていたが、「正しい努力」というのはきっと、勉強は長く続かない、ということを見越した上である程度ブレイクタイムを儲けながら「勉強」というエッセンスを水で薄めてカルピスみたいに飲むことを言うんだと思う。

だからこそ、時々Advanceも進めながら、ただほとんどの時間を勉強に充てる２週間をスタートさせます。

辛い。

とにかく、辛い。

女の子から唐突にラインが来たりしたらモチベーションアップになるだろうに。

「お互い中間考査が終わったら遊ぼ！」

なんて言えた日には、僕が成績優秀者になる日も目前だろう。

CODING MANUAL

なんだかデザインもアニメーションも似通ってきてしまう。

これじゃインプットにもアウトプットにもならない。

きっとマンネリ化というのは何に置いても「作り手のインプットが滞っている状態」だと思う。

インプットの中からしかアウトプットはできないわけだから。

日々新しいインプットをしていかないといけなそうだ。

<div class="whitespace"></div>
    <div class="chat">
      <div class="set set_1">
        <div class="box"></div>
        <div class="text_chat text_chat1">
          <p>
            はぁ。。<br />
            なんて返ってくるのか、、<br />
            そもそも返信は来るのか？！
          </p>
        </div>
      </div>

      <div class="set reverse set_2">
        <div class="box"></div>
        <div class="text_chat text_chat2">
          <p>
            うーーーーーわ！！<br />
            なんか連絡きた☆<br />
            死ぬほど嬉しいねんけど！
          </p>
        </div>
      </div>

      <div class="set set_3">
        <div class="box"></div>
        <div class="text_chat text_chat3">
          <p>
            やったぁっ！<br />
            当日楽しみ！！
          </p>
        </div>
      </div>

      <div class="set reverse">
        <div class="special">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 562.5 488"
            class="svg_heart"
          >
            <defs>
              <style>
                .cls-1 {
                  fill: none;
                }
                .cls-2 {
                  clip-path: url(#clip-path);
                }
                .cls-3 {
                  fill: #e86b79;
                }
                .cls-4 {
                  fill: #fff;
                  stroke: #e86b79;
                  stroke-miterlimit: 10;
                  stroke-width: 5px;
                }
                .cls-5 {
                  clip-path: url(#clip-path-2);
                }
              </style>
              <clipPath id="clip-path" transform="translate(-205 -65)">
                <rect class="cls-1" x="234" width="531" height="309" />
              </clipPath>
              <clipPath id="clip-path-2" transform="translate(-205 -65)">
                <rect class="cls-1" y="309" width="624" height="342" />
              </clipPath>
            </defs>
            <g id="レイヤー_2" data-name="レイヤー 2">
              <g id="レイヤー_1-2" data-name="レイヤー 1">
                <g class="cls-2">
                  <polygon
                    class="cls-3 hurt"
                    points="1 470 530 33 496 0 560 0 560 82 541 63 34 488 1 470"
                  />
                </g>
                <path
                  class="cls-4"
                  d="M748.53,215.17s-139.41-148.89-216.87,0c0,0-123.92-148.89-193.63,0,0,0-74.87,227.12,206.54,302.83C544.57,518,836.31,389.3,748.53,215.17Z"
                  transform="translate(-205 -65)"
                />
                <g class="cls-5">
                  <polygon
                    class="cls-3 hurt"
                    points="0 470 529 33 495 0 559 0 559 82 540 63 33 488 0 470"
                  />
                </g>
              </g>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="whitespace"></div>

.whitespace {
  height: 100vh;
}

.chat {
  @include inner;
  max-width: 350px;
  overflow: hidden;

  .set {
    margin: 0 auto 60px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .box {
      margin: 0 0 20px 0;
      width: 55%;
      height: 42px;
      border-radius: 21px;
      @include original_back;
      overflow: hidden;
    }

    .text_chat {
      width: 70%;

      p {
        font-size: 0.6rem;
      }
    }

    .special {
      width: 80%;
      overflow: hidden;

    }
  }

  .reverse {
    align-items: flex-end;

    p {
      text-align: right;
    }
  }
}

var tl_heart = new TimelineMax();


//最後のハートをアニメーション
var tl_heart_hurt = tl_heart
  .from(".svg_heart", 0.3, { opacity: 0 })
  .from(".svg_heart", 0.3, { scale: 0.8 })
  .from(".hurt", 0.3, { opacity: 0 });

var heart_whole = new ScrollMagic.Scene({
  triggerElement: ".special",
  triggerHook: 0.4,
})
  .setTween(tl_heart_hurt)
  .addTo(controller);


//　１つ目のチャットボックスに対してアニメーション
var tl_chat1 = new TweenMax.from(".text_chat1", 0.5, { x: -200 });

var heart_chat1 = new ScrollMagic.Scene({
  triggerElement: ".set_1",
  triggerHook: 0.7,
})
  .setTween(tl_chat1)
  .addTo(controller);


//　１つ目のチャットボックスにおける心情表現を表示するアニメーション
var tl_chat1_op = new TweenMax.from(".text_chat1", 0.5, { opacity: 0 });

var heart_chat1_op = new ScrollMagic.Scene({
  triggerElement: ".set_1",
  triggerHook: 0.7,
})
  .setTween(tl_chat1_op)
  .addTo(controller);


//　2つ目のチャットに対してアニメーション
var tl_chat2 = new TweenMax.from(".text_chat2", 0.5, { x: 200 });

var heart_chat2 = new ScrollMagic.Scene({
  triggerElement: ".set_2",
  triggerHook: 0.6,
})
  .setTween(tl_chat2)
  .addTo(controller);

//　2つ目のチャットボックスにおける心情表現を表示するアニメーション
var tl_chat2_op = new TweenMax.from(".text_chat2", 0.5, { opacity: 0 });

var heart_chat2_op = new ScrollMagic.Scene({
  triggerElement: ".set_2",
  triggerHook: 0.6,
})
  .setTween(tl_chat2_op)
  .addTo(controller);


//　3つ目のチャットボックスに対してアニメーション
var tl_chat3 = new TweenMax.from(".text_chat3", 0.5, { x: -200 });

var heart_chat3 = new ScrollMagic.Scene({
  triggerElement: ".set_3",
  triggerHook: 0.5,
})
  .setTween(tl_chat3)
  .addTo(controller);


//　3つ目のチャットボックスにおける心情表現を表示するアニメーション
var tl_chat3_op = new TweenMax.from(".text_chat3", 0.5, { opacity: 0 });

var heart_chat3_op = new ScrollMagic.Scene({
  triggerElement: ".set_3",
  triggerHook: 0.5,
})
  .setTween(tl_chat3_op)
  .addTo(controller);

昨日のイラスト

昨日のスクリプト

CODING MANUAL

カテゴリー

メニュー