昨日のイラスト
アイコンたちはここからダウンロードしたものを使っています。
昨日のスクリプト
「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);