JS/jQuery– tag –
-
【コピペOK！】モバイルファーストのwebコーディングアイディア
最近、下記のようなモバイル表示に特化したwebサイトをよく見かけます。 【参考】らんま1/2 | フェリシモ https://www.felissimo.co.jp/ranma/ 基本モバイルのデザインのみで、PCで表示してもモバイルのレイアウトがはめ込まれ、 余ったスペースはシンプル... -
webサイトが重い時の解決方法
webサイトになかなかアクセスできなかったり画像の表示に時間がかかったり、サイトの読み込み速度が遅いと感じたことはありませんか？ webサイトの読み込み速度が遅いと、離脱率の上昇や直帰率の上昇、Googleの表示順位にも影響するようです。 DigitalMark... -
最強のjsアニメーションライブラリ「GSAP3」を使いこなす！
【GSAPとは】 GSAP(GreenSock Animation Platform)とは、GreenSock社が開発した高機能なjavascriptアニメーションライブラリです。 軽量な割に多機能で、しかもとても簡単に実装できるので、webサイトでアニメーションを使用したい時には絶対使った方がい... -
揺らめく波のjQueryのプラグインWavify
ゆらゆらとゆれる波をjQueryのプラグインで簡単に表現できます。 デモコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, ... -
ワンランクアップ！手書き風の文字アニメーション
以前にも、SVGを使ったアニメーションを紹介しましたが、今回はまた違ったアニメーションをご紹介したいと思います。 前回は、文字の枠線をアニメーションで動かす → 最後にフェードインで塗りの入った文字が出てくるというアニメーションをご紹介しました... -
jQuery基礎 forループを使ってみよう
皆さんは図のような長いリストのページを作る際に、 目が滑って次第に自分が何をやっているのかわからなくなってくることはありませんか。 私は頻繁にあります。 寝不足、眼精疲労、その他考えられる原因は数え始めたらキリがありませんが、 その中でも最... -
WebデザイナーのためのVue.js
Vue.jsはクライアントサイドで使われるJavaScriptのフレームワークです。近年注目を集めているフレームワークですが、 これまでWebデザイナーがjQueryを使って実装した動きをVue.jsでも実現できるほか、HTMLに条件文を記述しアニメーションをCSSで設定する... -
【animate.js】エフェクト集「Moving Letters」
今回は、かっこいいテキストアニメーションをまとめたサイトをご紹介します。 Moving Lettersは、anime.jsというプラグインを使用した エフェクトのサンプルを公開しているサイトです。 アニメーションの種類も豊富で、ソースも全てコピー&ペーストし... -
簡単！chart.jsでグラフをつくる方法
こんにちは。 今日はグラフを簡単につくることができる「chart.js」についてご紹介したいと思います！ chart.jsでは ・線グラフ ・棒グラフ ・レーダーチャート ・ドーナツ/ 円グラフ ・散布図 .. など、様々な種類のグラフを描画することができます！ サ... -
慣性スクロールのjsプラグイン
今週はスクロールの動きの参考をご紹介します。 慣性スクロールとは... 主にマルチタッチインターフェースで採用されている機能で、画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維... -
【デザインに遊び心を】動きが楽しい jQueryプラグイン
今回は、使い所を考えるのが難しいけれど、 動きが楽しいアニメーション系のプラグインをご紹介します。 全て公式サイトからデモを確認することができますよ！ 【conate.js】 https://bitshadow.github.io/iconate/ クリックでアイコンが切り替わるアニメ... -
初心者デザイナーでもできる！SVGアニメーションの作り方
【SVGを使ったアニメーション】 今週はSVGを使った簡単なアニメーションをご紹介したいと思います！ 最近いろんなウェブサイトをみていて、トップビジュアルにあるキャッチの文字にアニメーションを使ったものをよく見ます。 コーディング苦手な私からする... -
すぐ使える！波紋のエフェクト「Rippleria.js」
こんにちは。 今日はボタンなどに使えるエフェクト「Rippleria.js」をご紹介します！ サンプルはこちら 公式サイトからデータをダウンロード 公式サイトはこちらです↓ http://nsept.github.io/rippleria/ 必要なものは以下2ファイルのみです: ・cssフォル... -
簡単！数字のカウントアップ表示で動きのあるサイトに
【数字をカウントしながら表示させる】 今回は、jQueryの簡単な記述で、「数字をカウントしながら表示させる」という動きについて紹介したいと思います。 よく採用サイトの数字で見る系のページで使われたりしているアレです！ 今回はこちら... -
行数の異なる要素の高さを揃える
皆さんは、こんな経験はありませんか？ 行数の違う横並びの要素の高さが揃わない！ 特にliなどのList Itemを配置する際に発生しがちですよね。 最初から高さが揃うような文章量にすれば良いのでは？ とは思いますが、そうも言ってはいられません。 そんな... -
【超初心者向け！】jQueryの基礎の基礎
jQueryのプラグインを使ったことはあるけど、1から書く方法はわからない。 JavaScriptとどう違うの？ という方は、一定数いらっしゃるのではないでしょうか。 今回はそんな初心者の方のために、 jQueryについてざっくりと説明していきたいと思います。 【j...
1