人気のあるUIサンプル

• JS cookie書き込み
• 改めてcookieの書き込みについてまとめます。 JavaScript データの書き込み 基本的にエンコードするようにします。 半角スペースやセミコロンがクッキ...
• 2019-07-29 20:39:39

• jQuery スクロールでURLを書き換える
• URLを書き換えるJSを、スクロールで移動したコンテンツの位置をトリガーに発動させるサンプルです。 記事などのコンテンツで、スクロールして下まで読み切ると、次の記事が表示されるサイトがあります。 今時は通信速度が速く、ついついたくさん読ませるための...
• 2019-07-29 20:32:02

• CSS3 スクロールバーのスタイル
• スクロールバーを自分の好きなスタイルに変更するときのサンプルです。 最近、CSSでoverflow:scrollとしてスクロールバーを表示させる手法が手軽になりました。 しかし、スクロールバーのデザインはブラウザに依存していて、ページ...
• 2019-07-29 20:47:08

• jQuery 処理を遅らせる
• delayメソッドを使ったサンプルです。 演出や処理の都合で、わざと遅らせることがあります。 何秒おきというわけではなく、単純に指定秒の間、待つメソッドを使います。 .demo_div{ width:10...
• 2019-07-29 20:51:10

• jQuery 一覧の絞り込み
• ページ遷移せずに、表示上で条件の絞り込みをする例です。 クリックした条件で絞り込み、同じボタンをクリックすると解除となり、トグルになっています。...
• 2019-07-29 21:00:02

• jQuery カルーセル
• 画像を横にアニメーションさせて複数の画像を表示させるサンプルです。 カルーセルとは、直訳すると「回転木馬」でコンテンツや写真を、クリックやフリックでスライドさせる表現です。 いろいろな作者が作ったものがありますが、今...
• 2019-07-29 20:55:59

• JS 円グラフ
• JavaScriptで円グラフを表現できるライブラリを二つ紹介します。 Raphael.JS 主にSVGによる描画でいろいろなグラフィックやグラフを表現できるJavaScriptライブラリです。表現方法の自由度が高い気がします。 Chart.js...
• 2019-07-29 21:04:42

• jQuery デバイス判別
• PCやスマートフォンで挙動を変えたい時は以下のようにJavaScriptを記述すると便利です。 [[$(function () { var ua = navigator.userAgent.toLowerCas...
• 2019-07-29 21:12:57

• jQuery パララックス基本動作
• スクロールに連動したアニメーションを実装のサンプルです。動きの速度を操作することで視差効果をおこり、不思議な表現を作ることができます。 このskrollr.jsというjQueryプラグインを使うと、スクロールに連動したアニメーションが簡単に作ることができます。 スクロールを数値に変換し、その加算に応...
• 2019-07-29 21:18:20

• QRコード 生成ツール
• QR（二次元）コードは、ガラケー時代からURLの記入の補助としてスマホの時代になっても広く使われています。 文字列をQRコードに変換するツールをPHPで作成し...
• 2019-07-29 21:23:28