こんにちは！最近はなんと！コーポレートサイトを楽しく作成中です?それに当たって、今回はたくさん新しい機能を追加してみたので、実装内容をメモして残しておこうと思います。

スムーススクロール

こちらは比較的簡単にできます。 #で始まるアンカーをクリックした場合に処理します。大体どのサイトにも適用させています。やっぱり、アニメーションがあるだけでページがリッチに見えるので。

$(document).ready(function(){
$(function(){
// #で始まるアンカーをクリックした場合に処理
$(‘a[href^=”#”]’).click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr(“href”);
// 移動先を取得
var target = $(href == “#” || href == “” ? ‘html’ : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$(‘body,html’).animate({scrollTop:position}, speed, ‘swing’);
return false;
});
});
});

条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。この演算子は、 if 文のショートカットとしてよく用いられるのですが最初なんのことなのか全く訳がわかりませんでした…..

構文は「condition ? exprIfTrue : exprIfFalse」で、if文で以下のように表せます。

if (条件式) {
//Trueの処理
} else {
//Falseの処理
}

ローディング画面

サイト読み込みが終わるまでを、ローディングアニメーションを表示することで離脱を防ぎます。参考にしたのはこちらのサイトです。シンプルなデザインが多く、実装も簡単なのでおすすめ。

↓

https://connoratherton.com/loaders

スライダー-bxslider

slickよりもbxsliderの方が使いやすい！と思いました?どっちも使って見ての感想です。スライドを真ん中に出現させるには、要素をwidthは33%にしては細すぎるので、適宜50%とかにしておいて、スライドの中心がずれている場合はスライド間のマージンを調整するのではなく、スライド全体を-マージンでずらして真ん中に持ってくればOK！

ここはずっと自分の中で解決策が見つからないポイントだったので今回見つけられて安心しました。よかったー！

ヘッダーカラー変更アニメーション

MVスクロール後にヘッダーのロゴ、ナビゲーション、背景カラーの変更。スクロールの画面縦幅でクラス名「.scroll」を付与。

クラス付与によりCSSでカラー変更などを指定しました。

インビュー出現

スクロールに合わせて要素を下から上に出現させる。

こちらも「.scroll」付与でopacityとtransformを指定する。

.fadein {
opacity : 0;
transform : translate(0, 50px);
transition : all 300ms;
}
.fadein.scroll {
opacity : 1;
transform : translate(0, 0);
}

フェードインで表示させたい要素に対して「.fadein」を付与しておき、スクロールに合わせて、「.scroll」を追加。元々の「.fadein」要素には予め、opacity0、transform 50pxを指定しておき、scrollで本来のtransform 0pxに戻すよう指示。

transition 300msでアニメーションの時間を指示している。transitionは、元々の要素に対して指示すればOK。transformとtransitionはセットなので、要注意！??です。

スマホハンバーガーメニューアニメーション

参考にしたのはこちら。

元々のデザインは右から出現するタイプなので、CSSのアニメーションプロパティで調整した。複雑なアニメーションに見えるけど、実際はCSSだけで表現してる。

前後の設定例↓

左からみぎに移動する。
前）transform: translate(-100vw, 0); まずは左に隠れてる。
後）transform: translate(0, 0); チェックされたら、これが出てくる！

丸く動くアニメーションも、

前）bottom-top-radius: 100vw; 丸から
後）bottom-top-radius: 0; 四角に。

check前後のtransformを書いておいて、transitionで動きと時間を設定するだけ。

transition: transform 1s 0.08;
cubic-bezier( 0.29, 1.4, 0.44, 0.96);

でチェック有無で設定してあり、そのアニメーションはtransitionで動き方、時間を決めるだけ。transformとtransitionはいつでもセットです！transition自体は、適用するものはtransformだけでなく、colorなど色々あるので他にも検証してみたいと思います。

<input id=”hamburger” class=”hamburger” type=”checkbox”/>

こちらのチェックボックスの有無でメニューの出現を制御。ハンバーガーメニューの位置は、右上よりも左下にボタンとして配置した方がやりやすいので、アレンジしました。Vogue GIRLのホームページを参考にしましたが、これは中々いいUIだと思っています??

https://voguegirl.jp/

メニュークリックでナビ閉じる

$(function(){
$(“.drawer-list li a”).on(“click”, function (evt) {
//チェックボックスの現在のステータスを取得
chk_status = $(“#hamburger”).prop(“checked”);

//取得したステータスが true なら false を、 false なら true をセットする
if(chk_status){
//チェックボックスをOFFにする（チェックを外す）。
$(“#hamburger”).prop(“checked”, false);
}else{
//チェックボックスをONにする（チェックする）。
$(“#hamburger”).prop(“checked”, true);
}
});
});

メニューのaタグをクリックしたら、という条件で指示を進めます。

チェックボックスのチェックの有無でナビゲーションの開閉を決めるので、prop(‘checked’)でプロパティ内容を確認。チェックされてるなら、OFFに、されてないならONにするという指示。

https://bayashita.com/p/entry/show/22

「prop()」とは？

「prop()」はHTML要素に付与されている「id・class・name」…などの属性や、「checked・selected」…などのプロパティを取得できます。特によく使われるのが、フォームをjQueryで操作する時に必須となる「checked」などのプロパティを扱うケースです。なので、ヘッダーの時によく使う！

デザイン

今回はモノトーンを基調に、ロゴのみレッドを使用。基本的にはモノトーンでまとめるとすっきりきれいにまとまります。これまで色を濫用しすぎていたのですが、シンプルがやはり落ち着きますし、洗練されて見えますね。

SVGロゴ

イラレで作成できる。アウトライン化して、SVGでコード化すれば、後からいくらでも色やサイズが変更できるので便利！

ヘッダーの時のロゴ変更も、容易い！ので、SVGはどんどん使用していけたらいいです。

コーディング記法

記法は今のところまだ定まっていないので、まだまだいろんなサイトを見てどんな書き方がいいのか検証中です。ですが、やはりきちんとしたコーディングを構築していくには、デザイン画に書き込みながらまずはかなりの時間、情報整理に費やす必要があると思います。何も考えずに初めからコーディングしていくと、後から想定外のクラス名をなんの脈絡もなくつけてしまうようになり、本当にぐちゃぐちゃになってしまうので…..うわあ〜！

ということで、今回のコーポレートサイトではいろんなアニメーションや、技術を組み込んでみました！シンプルなサイトでも、アニメーションを少し取り入れるだけでとてもリッチな見た目になることがわかってとても楽しかったです！それと、色を使わないだけでこんなに洗練されて見えるのがやっと実感できました。

余白の使い方も、だんだんとわかるようになってきて、これまで文字詰、行間などについても適当だったのですが、それこそがデザインをダサくする元凶だったことにも気付きました、、、。

これを元にまたまたパワーアップしていきます！アニメーション、jQueryのライブラリももっと色々と探索してみようかと思います?はあ、楽しい………

では！?