今回は画像のズーム機能をjQueryで実装していきます!ギャラリーページや商品ページの画像にズーム機能をつけれるような関数を実装していきます.元画像上でカーソルを動かすと,そのカーソルに追従するようにズーム範囲が動く機能も実装します.今回は関数として機能を実装し,引数でズーム倍率を設定することができるようにします.
続きを読むjQuery
ギャラリーのフィルタリング機能をjQueryで実装する–TamoTech–
今回は画像ギャラリーの写真フィルタリング機能を実装していきます.ここでいうフィルタリング機能とは,複数ある画像の中から条件に合致した写真のみを表示する機能のことです.
続きを読む汎用性大!!リロードするたびに画像をランダムで変更する関数をつくる【jQuery】–TamoTech–
今回はリロードするたびに画像がランダムに変化する関数をjQueryで作っていきます!関数で作り,引数に画像となる要素と画像名の配列を指定することで,汎用性の高い関数を作ります.
続きを読む今流行のダークモードをjQueryで実装する!!–TamoTech–
2020年9月20日にiOS 13のアップデートが行われ,ついに!待望の!ダークモードが実装されました!!このダークモードって見た目がかっこいいだけじゃないんです!ダークモードには,低照度時の目への負担の軽減,消費電力の低減等の利点があります.今回はWebページにおけるダークモードを「jQuery」を用いて実装していきます.
続きを読む簡単実装!「t.js」でタイピングアニメーションを実装する!–TamoTech–
今回はタイピングアニメーションを実装します.タイピングアニメーションを実装は「t.js」を使用します.実装の導入方法や設定値,使い方を解説します.
続きを読むカスタム可能!!カーソルを追従するアニメーションを作る!–TamoTech–
今回はカーソルの追従アニメーションについて,実際のコードを踏まえながら解説していきます.普通のサイトと比べてカーソルにちょっとしたアニメーションがあると,サイトが映えますよね!映えるサイトは小さな工夫の集まりです.ぜひカーソルのアニメーションを採用してみてください!
続きを読む簡単実装!!【jQuery】でオリジナルローディングアニメーションを作る!!–TamoTech–
今回はjQueryでオリジナルローディングアニメーションを作成していきます!ローディング時に,クルクル回る,待機アイコンや,進行バー,ロード状況のパーセント表示を一度はみたことが必ずあると思います.今回はシンプルだけど,おしゃれに見える,ロード画面の簡単な実装方法を紹介していきます!
続きを読むすぐ使える!数値をカウントアップさせる関数【jQuery】–TamoTech–
Webページに数値データ(会社の売り上げ,社員数,アンケート結果等)を表示する時に,ただ数値を載せるだけでは,あまり注目されないことが多いと思います.自分が一番注目して欲しいデータは,何かしらの強調表現を付け加えなければいけません!強調方法は,デザインで補ったり,アニメーションをつけて補ったりします.今回は,数値をカウントアップさせ,Webページに動きをつける関数をjQueryで作成します.この関数は,初期値,終了値,アニメーション時間,イージング,要素を指定して使えるようにしています.ぜひコピペで使ってみてください!
続きを読む