デバイスを判定し、CSS/JavaScriptで簡単に利用できるようにするスクリプト -Device.js | コリス
ページにほんの一行外部ファイルを加えるだけで、iPhone, iPadなどのiOSをはじめ、Android, Blackberry, Windows Phone, Window Tabletなどスマフォやタブレット、デスクトップなどのデバイスを判定し、簡単に条件付きのCSSやJavaScriptを利用できるにするスクリプトを紹介します。 Device.js -GitHub Device.jsの使い方 Device.jsのデモ Device.jsの使い方 Device.jsの実装は、簡単です。 外部ファイルとして、当スクリプトを記述するだけです。 <script src="device.js"></script> スクリプトを設置すると、表示デバイスに基づいて<html>に適切なclassを付与します。 iPhoneでアクセスすると、こんな感じに。 <html class="ios ipho
チェックボックスとラジオボタンをスタイリングする為のjQueryプラグイン・iCheck.js - かちびと.net
checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますのでカスタマイズの参考にもなりますね。 コード <script src="jquery.js"></script> <script src="jquery.icheck.js"></script> コアとプラグインを読み込みます。 $('input').icheck(); 初期化します。 $('input').icheck({ handle: '', // 'checkbox'か'radio'とすればどちらかに限定できる
CSS切替なしでフォントサイズを変更するjQueryのスクリプト | Web Mugen
前に作ったフォントサイズを変更するjQueryのスクリプトの改良版です。元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作ってみました。改良点は画像でもテキストでも使えるし、クリックするとアクティブ用のクラスが付くのでCSSを適応できます。さらにロールオーバー画像のオンオフも切り替えれます。おまけにフォントサイズの段階（標準・大とか小・中・大みたいな）もいくつでも設定できます。ちなみにプラグイン風？に作りました。もちろん自己満の為です。 画像タイプDemo テキストタイプDemo 対応ブラウザ Google Chrome Safari4~ Firefox3~ Internet Explorer6~ Opera11 ※Windowsのみの確認です。 ※IE6はテキストタイプの場合、a要素を使用していない為ホバー機能が効きません。a要素を追加しても問題ないかと思いますが、リンク
様々なJavaScriptライブラリをコレクションしているWebサイト・JSDB.IO
様々なJSライブラリのまとめサイトのご紹介。主にクライアントサイドのJSライブラリを中心にコレクションしているみたいです。シンプルで探しやすかったのでメモ。 JSのコレクションサイト。サクサク動作して広告などの余計なコンテンツも無いので非常に探しやすい印象です。
モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive - かちびと.net
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
HTML5でつくられた、ページ遷移・画面遷移のアイディアがすごい
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか？ 僕は大好きです。 Web Creator's Contest Q（HTML、CSS、JavaScript エンジニアのためのコンテストサイト）では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています！ 魅力的な画面遷移エフェクトのコード集！ Cubic Transition ※「▶Play」ボタンをクリック！
[JS]ページ全体やコンテンツ（画像や動画）をフルスクリーンで表示するだけのシンプルなスクリプト -BigScreen
指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量（1KB）のスクリプトを紹介します。 BigScreen BigScreenの特徴 BigScreenのデモ BigScreenの使い方 BigScreenの特徴 BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量（minified:1KB）のスクリプトです。 対応ブラウザ Chrome 15+ Firefox 10+ Safari 5.1+ 動画コンテンツの表示は下記もサポートします。 Safari 5.0 iOS 4.2+ BigScreenのデモ デモはサイトのタイトル（BigScreen）のテキストをはじめ、画像や動画などをクリックすると、フルスクリーンで表示します。 BigScreenのデモ：動画 動画は右下のボタンをクリ
PowerTip – シンプルでクールなツールチップを実装するjQueryプラグイン – creamu
PowerTipは、シンプルでクールなツールチップを実装するjQueryプラグインです。 上下左右斜めの方向の配置や、マウスに追随するツールチップの実装が可能です。 PowerTip
[JS]パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるスクリプト -Gridster
CSS3アニメーションのかっこいいエフェクトを伴って、パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できるjQueryのプラグインを紹介します。 パネルはグリッドに沿って、カラムをまたいでも移動できます。移動した際に他のパネルは指定した縦列・横列数とマージンを維持します。 他のパネルも移動可能です。 対応ブラウザ Internet Explorer 9+ Firefox Chrome Safari Opera Gridsterの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="libs/jquery.js"></script> <script type="text/javascript" src="jquery.gridster.js"></scri
8500+ Best jQuery Plugins & Tutorials with jQuery Demo examples 2019 - 2018
Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and Vue.js
スマートフォン向けのHTML5製フレームワーク・Lungo.js - かちびと.net
今更ですけどLungo.jsを少し触って 見ました。Lungo.jsはHTML5+CSS3の スマートフォン向けフレームワーク です。jQueryやmootoolsなどを必要 としない非依存型のライブラリです ので覚えておいて損は無いかも。 スマフォ向けフレームワークです。GPLv3ライセンスでOSSとして公開されています。 スマフォ向けのフレームワークは相当出回っていますので珍しくないかもですけど・・触った感じはなかなか使いやすそうでした。コアファイルは非圧縮で40kbほど。 以下、公式サイトのサンプルです。 Sample スターターキット的にも使えそうです。 ↑ 実機でのスクリーンショット この手のは沢山あるので好みで選べばいいですね。詳細は以下でどうぞ。 Lungo.js
画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net
画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQMのCSSをロード 幅が1024px以下なら何も読み込まない それ以外はJQMのCSSをロード こう設定すれば、601px～1
[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity
スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset [ad#ad-2] vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、7つのツールとそのコードを紹介します。 ※外部ファイル・スタイルシートは省略 スライダーのデモページ div要素やリスト要素で実装するスライダーです、スライドのエフェクトやスピードも調整できます。 HTML <!-- the slider content holder --> <div class="slider"> <!-- the elements inside the s
[JS]スライドを縦横斜めのダイナミックなスクロールで表示するスクリプト -Ascensor.js
デモページ ページ中央の「Demo and how to use」をクリックします。 操作は、左上の「prev, next」、右下の「ナビゲーション」、キーボードの「矢印キー」です。 [ad#ad-2] Ascensorを実際に使用しているサイトも紹介します。 Reverse Buro Ascensorの使い方 外部ファイル 「jquery.js」と「scrollTo.js」、そして当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo.js" type="text/javascript"></script> <script src="js/jquery.ascensor.js" type="text/java
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
[JS]jQueryで実装するiGoogle風のインターフェイス | コリス
leanModal – シンプルなモーダルウィンドウを実装するjQueryプラグイン – creamu
gridster.js – ドラッグ&ドロップで要素を並べ替えられるjQueryプラグイン – creamu
