デザイン
【WEB design】2020年5月参考にしたいインタラクティブサイト
さりげないパララックスとか素敵
![](http://butsuyoku.hirababa.com/wp-content/uploads/2020/05/Screenshot_2020-05-12-5S-1024x532.png)
レイアウトと配色が印象的
![](http://butsuyoku.hirababa.com/wp-content/uploads/2020/05/fbbde9e7a25b87981973911d3e27db47-1024x595.png)
【js】いろいろ駆使してローディングを作ってみた
↑こんな感じのローディングイメージを作るのに四苦八苦したので備忘録的に書きます。
いろいろな動きが重なっているので、複数の処理を順番にやっていけばいいかなと思って、$when().done“Velocity.js”を使ってなんとかしました。
animetionを順番に処理するメソッド
Velocity.jsで拡大の動きをなめらかにするために搭載
これがないとsvgでも拡大するときギザギザしちゃう
https://liginc.co.jp/web/js/jquery/150136
easingなど動きについて
拡大について
実際使わなかったけど参考にしたもの
【コーディング】新しくサイトをコーディングに参考にさせていただいたサイト
HTML5の基本テンプレ
https://qiita.com/Y_ASAMOTO/items/90afe7d24467020c17f0
XDからソース取り出し
XDで画像書き出し
https://sinap.jp/blog/2016/12/adobe-xd-export.html
スクロールに応じてヘッダーが変化(固定&変化など)
ホバーエフェクト
改めてclearfixなど(今回使わなかったけど、、)
cssのcontentに画像を指定したい時
.list_item a::after {
content: url(./arrow.png);
display: inline-block;
vertical-align: middle;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
contentで追加した画像にはサイズを指定することができません。
そのため、サイズを変更したい場合はtransformプロパティのscale()で拡大・縮小させます。
Slick Sliderのカスタマイズ
https://webdesignday.jp/inspiration/technique/jquery-js/3847/
Tggleメソッドの使い方
https://qiita.com/sunnyG/items/faf1821ae09820e30ce8
ハンバーガーメニュー
https://www.webopixel.net/javascript/1483.html
フル画面メニューでスクロールさせる方法
jquery css追加メソッド
https://qiita.com/kazTera/items/ab5dd9fb5b2579b25c4d
SSIの設定 .htaccess
https://qiita.com/yoshida-hi/items/4909c578b098f172efdb
検索バーのデザイン
https://kagesai.net/search-form-design/https://kagesai.net/search-form-design/
【UI/UX】UI改善に役立つ「UI Stack」ってUI の5つの側面
![](http://butsuyoku.hirababa.com/wp-content/uploads/2020/02/picture_pc_348a6e272432c453f710e52539b03229-1024x510.jpg)
・Blank State(空っぽの状態)
・Loading State(ローディング状態)
・Partial State(部分達成状態)
・Error State(エラー状態)
・Ideal State(理想状態)
【XD】Adobe XD入門!
https://chot.design/adobe-xd-beginner/
2020年XDの機能をわかりやすく解説