PRODUCT: https://advance.love/week1
今回の「Week1」はAdvanceの最初のプロダクトで、つくりながらどんなことができるかを考えてコーディングしていくような進め方をしました。
イラストをIllustratorで描くのも初めてだったし、アニメーションやコーディングを想定した描き方もしなかったのでまず１つ反省。
このブログ記事ではAdvanceの「コーディング」を振り返る内容にしようと思っていて、その書き方が正しいかどうかは正直僕は分からないです。
なので「あー、これってそういう書き方をしてたんや」「こういう書き方もできるんだ」といい具合に参考にしてもらえたら嬉しいです！
それではっ
全体の構成
ファイル構成
- index.html
- images – 画像素材（jpg、png）
- javascript – index.js
- scss – _content.scss、mixin.scss
- svg – 画像素材（SVG）
- style.scss
- style.css
ファイル構成はこんな感じになってます。
エディタはVisual Studio Codeを使っていて、拡張プラグインの「Live Sass Compiler」でSASSを書いています。
AdvanceはSVG素材がメインのコンテンツなので、Illustratorでイラストを描いてからそれをsvg形式で書き出して「svg」というフォルダに格納しています。
また、「scss」フォルダの中に「_contenet.scss」と「_mixin.scss」がありますが、
_content.scssのindex.htmlのスタイルを書いているもので、
_mixin.scssにSASSの便利な書き方「mixin」をまとめています。
ファイル名に「_」をつけることで、style.scssに
@import "./scss/mixin";
@import "./scss/content";と記述してstyle.cssにコードを書き出してくれる仕組みです。
セッティング
リセットCSS
スタイルを書く中で「なんでここに余白できちゃうの？」「margin: 0; にしてるんだけどなぁ」といろいろ思うようにいかないことがよくあります。
そんな悩みを解決してくれるのが「リセットCSS」で、これをコピペで使うことにより、意図しない挙動を防いでいます。
参考ページ: https://meyerweb.com/eric/tools/css/reset/
/* <http://meyerweb.com/eric/tools/css/reset/>
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}フォント
Webデザインをする上でフォントがかなり大事だということを最近になって意識するようになり、現時点ではGoogle Fontsしか利用したことがないのですが、今後MorisawaだったりAdobe Fontkitを活用していこうと思っています。
今回用いたのは「Noto Sans JP」と「Lato」、「Shadows Into Light」です。
@mixin Lato {
font-family: "Lato, sans-serif";
}こんな具合でmixinにして効率化したかったこともあり、特に意味はありませんが _mixin.scss の「@import」でそれらを読み込みました。
これもSASSの強みみたい！
@import url("<https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap>");CSSライブラリ
いつもindex.htmlの<head></head>内にAnimate.cssを読み込ませています。
<link rel="stylesheet"
href="<https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css>"
/>JavaScriptライブラリ
アニメーションだったりパララックス だったり、Webページに動きを与える際に何も考えずにすぐコードをかけるよう、必要か否かに関係なく、とりあえず最初にJavaScriptライブラリのCDNをまとめて</body>タグの直前にコピペしているものがこちら。↓
<script src="<https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js>"></script>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/rellax/1.9.1/rellax.min.js>"></script>
<script
src="<https://code.jquery.com/jquery-3.5.1.js>"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<script src="<https://cdn.jsdelivr.net/scrollreveal.js/3.0.3/scrollreveal.min.js>"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="javascript/index.js"></script>最後の「<script src=”javascript/index.js”></script>」はオリジナルでjavascriptフォルダに格納してあるファイルなので、それ以外が僕が普段使っているCDNたちになります。
上から
- wow.js – もともとanimate.cssをスクロールと連携させるために使っていましたが、最近はanimate.css単体でスクロールアニメーションができるらしく、その書き方を学んで次第、出番がなくなっちゃうかも
- Rellax.js – 簡単にパララックスを実装できるライブラリ。理由はないけど個人的に推し
- jQuery – JavaScriptライブラリはjQueryに依存するケースが多いので読み込んでおくべし！
- ScrollReveal.js – 要素を画角に入ったタイミングでアニメーションさせる、手軽でリッチなライブラリ
- ScrollMagic – スクロールに応じたアニメーションを実装する際に使います
- TweenMax – ScrollMagicと相性の良い最高のアニメーションライブラリ（超大好き）。TimelineMaxもここに含まれます。
イメージのアニメーション
パララックス を採用しなかった理由
個人的にパララックスが素敵なサイトを見ると「うわぁ、すき。」ってなるんですが、今回Advanceではこのパララックス 効果を使いませんでした。
普段なら先ほどのRellax.jsを大いに活用したいところだったのですが、このAdvanceがモバイルファーストで書いていくこともあり、アニメーションの自然さだったりヌルヌル感みたいなものを大事にしたかったんですね。
そこで１つ問題が生じたのが「スマホで見るとパララックスにがたつきが出る問題」でした。
PCで見る分には全く問題がない一方、スマホでスクロールをさせると細切れながたつきが出てしまって、これはどうしたものかと他のパララックスサイトをいくつが見てみたところ、スマホではどれもパララックス をさせていないことが判明しました。
PCでのスクロールに比べてスマホのスクロールは数値の取得が難しいのでしょうか（分からなくてごめんなさいっ）。
今回は他のサイトに習って、まず「スマホではパララックスを使わない」と決めました。
ただ、もう１つの問題が浮上してきて、最終的にはPCでもパララックスを使わず、完全にRellax.jsの役目がないままになってしまいまして、それは「ScrollMagicとパララックスの相性がよくなかった」ことが原因です。
例えば、
const tl7 = new TimelineMax();
tween7 = tl7
.from(".number_m", 0.5, { scale: 4 })
.from(".number_other", 0.3, { opacity: 0 });
var scene7 = new ScrollMagic.Scene({
triggerElement: ".mail_svg",
triggerHook: 0.5,
})
.setTween(tween7)
.addTo(controller);こんなコードを書いた時に、スクリーンの中心に要素がきた時、アニメーションを起こすことになっていますよね。
ただ、この「<div class=”mail_svg”></div>」に
<div class="mail_svg rellax" data-rellax-speed="-1"></div>などのパララックスをつけていた場合、一度ScrollMagicで設定した中央を通過した後、要素が下に下がっていってしまうので、すぐにアニメーションさせた後の状態からすぐ元に戻ってしまったんです。
スクロールに合わせて要素が動く前提でアニメーションを組んでいるので、スクロールとは別に要素が移動してしまうとすごく大変になっちゃうということで、今回はとりあえずパララックスの導入をしないことにしました。
SVGの活用
今回のAdvanceでは、SVGのアニメーションをたくさん取り入れたわけなんですが、「複数のSVGごとにアニメーションさせる」「色を変更する」「１つのSVGの一部をアニメーションさせる」の３つについて、現時点で僕が知っている実装の仕方を最後にシェアします。
（これもまた信憑性がない…）
「複数のSVGごとにアニメーションさせる」
これは通常通りScrollMagicとTweenMaxを使えば簡単に実装できます。
例えば
このアニメーションでは、まず右にあるタンブラーに対してrotationを指定して、その次に真ん中の水のopacityを0から1へ変化させ、最後にPCのopacityを少し下げながらscaleを小さくすることで実装しています。
TimelineMaxがすごい便利。
const tl1 = new TimelineMax();
tween1 = tl1
.to(".tumblr", 0.5, { left: "-=30%" })
.to(".tumblr", 0.5, { scale: 1.4, rotation: -45 })
.from(".water", 0.5, { scale: 0.5, opacity: 0 })
.to(".pc", 1, { scale: 0.95, opacity: 0.7 });
var scene1 = new ScrollMagic.Scene({
triggerElement: ".pc", // 要素の指定
triggerHook: 0.3, // トリガーのスクロール位置指定。onEnter, onLeaveの指定が可能
})
.setTween(tween1) // Tweenアニメーション指定
.addTo(controller); // コントローラへ追加
const tl2 = new TimelineMax();こんな感じ。
「色を変更する」
これもJavaScript側で書くのですが、HTMLでSVGの表示のさせ方を少し変える必要があります。
僕は最初に全てのSVGを
<img src="svg/camera.svg" class="camera" />と<img>タグで表示していたのですが、SVGの色を変更したりするためには、<svg>タグで記述してあげる必要があるそうです。
<div class="svg">
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1130.63 540.37">
<defs>
<style>
.cls-1 {
fill: #2c2c2c;
}
</style>
</defs>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="描画レイヤー">
<path
class="cls-1 svg_colorchange"
d="M174.75,117.46a75.89,75.89,0,0,0-8.52.87c-3.58.47-7.15,1-10.72,1.53A170.83,170.83,0,0,0,124,127.53a252,252,0,0,0-33.26,1
<-- 省略 -->
3.3,48.52,48.52,0,0,0-9.87-1.08Zm8.72,24.28h0l0,0,0,0ZM130.32,443.92c-1.63.7-3.25,1.4-4.89,2.07l4.89-2.07Z"
/>
</g>
</g>
</svg>
</div>コードが長くなってしまって見づらいのですが、Vidual Studio Codeの拡張プラグイン「Prettier」を有効化しておくと上のように<path>で整理してくれるので、細かいクラスの付与をする際にすごくわかりやすかったです！
もともとは<path>タグに「svg_colorchange」というクラスはついていなかったのですが、他のSVGとは別に固有のクラスを持たせることでTweenMaxで色の変更を指定することができます。
（cls-1 みたいなクラス名は他のSVGでも使われてたりするので）
「１つのSVGの一部をアニメーションさせる」
このストローが傾くアニメーションとかは、左の全体のグラスのSVGを上記と同様に<svg>タグで書いた後にストローをつくっている線の<path>にだけ名前をつけて、そのクラスに対してrotationを指定しています。
ただ、僕は「どのpathがストローを描いてるのか」を見つけるのに苦労したので、何か良い方法がないか模索してみます。
ちなみに今回はGoogle Chromeの「検証ツール」を用いて、対象のSVGをハイライトした後、コードを１つ１つ上からなぞっていき、対応している<path>に対してエディタからクラスをつけました。
今回の反省と展望
ここまでざざっと振り返りをしてきたのですが、illustratorで描く絵をもっとこんな適当なものではなく、魅力的なものにすることと、アニメーションを想定した設計にするべきだったと思いました。
そして、今回はところどころで出てくるSVGそれぞれにアニメーションを充てるようなつくりになりましたが、今後はスクリーン全体に対するアニメーション（「落ち込んだ」みたいな描写の際にダークモードみたいな表示に変化させる、背景のアニメーション、など）を実装して、もっとシネマティックな記事を実装したいと考えていますので、次回以降も温かく見守っていただけたら嬉しいです！
冒頭にも書きました通り、僕はまだまだ知識不足で、部分部分で間違った情報だったり非効率な書き方をしてると思います。
今後その内容に関しては、今後のブログ記事にて「この時のブログで書いたこれは間違ってました！！ごめんなさい！！」といった形で訂正していこうと思いますのでご理解いただけたら幸いです。
最後まで長くありがとうございました！
