タグ "JavaScript" を含む投稿を表示中:63件
-
【JavaScript】ページのスクロールに合わせて要素を動かす[ScrollReveal]の使い方 ページをスクロールさせて、非表示だった特定の要素がウィンドウ内に入ってきたときに、指定したアニメーションエフェクト付きで表示させるスクリプト[ScrollReveal]を紹介します。 以下の公式配布サイトのデモを見れば何が起きているのか一目… 【JavaScript】ページのスクロールに合わせて要素を動かす[ScrollReveal]の使い方続きを読む →
-
【JavaScript】カード型レイアウトを簡単に実装できる[Minigrid]の使い方 今日紹介する[Minigrid]はカード型のレイアウトを簡単に実装できる超軽量JavaScriptライブラリです。 Minigrid : http://minigrid.js.org ほぼ同機能のjQueryプラグインでは[Masonry]… 【JavaScript】カード型レイアウトを簡単に実装できる[Minigrid]の使い方続きを読む →
-
レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自… レスポンシブ対応のjQueryスライダー系ライブラリ × 11選続きを読む →
-
【jQuery】ダイナミックな動作がカッコいいスライドショー[Tilted Content Slideshow]の使い方 カッコいい動作のスライドショー[Tilted Content Slideshow]を見つけてきました! アニメーション部分にCSS3のTransformsとAnimationsを使用した高機能スライダーです。 画像をCSS3の「transf… 【jQuery】ダイナミックな動作がカッコいいスライドショー[Tilted Content Slideshow]の使い方続きを読む →
-
【最新バージョン7.3対応】jQuery無しで動く神スライダー[Swiper]が便利すぎて。 今日紹介する[Swiper]は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ… 【最新バージョン7.3対応】jQuery無しで動く神スライダー[Swiper]が便利すぎて。続きを読む →
-
【jQuery】超簡単に実装できるモーダル・ウィンドウ[Remodal]の使い方 今日は超簡単にポップアップ・ウィンドウを実装できる[Remodal]を紹介します。 まずは下記リンク先より、実際の挙動をご確認ください。 オンズの実装サンプル : https://on-ze.com/demo/jquery-remodal/… 【jQuery】超簡単に実装できるモーダル・ウィンドウ[Remodal]の使い方続きを読む →
-
【JavaScript】ページの背景にポリゴン状の幾何学模様を描画する[particles.js]の使い方。 以前[Geometryangle]と[Particleground]という2つのjQueryプラグインを紹介しましたが、今日ピックアップする[particles.js]も同じような機能で、ウェブページの背景に幾何学模様を描画することができま… 【JavaScript】ページの背景にポリゴン状の幾何学模様を描画する[particles.js]の使い方。続きを読む →
-
【jQuery】斬新な動きのスライドショーが魅力の[Fullscreen Slit Slider]の使い方 今日は大胆な動きのスライドショーが魅力のjQueryプラグイン[Fullscreen Slit Slider]を紹介します。 まずは実際に[Fullscreen Slit Slider]を使ったサンプルをご覧ください。 実装サンプル:ONZ… 【jQuery】斬新な動きのスライドショーが魅力の[Fullscreen Slit Slider]の使い方続きを読む →
-
【JavaScript】特定の要素内の複数のボックスの高さを揃える[Right Height]の使い方。 ウェブサイト製作時に、ほぼ必ずと言っていいほど発生する問題。 その1つは「複数のボックスの高さを揃える」ことではないでしょうか。 もしテーブル・デザインで対応できる範疇ならば簡単ですが、そうではなく、ボックスの枠線を表示させたり背景に画像や… 【JavaScript】特定の要素内の複数のボックスの高さを揃える[Right Height]の使い方。続きを読む →
-
【JavaScript】ウィンドウを閉じるリンクを実装する方法。 現在開いているウィンドウを、任意のリンクをクリックしたときにJavaScriptを使用して閉じる方法を紹介します。 簡単に考えるとアンカータグにonClick=”window.close();”を追加すれば実装できそうな気がしますが、実際に… 【JavaScript】ウィンドウを閉じるリンクを実装する方法。続きを読む →
-
【JavaScript】ページ全体が読み込まれた後にスクリプトを実行する方法。 あるJavaScriptのコードを、ページ全体が読み込まれた後に実行したいときは「window.onload」を使うようにします。 例えば<head>〜</head>内に以下のコードが記述されていたとします。 <… 【JavaScript】ページ全体が読み込まれた後にスクリプトを実行する方法。続きを読む →
-
【JavaScript】デバイスの傾きでページをスクロールさせる[Interdimensional]の使い方。 主にモバイル端末に対応した、デバイスの傾きでページをスクロールさせるJavaScriptのライブラリ[Interdimensional]を紹介します。 以下のリンク先より実装サンプルをテストできます。 iPhoneやiPad等、加速度センサ… 【JavaScript】デバイスの傾きでページをスクロールさせる[Interdimensional]の使い方。続きを読む →
-
【JavaScript】jQuery不要で動く[wow.js]でスクロール連動型アニメーションを実装。 最近はjQuery不要でも動くスクリプトが流行りのように感じていますが、気のせいでしょうか? 今日紹介する[wow.js]も、jQuery要らずで実装可能な優良スクリプト。 容量も8KBと軽量で、別途配布されている「Animate.css」… 【JavaScript】jQuery不要で動く[wow.js]でスクロール連動型アニメーションを実装。続きを読む →
-
【JavaScript】超高機能なグリッドレイアウトを実装する[Packery]はドラッグによる並べ替えにも対応! グリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ[Packery]を紹介します。 百聞は一見に如かず。まずは動作サンプルをご覧ください。 Packery:動作サンプル ご覧いただいたように、任意のボタンをクリックす… 【JavaScript】超高機能なグリッドレイアウトを実装する[Packery]はドラッグによる並べ替えにも対応!続きを読む →
-
【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。 一時期、多くのサイトで導入され大流行した jQuery プラグイン[Lightbox]の使い方を紹介します。 皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。 画像をクリックすると背景が暗くなり、指定さ… 【jQuery】これだけで完璧に導入できる[Lightbox]の実装方法。続きを読む →
-
【JavaScript】超軽量・超高速のJavaScriptフレームワーク[Vanilla.js]をオススメします。 初心者には難しい印象の JavaScript ですが、より簡単に使いこなすために[jQuery]や[Prototype JS]などのライブラリが開発されています。 また、同様のフレームワークとして、最近では[angular.js]、[bac… 【JavaScript】超軽量・超高速のJavaScriptフレームワーク[Vanilla.js]をオススメします。続きを読む →