JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション
JavaScriptのライブラリ「Vanta.js」は、少し違った背景アニメーションを使う場合にピッタリです。 実装も簡単なので、是非最後までご覧いただけると嬉しいです。 Vanta.js 「Vanta.js」は、簡易な …
JavaScriptのdocument.cookieでフォントサイズを変更してページ遷移しても状態を保持
アクセシビリティ対策で、フォントサイズの変更をネイティブなJavaScriptで実装してみます。 アクセシビリティ対策のフォントサイズを変更する機能は、WordPressならプラグインがあったりしますが、プラグインを使い …
JavaScriptのライブラリsimplePARALLAX.jsでパララックスのスクロールエフェクト
パララックス、いいですよね。 少し平面的なデザイン・レイアウトに、パララックス効果を入れることで、「動き」と「奥行き」を出せるので、そんなことも考慮しつつ使ってみるのもオススメです。 そんな時JavaScriptのライブ …
JavaScriptのwindow.innerHeightで右下にトップに戻るボタンを追従させて表示
JavaScriptなしでも作れるオブジェクトですが、JavaScriptの window.innerHeight を使って、少しスクロールした時に表示される「トップに戻る」ボタンを作ります。 是非、最後までご覧いただけ …
JavaScriptのYouTube Player APIとSwiperでYouTube動画のスライダー
YouTube Player API・・。簡単にプレイヤーの設定が可能で、カスタマイズもしやすく本当便利ですよね。 今回は、そんなYouTube APIとスライダー・カルーセルUIを絡めたスニペットです。 是非、最後まで …
JavaScriptの.indexOf()でURLを部分一致で検索して一致する場合にモーダルを表示
今回は、JavaScriptの .indexOf() の検索を使ってモーダルを表示させてみます。 比較的カスタマイズしやすく、応用させやすいメソッドなので是非最後までご覧いただけると嬉しいです。 .indexOf() J …
JavaScriptの.prependでページ遷移時に丸い背景が縮小していくオーバーレイを表示
ページ遷移時に、フルスクリーンで出すオーバーレイを少し丸くしてみます。 丸くするだけで、比較的大人しく、親しみやすい雰囲気を出すには向いている印象になります。 今回は、ページ遷移時に丸い背景が縮小していくオーバーレイを表 …
JavaScriptの.addEventListenerのanimationendでアニメーションさせながら画像を時間差で表示
CSSの記述だけでも、いろんな表現やアニメーションもできるようになりました。 そんなCSSで使う animation プロパティに、JavaScriptの .addEventListener の animationend …
JavaScriptのライブラリ「Chart.js」でグラフ・チャートを表示
複雑な定量のデータは、チャートやグラフを使えば視覚的に分かりやすく直観的に理解できますよね。 そんな時に便利なのは、JavaScriptのライブラリ「Chart.js」です。 かなりメジャーなライブラリなので、既にご存知 …
JavaScriptのdataTransfer.setData()で要素をドラッグして順番の並び替え
今やパソコンを使う時に当たり前の操作となっている「ドラッグしてファイルをフォルダに入れる」のような、ドラッグ操作で並び替えが可能なUIをネイティブなJavaScriptで作ってみます。 是非、最後までご覧いただけると嬉し …
