jquery
【jquery】ヘッダー固定でスクロールヒントを表示させる方法
【js】いろいろ駆使してローディングを作ってみた
↑こんな感じのローディングイメージを作るのに四苦八苦したので備忘録的に書きます。
いろいろな動きが重なっているので、複数の処理を順番にやっていけばいいかなと思って、$when().done“Velocity.js”を使ってなんとかしました。
animetionを順番に処理するメソッド
Velocity.jsで拡大の動きをなめらかにするために搭載
これがないとsvgでも拡大するときギザギザしちゃう
https://liginc.co.jp/web/js/jquery/150136
easingなど動きについて
拡大について
実際使わなかったけど参考にしたもの
【jquery】超簡単！tableの指定セルを固定してスクロールさせるプラグインfixed_midashi
使い方
https://blog.apar.jp/program/4342/
fixed_midashiのズレを解消するにはbox-sizingを解除する
https://qiita.com/nbfujiwara/items/271d04e64f579e8ac1f2
ダウンロード↓
【jquery】slickなどでページ表示毎にランダムに開始スライドを設定する方法
slickオプションの初期表示指定の
initialSlide:○
に数値をランダムに入れるメソッドを使う
var seed = Math.random();
var randKv = seed ? Math.ceil(seed * 3 ) – 1 : 0;
seed*3←この数字が全体のスライド数
「0」が1枚めなので「-1」して「: 0」も含む書き方してます。
var seed = Math.random();
var randKv = seed ? Math.ceil(seed * 3 ) – 1 : 0;$('.slick').slick({
initialSlide:randKv});
この書き方ならslickじゃなくても他のものにも応用できそうな便利なメソッドです！
【コーディング】新しくサイトをコーディングに参考にさせていただいたサイト
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/
【jQuery】チェックボックスのチェック状態を取得してリンクのURLにパラメーターとして付与する方法
外部リンクにチェックボックスのアンケートを挟んでGAだけで確認したいという依頼があり作ってみました
実装の順番としては2つに分けて考えました
- チェックボックスのチェック状態を取得
- URLに代入（attrメソッドを使用）
1チェック状態の取得の参
https://itsakura.com/jquery-checkbox
https://qiita.com/nmta/items/dc29378adf79c5784218
2URLへの代入方法の参考
URLへの代入方法
jQueryでURLに特定の文字（#contentなどの文字）を足す
attr()メソッドのかんたん解説！
【WAI-ARIA】role属性、aria属性を使ってタブを実装してみた
タブとかアコーディオンとか属性使ってやってくとフロントエンジニアっぽい
【jquery】slickにプログレスバーを追加する方法
ジェネレーターページ