昨日のイラスト
昨日のスクリプト
Web制作のスキルがあるといいこととして、「どこでもプロダクトを誰の手元でも見せられる」という点がありますよね。
これ、結構大事だと思ってて、今日も僕が何をしているのかという話題になり、学校で配布された友達のiPadで「advance.love/week1」と入力してアクセスするだけで、自分の力をリアルな距離感で感じてもらえたんですね。
「うわぁ、自分が手ぶらでも自分のことを知ってもらえるのってすごいことやな」
と感心してなおさらWebデザインが大好きになった一日でした。
CODING MANUAL
相変わらずイラストが雑だぁ…
今回も相変わらずScrollMagicとTweenMaxですが、昨日とは異なりTimelineMaxを使ってます。
というのも今回のテーマが「シーンがスクロールで進むにつれて固定された月の満ち欠け
が進んでいく」というアニメーションの実装で、「background-image」のすり替えをスムーズに、違和感なく行うことが必要だったからです。
ここは僕自身昔詰まったところで、というのもbackground-imageをすり替えるのって、transitionが効かないんです。
JavaScriptでも変更できないことはないようですが、自然な変化をさせるためにひと工夫必要だったのでシェアします！
const changemoon2 = new TimelineMax();
var changeMoon2 = changemoon2
.to(".fixed_moon", 0.2, {
ease: Power3.linear,
opacity: 0,
})
.set(".fixed_moon", { className: "-=moon1" })
.set(".fixed_moon", { className: "+=moon2" })
.to(".fixed_moon", 0.5, { ease: Power3.linear, opacity: 1 });
var sceneChangeMoon = new ScrollMagic.Scene({
triggerElement: ".object_moon2",
triggerHook: 0.2,
})
.setTween(changeMoon2)
.addTo(controller);
const changemoon3 = new TimelineMax();
var changeMoon3 = changemoon3
.to(".fixed_moon", 0.2, {
ease: Power3.linear,
opacity: 0,
})
.set(".fixed_moon", { className: "-=moon2" })
.set(".fixed_moon", { className: "+=moon3" })
.to(".fixed_moon", 0.5, { ease: Power3.linear, opacity: 1 });
var sceneChangeMoon = new ScrollMagic.Scene({
triggerElement: ".object_moon3",
triggerHook: 0.2,
})
.setTween(changeMoon3)
.addTo(controller);鍵は「CSS」です！
今回、スタイルをこんな感じに書いています。
.fixed_moon {
position: fixed;
bottom: 20px;
right: 20px;
width: 70px;
height: 70px;
background-size: contain;
background-repeat: no-repeat;
}
.moon1 {
background-image: url("svg/moon1.svg");
}
.moon2 {
background-image: url("svg/moon2.svg");
}
// 省略
.moon11 {
background-image: url("svg/moon11.svg");
} .set(".fixed_moon", { className: "-=moon1" })
.set(".fixed_moon", { className: "+=moon2" })ここの記述によって、スタイルで予め書いておいたクラス名をつけたり外したりしています。
そして、background-imageをすり替える際は、がたつきを隠すために一度opacityを0まで下げて、次にクラスを付け替えてから再度opacityを1にすることで滑らかな変化を実現させてます。
我ながらいい書き方。