js

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

デモページ

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

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

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

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

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

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

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

easingなど動きについて

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じゃなくても他のものにも応用できそうな便利なメソッドです!

【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だと挙動がおかしくなることもあるので、あまり使わないほうがいいかも

↓無限スライダーはここで実装している

https://endoftheworld.jp/

jquery不要のスライダープラグイン

swiper.jp

を使っている模様

swiperの使い方

https://www.willstyle.co.jp/blog/724/