デザイン

【js】いろいろ駆使してローディングを作ってみた

デモページ

↑こんな感じのローディングイメージを作るのに四苦八苦したので備忘録的に書きます。

いろいろな動きが重なっているので、複数の処理を順番にやっていけばいいかなと思って、$when().done“Velocity.js”を使ってなんとかしました。

Velocity.jsの使い方!かなり参考!

animetionを順番に処理するメソッド

Velocity.jsで拡大の動きをなめらかにするために搭載

これがないとsvgでも拡大するときギザギザしちゃう

https://liginc.co.jp/web/js/jquery/150136

easingなど動きについて

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/