昨日のイラスト
昨日のスクリプト
最近朝にスマホのアラームをベッドの隣で鳴らしているので、家を出るタイミングでは充電が20%しかない、みたいな日が続いていて、電車の中でもスマホをいじらずに本を読んでいたりするんですね。
それで感じたのは「スマホ触ってる時間って目に入る情報は多いんだけど何にもなってないな」ってこと。
すごいもったいない時間の過ごし方だし、僕のリスペクトしてる同級生の友達とかはスマホを家から持って出ないという習慣をつけてて、僕もそれ真似しようかしらなんて思ってる今日この頃。
CODING MANUAL
今日はずっと作ってみようと思っていた「クローズアップからの切り替え」を作ってみました。
これ、AppleのWebサイトであったりしますよね。それを丸々参考にしました。笑
ポイントはいつもと違ってScrollMagicの「setPin」と「duration」を使い、よりスクロールと合わせた動きをさせたところです！
<div class="whitespace">
<div class="phone_advance">
<div class="img phone_scale">
<img src="svg/advance_phone.svg" />
</div>
</div>
</div>
<div class="text">
<p>
僕の勝手な感覚ですが、大して結果も出していない低空飛行の状態でコロコロとやることなすことを変えていくのはちょっとダサい気がしていて、だからこのSpillは「ビジネス」みたいな側面を持たせずに「作品」という位置づけで留めたいと思ってます。
SOSOでビジネスとしての結果を出すために、このSpillを楽しみながら進めていこうって感じ。
それでは、Spillなんてカッコいい名前を付けといて何をするかが大事でしょというツッコミに答えます。
</p>
</div>.whitespace {
margin: 1000px auto 100px auto;
position: relative;
overflow: hidden;
.img {
width: 50%;
display: block;
margin: auto;
}
}
.text {
color: #fff;
max-width: 350px;
display: block;
margin: 0 auto 500px auto;
padding: 0 10px;
}const phone_scale = new TimelineMax();
var advance_phone = phone_scale
.to(".phone_scale", 1, {
ease: Power3.linear,
width: "200%",
})
.set("body", { backgroundColor: "#E86B79" })
.set(".phone_advance", { display: "none" });
var pin_phone = new ScrollMagic.Scene({
triggerElement: ".phone_advance",
triggerHook: 0,
duration: 500,
})
.setTween(advance_phone)
.setPin(".phone_advance")
.addTo(controller);