株式会社オンズのブログ記事一覧
タグ "JavaScript" を含む投稿を表示中：68件
-
-
-
-
【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］の使い方続きを読む →
-
-
【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］の使い方続きを読む →
-
-
【JavaScript】カード型レイアウトを簡単に実装できる［Minigrid］の使い方 今日紹介する［Minigrid］はカード型のレイアウトを簡単に実装できる超軽量JavaScriptライブラリです。 Minigrid : http://minigrid.js.org ほぼ同機能のjQueryプラグインでは［Masonry］... 【JavaScript】カード型レイアウトを簡単に実装できる［Minigrid］の使い方続きを読む →
-
-
-
-
【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方 今日は超簡単にポップアップ・ウィンドウを実装できる［Remodal］を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/... 【jQuery】超簡単に実装できるモーダル・ウィンドウ［Remodal］の使い方続きを読む →
-
【JavaScript】ページの背景にポリゴン状の幾何学模様を描画する［particles.js］の使い方。 以前［Geometryangle］と［Particleground］という２つのjQueryプラグインを紹介しましたが、今日ピックアップする［particles.js］も同じような機能で、ウェブページの背景に幾何学模様を描画することができま... 【JavaScript】ページの背景にポリゴン状の幾何学模様を描画する［particles.js］の使い方。続きを読む →
-
-
【JavaScript】特定の要素内の複数のボックスの高さを揃える［Right Height］の使い方。 ウェブサイト製作時に、ほぼ必ずと言っていいほど発生する問題。 その１つは「複数のボックスの高さを揃える」ことではないでしょうか。 もしテーブル・デザインで対応できる範疇ならば簡単ですが、そうではなく、ボックスの枠線を表示させたり背景に画像や... 【JavaScript】特定の要素内の複数のボックスの高さを揃える［Right Height］の使い方。続きを読む →
-
【JavaScript】ウィンドウを閉じるボタンを実装する方法。 JavaScriptでウィンドウを閉じるボタンを実装する方法 現在開いているウィンドウを、任意のボタンまたはリンク等をクリックしたときにJavaScriptを使用して閉じる方法を紹介します。 HTMLで閉じるボタンのコードを記述 単純に考え... 【JavaScript】ウィンドウを閉じるボタンを実装する方法。続きを読む →
-
【JavaScript】ページ全体が読み込まれた後にスクリプトを実行する方法。 あるJavaScriptのコードを、ページ全体が読み込まれた後に実行したいときは「window.onload」を使うようにします。 例えば<head>〜</head>内に以下のコードが記述されていたとします。 <... 【JavaScript】ページ全体が読み込まれた後にスクリプトを実行する方法。続きを読む →
-
