昨日のイラスト
昨日のスクリプト
とにかく今日は家に帰ってからが大変だった。
とある依頼が来ていて、それに答えるべくこの「Advance」に関するドキュメントを急遽まとめなきゃいけないことになり、家についてすぐに作業を始めた。
具体的にはAdvanceのHPをある程度整えたりファビコンの設定、テキストの編集やイラストの作成などをしたのだが、これらは「３日後にはできていたらいいね」レベルのもので、ずっと後回しにしていたから、今回こうして急いで作る機会がくると精神的にはかなり辛いけど、その時間がガッツリ凝縮されて大きな前進をもたらしてくれるからすごく個人的にはウェルカムだなと感じた。
これからも「Advance」という名前に負けないよう、猛スピードで前進し続ける。
CODING MANUAL
今回も前回同様「前から作ってみたかったシリーズ」の第二弾。
背景に要素をつけてスクロールに応じて移動させたり大きくしたりする作業をしてみた。
もっと工夫のしようはあるが、ちょっと疲れていたので勘弁。。笑
const tweet = new TimelineMax();
var tweet_forcus = tweet.to(".svg_back", 0.5, {
ease: Power3.linear,
right: "-=150px",
bottom: "-=150px",
});
var Tweetscene = new ScrollMagic.Scene({
triggerElement: ".text_advance",
triggerHook: 0.5,
})
.setTween(tweet_forcus)
.addTo(controller);<div class="whitespace">
<div class="text_advance">
<div class="svg_back">
<img src="svg/twitter_feed.svg" />
</div>
<p>
僕の勝手な感覚ですが、大して結果も出していない低空飛行の状態でコロコロとやることなすことを変えていくのはちょっとダサい気がしていて、だからこのSpillは「ビジネス」みたいな側面を持たせずに「作品」という位置づけで留めたいと思ってます。
SOSOでビジネスとしての結果を出すために、このSpillを楽しみながら進めていこうって感じ。
それでは、Spillなんてカッコいい名前を付けといて何をするかが大事でしょというツッコミに答えます。
</p>
</div>
</div>.whitespace {
margin: 1000px auto 1000px auto;
position: relative;
overflow: hidden;
.svg_back {
width: 100px;
position: absolute;
z-index: -1;
opacity: 0.3;
}
}