画像上のタイトルや見出しを縁取りだけして,文字内から背景画像を透過させる方法をご紹介します.
続きを読む今流行のダークモードをjQueryで実装する!!–TamoTech–
2020年9月20日にiOS 13のアップデートが行われ,ついに!待望の!ダークモードが実装されました!!このダークモードって見た目がかっこいいだけじゃないんです!ダークモードには,低照度時の目への負担の軽減,消費電力の低減等の利点があります.今回はWebページにおけるダークモードを「jQuery」を用いて実装していきます.
続きを読む簡単実装!「t.js」でタイピングアニメーションを実装する!–TamoTech–
今回はタイピングアニメーションを実装します.タイピングアニメーションを実装は「t.js」を使用します.実装の導入方法や設定値,使い方を解説します.
続きを読むカスタム可能!!カーソルを追従するアニメーションを作る!–TamoTech–
今回はカーソルの追従アニメーションについて,実際のコードを踏まえながら解説していきます.普通のサイトと比べてカーソルにちょっとしたアニメーションがあると,サイトが映えますよね!映えるサイトは小さな工夫の集まりです.ぜひカーソルのアニメーションを採用してみてください!
続きを読む簡単実装!!【jQuery】でオリジナルローディングアニメーションを作る!!–TamoTech–
今回はjQueryでオリジナルローディングアニメーションを作成していきます!ローディング時に,クルクル回る,待機アイコンや,進行バー,ロード状況のパーセント表示を一度はみたことが必ずあると思います.今回はシンプルだけど,おしゃれに見える,ロード画面の簡単な実装方法を紹介していきます!
続きを読むすぐ使える!数値をカウントアップさせる関数【jQuery】–TamoTech–
Webページに数値データ(会社の売り上げ,社員数,アンケート結果等)を表示する時に,ただ数値を載せるだけでは,あまり注目されないことが多いと思います.自分が一番注目して欲しいデータは,何かしらの強調表現を付け加えなければいけません!強調方法は,デザインで補ったり,アニメーションをつけて補ったりします.今回は,数値をカウントアップさせ,Webページに動きをつける関数をjQueryで作成します.この関数は,初期値,終了値,アニメーション時間,イージング,要素を指定して使えるようにしています.ぜひコピペで使ってみてください!
続きを読む上スクロールすると出現し,下スクロールで消える,メニューバーの作り方【jQuery】
WebページやWebアプリを使っている時に,「画面せまいな〜」とか「メニューバーがなければ良いのに」とか「今メニューバーいらんねん!」とか思ったことありませんか??自分のWebページを作るときは是非今回の「上スクロールすると出現し,下スクロールで消える,メニューバー」を採用してみてください!モバイルファースを意識した,良いサイトになること間違いなしです!それでは,解説していきます!
続きを読むCSSのグリッドレイアウトを使いこなす3つのステップ!ラインベースのグリッドレイアウトの基礎 –TamoTech–
グリッドレイアウトというものをご存知でしょうか?グリッドとは水平線と垂直線の集合が交差した,編み目上のものを指します.CSSではこのグリッド線を設定し,その線でボックスの配置位置を定義するグリッドレイアウトが可能です.これまで,フレックスボックスで配置してきたコンテンツをより「柔軟に自由に」配置できます.今回は,ラインベースのグリッドレイアウトを実装するための基本的な使い方を解説します.
続きを読む