クリスタ中級編：前編

こんにちは、もなです。

コードステップ中級編も全て終わらせることができ、
12月10日から14日までクリスタ中級編にチャレンジしました。
初級編はレスポンシブ込みで3時間半程で完成しましたが、中級編はJQueryも使うとあって、難しそうなイメージ。
果たして完成させることが出来るのか不安を少し抱えながらも、分からないところはググりながら取り組みました。

ググったところ・勉強になったところ

1.スクロールするとヘッダーの背景色が変わるJQuery

XDカンプを見て、「headerは固定で、fvを過ぎると、#282F35の背景色がつく。」といきなり書いてあって、「fv……？」となりました（笑）
どうやらfirstviewの略だそうです。

スクロールするとヘッダーの背景色が変わる、つまりJQueryですね！
ググって調べながら実装することができました。
以下は今後の自分の為にも残しておきます。

【HTML】
  <header id="header">
   <div class="header-inner">
     <h1　class="title"><a href="#">Cresta Design</a></h1>

     <nav id="navi">
       <ul>
         <li><a href="#concept">Concept</a></li>
         <li><a href="#service">Service</a></li>
         <li><a href="#works">Works</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </nav>
     
    <!-- /.header-inner -->
 </header>
 
 <section class="mainvisual">
 /* 略 */
 </section>
 <!-- /.mainvisual -->



【CSS】
/* アニメーション（動き）を付ける */
#header {
transition: background-color .5s, color .5s; 
}

/* headerの色を変える */
#header.change-color {
 background-color: #282f35;
 
 
 
 【JQuery】
// headerをスクロールすると、色が変わる
  
$(function () {
 $(window).on('scroll', function () {
   if ($('.mainvisual').height() < $(this).scrollTop()) {
     $('#header').addClass('change-color');
   } else {
     $('#header').removeClass('change-color');
   }
 });
 }); 
 

①mainvisualクラスの高さ以上までスクロールした時に、headerに対して「.change-color」クラスを付けます。

②すると、#282F35の背景色が付きます。

③そして、mainvisualクラスの高さまでスクロールしていない場合は、「.change-color」クラスを外すので、#282F35の背景色が消えます。

2.slick
カルーセルスライダーのプラグイン「slick」を初めて使いました。
プラグインをダウンロードして、VSコードにファイルを入れて、CSSやJSと連動させる準備からスタート。
全てじゅんぺいさんのブログを参考にしました。

公式サイトからの導入方法はもちろん、様々なオプション・カスタマイズ方法がサンプルデモと一緒にわかりやすく紹介されていて、とてもスムーズにslickを動かすことができました。
スライダーが実装されるとサイトができた感があって良いですね♪　
じゅんぺいさん、とってもとっても分かりやすい記事をありがとうございます！！
この場を借りてお礼申し上げます。

【参考サイト：じゅんぺいブログ】https://junpei-sugiyama.com/


初めてのことを扱うときはドキドキするけど、調べて実際にコードを書いて、パソコン上で動くところを見るととても嬉しいですね。
長くなりましたので、続きは次回の「後編」で書きます。