タグ "JavaScript" を含む投稿を表示中:63件
-
【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。 指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ[Emergence.js]を紹介します。 ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプ… 【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。続きを読む →
-
【JavaScript】親要素の大きさにテキストをフィットさせる[Fitty]の使い方 今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ[Fitty]の使い方を紹介します。 レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。 百聞は一見に如かず。 ま… 【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.s… 【JavaScript】超便利「Masonry」の簡易版[MiniMasonry.js]の使い方続きを読む →
-
【JavaScript】美しい泡が漂う[Beautiful bubbly backgrounds]の使い方 ウェブページの背景に動きのある美しい泡を表現できるJavaScriptライブラリ[Beautiful bubbly backgrounds]を紹介します。 ↓サンプルはこちら。 サンプル : https://on-ze.com/demo/j… 【JavaScript】美しい泡が漂う[Beautiful bubbly backgrounds]の使い方続きを読む →
-
【JavaScript】超簡単にパララックス効果を実装できる[simpleParallax.js]の使い方 今日はウェブサイトにお手軽にパララックス効果の画像を設置できるJavaScriptプラグイン[simpleParallax.js]の使い方を紹介します。 本体を読み込んで画像に任意のクラス名を指定すればスグに実装できます。 [simpleP… 【JavaScript】超簡単にパララックス効果を実装できる[simpleParallax.js]の使い方続きを読む →
-
【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる[Macy.js]の使い方 Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ[Macy.js]を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じて… 【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる[Macy.js]の使い方続きを読む →
-
【JavaScript】超軽量スムーススクロール『MoveTo』をご紹介! 今日紹介するJavaScriptライブラリ[MoveTo]は、容量が約1KBと軽量で、しかもjQueryに依存せずにスムーススクロールを導入できるスグレモノです。 サンプル:https://on-ze.com/demo/js-moveto/… 【JavaScript】超軽量スムーススクロール『MoveTo』をご紹介!続きを読む →
-
【JavaScript】単体で使える超軽量スライダー[Siema]は初心者の方にオススメです。 初心者のウェブ制作者の方でも簡単に扱えるカルーセルスライダー[Siema]を紹介します。 まずは実装してみたサンプルをどうぞ。 Siema 実装サンプル:https://on-ze.com/demo/js-siema/ 動作も軽快でサクッと… 【JavaScript】単体で使える超軽量スライダー[Siema]は初心者の方にオススメです。続きを読む →
-
【JavaScript】ページをスクロールすると要素が動きながら表示される[SCROLL TRIGGER]の使い方 ページのスクロールに連動して様々なエフェクトで要素が表示されていくJavaScriptプラグイン[SCROLL TRIGGER]を紹介します。 実際に導入したサンプルは以下より。 SCROLL TRIGGER DEMO : https://… 【JavaScript】ページをスクロールすると要素が動きながら表示される[SCROLL TRIGGER]の使い方続きを読む →
-
【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる[List.js]が超絶便利です。 先月、3月2日にリリースされた JavaScript プラグイン[List.js]を試用しました。 クオリティも高く、凄く便利ですね。 使いドコロの多いJavaScriptだと思うので、今日は本プラグインの具体的な導入方法を紹介していきます… 【JavaScript】リストやテーブルにフィルタリングや検索機能を追加できる[List.js]が超絶便利です。続きを読む →
-
【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。 複数のパターンのグラデーションがレイヤー状に重なる背景を描画できる jQuery スクリプト「Shards」の使い方です。 まずはGitHubで公開されているプラグイン本体をダウンロードしてきましょう。 https://github.com… 【jQuery】背景色を複数のグラデーションで彩るプラグイン「Shards」の実装方法。続きを読む →
-
【JavaScript】スクロールに連動して要素を自由自在に表示させる[AOS]の使い方 ウィンドウをスクロールさせると要素がフェードインしながら表示されるスクリプト[AOS(Animate On Scroll Library)]の使い方を紹介します。 まずは試しに実装してみたサンプルをご覧ください。 DEMO : https:… 【JavaScript】スクロールに連動して要素を自由自在に表示させる[AOS]の使い方続きを読む →
-
【JavaScript】超軽量Lightbox風スクリプト[Luminous]の使い方 つい最近見つけたLightbox風スクリプト[Luminous]がイイ感じです。 百聞は一見に如かず。 まずはサンプルをご覧ください。 サンプル : https://on-ze.com/demo/js-luminous/ お試しいただいたと… 【JavaScript】超軽量Lightbox風スクリプト[Luminous]の使い方続きを読む →
-
【JavaScript】画像の遅延読み込みを行うライブラリ[Layzr.js]の使い方 画像の遅延読み込みを行うJavaScriptライブラリ[Layzr.js]を紹介します。 ウェブページの読み込み時間短縮のために、ウィンドウの表示領域に入っていない要素や画像を非表示にしておいて、画面スクロールでウィンドウ内に入ってきたタイ… 【JavaScript】画像の遅延読み込みを行うライブラリ[Layzr.js]の使い方続きを読む →
-
【JavaScript】スワイプ操作にも対応したスライド式メニュー[Snap.js]の使い方 今回は[Snap.js]を使って左右にスライドするタイプのメニューを作成する方法を紹介します。 まずはサンプルをご覧ください。 Snap.js : オンズのサンプル これ、正式名称が不明確なんですが、巷では「スワイプ・メニュー」や「ドロワー… 【JavaScript】スワイプ操作にも対応したスライド式メニュー[Snap.js]の使い方続きを読む →