タグ「JavaScript」に関する投稿：50件の記事
【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方今日こちらで紹介するJavaScriptのプラグイン［Magic Grid］は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。 高さが揃っている複数のカードを配置するのであれば CSS Grid や Flexbox で簡単に実装できますが、高さが異なるカードをレンガ状に綺麗に配置するとなると、...【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方続きを読む →
ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }...ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方今日ご紹介する［Tippy.js］は、jQueryやZeptoなど他のリソースに依存せずに、単体で簡単に使えるJavaScriptのライブラリです。 特定の要素にマウスカーソルを合わせると、シンプルなアニメーションと共にツールチップが表示されるようになります。 サンプルは以下より。 Tippy.js : https:/...【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方続きを読む →
映画『マトリックス』の背景エフェクトを canvas で実装してみた。映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見つけたものですが、改変して次のようなJavaScriptのコードを書いています。...映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →
【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ［Emergence.js］を紹介します。 ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプラグインです。 サンプルのデモサイトは以下より。 デモ : https://xt...【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。続きを読む →
【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ［Fitty］の使い方を紹介します。 レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。 百聞は一見に如かず。 まずはサンプルをご覧ください。 SAMPLE : https://on-ze.co...【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方続きを読む →- 【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方このjQueryプラグイン、モーダルウィンドウを手軽に実装したい方に超絶オススメです！ まずは実際の挙動を確認してみましょう。 DEMO : http://humaan.com/modaal/ 「VIEW EXAMPLE」をクリックすると、背景が暗くなり、モーダルウィンドウがフワッと浮かび上がります。 とてもスムーズな...【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方続きを読む →
【JavaScript】超便利「Masonry」の簡易版［MiniMasonry.js］の使い方［MiniMasonry.js］は有名なMasonryの機能を制限した簡易版のライブラリです。 データ容量も軽く、jQueryなどに依存せず単体で動くので便利です。 使い方は以下より。 Sample : https://projects.spope.fr/masonry/example/index.html GitHu...【JavaScript】超便利「Masonry」の簡易版［MiniMasonry.js］の使い方続きを読む →
【JavaScript】美しい泡が漂う［Beautiful bubbly backgrounds］の使い方ウェブページの背景に動きのある美しい泡を表現できるJavaScriptライブラリ［Beautiful bubbly backgrounds］を紹介します。 ↓サンプルはこちら。 サンプル : https://on-ze.com/demo/js-bubbly-bg/ 導入方法 まずはGitHubにて配布されている本体ファ...【JavaScript】美しい泡が漂う［Beautiful bubbly backgrounds］の使い方続きを読む →
【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Macy.js］を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じてカラム数が増減します。 jQyeryなどの外部ファイルは一切不要で、単体で動作す...【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方続きを読む →- 【JavaScript】超軽量スムーススクロール『MoveTo』をご紹介！今日紹介するJavaScriptライブラリ［MoveTo］は、容量が約1KBと軽量で、しかもjQueryに依存せずにスムーススクロールを導入できるスグレモノです。 サンプル：https://on-ze.com/demo/js-moveto/ 使い方は超簡単。 下記サイトからダウンロードしたスクリプトファイル『moveT...【JavaScript】超軽量スムーススクロール『MoveTo』をご紹介！続きを読む →
- 【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。初心者のウェブ制作者の方でも簡単に扱えるカルーセルスライダー［Siema］を紹介します。 まずは実装してみたサンプルをどうぞ。 Siema 実装サンプル：https://on-ze.com/demo/js-siema/ 動作も軽快でサクッと動きますね。 公式の配布サイトは以下。 Siema : https://pawe...【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。続きを読む →
- 【JavaScript】ページをスクロールすると要素が動きながら表示される［SCROLL TRIGGER］の使い方ページのスクロールに連動して様々なエフェクトで要素が表示されていくJavaScriptプラグイン［SCROLL TRIGGER］を紹介します。 実際に導入したサンプルは以下より。 SCROLL TRIGGER DEMO : https://on-ze.com/demo/js-scroll-trigger/ 各要素のモー...【JavaScript】ページをスクロールすると要素が動きながら表示される［SCROLL TRIGGER］の使い方続きを読む →
【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる［List.js］が超絶便利です。先月、3月2日にリリースされた JavaScript プラグイン［List.js］を試用しました。 クオリティも高く、凄く便利ですね。 使いドコロの多いJavaScriptだと思うので、今日は本プラグインの具体的な導入方法を紹介していきます。 ［List.js］をダウンロードする まずは必要なファイルをダウンロードしま...【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる［List.js］が超絶便利です。続きを読む →- 【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。複数のパターンのグラデーションがレイヤー状に重なる背景を描画できる jQuery スクリプト「Shards」の使い方です。 まずはGitHubで公開されているプラグイン本体をダウンロードしてきましょう。 https://github.com/vonKristoff/Shards ページの右上あたりにある緑色のボタン『C...【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。続きを読む →
- 【JavaScript】スクロールに連動して要素を自由自在に表示させる［AOS］の使い方ウィンドウをスクロールさせると要素がフェードインしながら表示されるスクリプト［AOS（Animate On Scroll Library）］の使い方を紹介します。 まずは試しに実装してみたサンプルをご覧ください。 DEMO : https://on-ze.com/demo/js-aos/ 要素を表示させる際の動きは「F...【JavaScript】スクロールに連動して要素を自由自在に表示させる［AOS］の使い方続きを読む →
Ads by Google