[jQuery] レスポンシブWebデザイン対応のメガメニュー - かちびと.net

2016/02/02 25 users jQuery ウインドウサイズ アコーディオン ウィ net

Result See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek ( @riogrande ) on CodePen . ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィ... 続きを読む

[JS]カーソルの位置でスライドコンテンツのスクロールをコントロールするスクリプト -MouseNavigator | コリス

2011/07/15 43 users コリス カーソル スクロール スクリプト 垂直方向

上記デモでは、カーソルを左右に移動するとその方向にスクロールし、端に移動するとより早いスピードでスライドします。 また、方向は水平方向だけでなく、垂直方向にも対応しています。 水平・垂直方向の動きに対応したデモページ スクリプトのオプション スクリプトのオプションでは下記の項目を設定できます。 スピード 方向 持続時間（最小・最大） 反応しないポイント など MouseNavigatorの対応ブラ... 続きを読む

[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D | コリス

2011/07/07 214 users パララックス コリス 奥行き スクリプト デモ

パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 続きを読む

[JS]通知パネルをアニメーションで表示する超軽量のスクリプト -Humane JS | コリス

2011/05/09 38 users コリス スクリ jQuery スクリプト アニメーション

jQueryなど他のスクリプトに依存せずに動作する、アニメーションで表示する通知パネルを実装するスクリプトを紹介します。 Humane JS デモページ 上記デモの「Welcome Back」の通知パネルは、下記のスクリ [...] 続きを読む

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス

2010/07/14 1404 users コリス padding Eee background 一行

上記デモのスタイルシート ※クリックで拡大 「CSS3 PIE」の使い方は簡単で、既存のCSS3に一行を追加するだけです。 適用前のCSS #myElement { background: #EEE; padding: 2em; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } 「CSS3 PIE」... 続きを読む

[JS]ソートだけでなく、検索も可能な多機能なデータテーブルを実装するスクリプト | コリス

2009/02/26 216 users プルダウン コリス ソート セル スクリプト

セルのハイライト表示、データのソート、特定文字列の検索などに対応したデータテーブルを実装するスクリプトを紹介します。 DataTables demo zero 上記デモでは、左上のプルダウンで表示件数の変更、下にはペ [...] 続きを読む