これからは今まで以上に、jQueryが必要なくなるかもしれない | コリス

2017/07/14 531 users jQuery コリス jQuery無し ライセンス 半年

3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在... 続きを読む

[JS]アニメーションを使った快適操作がすごい！レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster | コリス

2016/01/15 162 users スクリプト 軽量 5KB コリス CSS3アニメーション

レスポンシブ対応、タッチデバイス対応、CSS3アニメーションを使った快適操作が気持ちいいさまざまなフリップコンテンツが実装できる軽量（5kb）のスクリプトを紹介します。 パタパタ、クルクル、ペラペラ、本当に気持ちよく動きます。 jQuery Flipster -GitHub jQuery Flipsterのデモ jQuery Flipsterの使い方 jQuery Flipsterのデモ 対応ブラ... 続きを読む

jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ | コリス

2015/09/15 331 users jQuery コリス 機能 まとめ

MiniGrid -GitHub デモページ、アニメーションのデモ レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。アニメーション無しでも利用できます。 cta.js -GitHub デモページ パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが... 続きを読む

jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法 | BlackFlag

2014/05/27 212 users jQuery BlackFlag skrollr 画面遷 方法

以前、iPhone5sのプロダクトページがリリースした頃に 『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して 1ページをフルスクリーン表示にして、画面全体をスクロールさせることで 1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラ... 続きを読む

[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta | コリス

2013/10/29 260 users jQuery コリス バリデーション スクリプト 即時

サーバー側でしかできないチェックはサーバー側に任せ、フォームに入力したデータの簡単なチェックはスクリプトで対応したいという人にぴったりなjQueryのプラグインを紹介します。 必須項目の入力漏れやメールアドレスの簡単なチェックなど、スクリプトなので即時にエラーメッセージが表示されます。 Validetta Validetta -GitHub Validettaのデモ Validettaの使い方 V... 続きを読む

[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js | コリス

2013/10/27 178 users コリス スライダー jQuery無し アニメーション

コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, bl... 続きを読む

簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」 | BlackFlag

2013/10/08 179 users BlackFlag skrollr jQueryプラグイン

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として パララックス（少々今さら感も感じますが・・・）効果に加えて最近では コンテンツ全体をフルスクリーン表示にして、 スクロールすることで1コンテンツ分が自動でスクロールされ 次画面へ遷移するさせる技法がよく見られます。 そんなＷｅｂページ内でスクロール効果を使った動作を実装する際に役立ちそうな JSスクリプト＆jQ... 続きを読む

[JS]div要素やリスト要素を折りたたんで配置するWAI-ARIA遵守のスクリプト -jQuery Collapse | コリス

2012/01/16 112 users コリス Chrom div要素 スクリプト jQuery

実装は超簡単、カスタマイズ性にも優れ、IE6にも対応、クリックで開閉する折りたたみコンテンツを設置するjQueryのプラグインを紹介します。 jQuery Collapseの特徴 jQuery Collapseのデモ jQuery Collapseの使い方 jQuery Collapseの特徴 軽量 約600バイトの軽量スクリプト。 クロスブラウザ対応 IE6+, Firefox3+, chrom... 続きを読む

[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal | コリス

2011/12/05 127 users コリス モーダルウインドウ Simple Modal 移動

アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コ... 続きを読む

GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」

2006/06/25 171 users GIGAZINE ログインフォーム デモ 応用 既存

クリックすると既存のページにオーバーレイ効果を施して表示されるボックスです。よくあるAJAX効果をより簡単に適用できるのがウリです。画像やログインフォームなどに応用可能。 どういう効果なのかは下記のデモを見れば分かります。アクセスしてとりあえず画像をクリックしてみましょう。 iBox Test Page http://www.ibegin.com/ibox/ibox-test.html ダウンロー... 続きを読む