js
【js】2回目にサイトに訪れたときに何か処理をする
[JavaScript] 初回アクセス時に1回だけポップアップ(モーダル)を表示したい
【js】いろいろ駆使してローディングを作ってみた
↑こんな感じのローディングイメージを作るのに四苦八苦したので備忘録的に書きます。
いろいろな動きが重なっているので、複数の処理を順番にやっていけばいいかなと思って、$when().done“Velocity.js”を使ってなんとかしました。
animetionを順番に処理するメソッド
Velocity.jsで拡大の動きをなめらかにするために搭載
これがないとsvgでも拡大するときギザギザしちゃう
https://liginc.co.jp/web/js/jquery/150136
easingなど動きについて
拡大について
実際使わなかったけど参考にしたもの
【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じゃなくても他のものにも応用できそうな便利なメソッドです!
【WAI-ARIA】role属性、aria属性を使ってタブを実装してみた
タブとかアコーディオンとか属性使ってやってくとフロントエンジニアっぽい
【jquery】slickにプログレスバーを追加する方法
ジェネレーターページ
【css/js】ホバーでアニメーションボタンいろいろ
【jquery】inview.jsでスクロースで特定位置での表示を実装
メモ
- 表示だけじゃなく特定位置にきたらjsを実行するプラグイン
- 基本は、位置に来たらclass付与でアニメーションが楽
- この「jQuery.inview.js」というプラグインの利点は、とにかくシンプルにイベントとして返すだけなので、逆に実行する内容でいろいろと応用が効くのでとても有用ではないでしょうか。最近のサイトではアニメーションが当たり前になってきているので、動きはシンプルでもいいのでアニメーション表示する事に挑戦してみてはいかがでしょうか。
【jquery】Slickスライダーのサムネイルを制御(無限スライダー追記)
https://nldot.info/how-to-change-slick-slider-by-slicktogo-on-hover/
・サムネイルの同期の仕方
・サムネイルをautoplayでス〜とループさせるなど参考
パラメーターなど一覧
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
無限スライダーについて
http://black-flag.net/jquery/20160802-6170.html
すーーーーと止まることなくスライドしていく動きを実装
下記のパラメータが重要
autoplaySpeed: 0,
speed: 5000,
cssEase: 'linear',
※でも、slickだと挙動がおかしくなることもあるので、あまり使わないほうがいいかも
↓無限スライダーはここで実装している
jquery不要のスライダープラグイン
swiper.jp
を使っている模様
swiperの使い方
【jquery】要素を複製(コピー)して挿入する方法
既存の要素をコピーするには? ― cloneメソッド
https://www.buildinsider.net/web/jqueryref/057
【まとめ】
・レスポンシブなどでグローバルナビやSNSエリアなんかをハンバーガーメニュー内にも出したいときに使用
$(this).clone(true).appendTo(‘#sample’);
breakpoinntやclickなどのトリガーをつけてこれだけで実装可能