[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate
デモ：Safari/OS Xで表示 フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="js/min/jquery-v1.10.2.min.js"></script> <script src="js/min/modernizr-custom-v2.7.1.min.js"></script> // Formplate <script src="js/min/formplate.min.js"></script> <link href="css/formplate.css" rel="st
![[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ed9261b41e9377fcfcb1f225aa1aa691a91afdd/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112605.png)
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body> Step 2: HTML 動画を背景として表示する親要素、もしくはラッパーを配置します。 <div class="
![[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid](https://cdn-ak-scissors.b.st-hatena.com/image/square/9110ae5aaacb7e18964553e948fdad1f627eb39c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111003.png)
[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="pogo-slider.min.css"> </head> <body> ... <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.pogo-slider.min.js"></scrip
![[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/854418a1d6f45d24d878040e9370f59845bb3b0c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091702.png)
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
[JS]そのアイデアに脱帽！ひと味違う使い方が面白いツールチップのスクリプト -thoughtBubble
マンガやアニメのように、てん、てん、てん、ぽわーんと思っている事を吹き出しのアニメーションで表示するjQueryのプラグインを紹介します。 アニメーションで表示するツールチップですが、アイデアが面白いですね。 デモは英語ですが、日本語のメッセージを表示することもできます。 thoughtBubbleの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../src/jquery.thoughtBubble.css"> </head> <body> ... コンテンツ ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scrip
[JS]縦長ページで構造に合わせて水平コンテンツをうまくレイアウトするスクリプト -gridscrolling.js
メインコンテンツとなる垂直に配置されたsection要素に、それぞれのサブコンテンツとなるaside要素を水平に自動配置するjQueryのプラグインを紹介します。 垂直・水平スクロールを使ったウェブページだけでなく、プレゼン用のスライドなどにも利用できそうですね。 gridscrolling.js gridscrolling.js -GitHub gridscrolling.jsのデモ gridscrolling.jsの使い方 gridscrolling.jsのデモ デモは右上にあるマップのようにコンテンツが配置されており、垂直に並んでいるのがsection要素、水平がそのsection要素のサブにあたるaside要素になっています。 操作はキーボードの矢印キーで、普通にマウスのホイールでも操作はできます。 スクリプトが利用できない環境でも問題ありません。 sectionはsection、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
