画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。 ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。 デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。
![[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element](https://cdn-ak-scissors.b.st-hatena.com/image/square/377f2ddc69b2ef9572766d48a6b972e09609fa5a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110601.png)
[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element
画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。 ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。 デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。
iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita
ブラウザの表示領域に対して要素の位置を固定してくれるposition: fixed;は、表示領域が限られるスマートフォンでこそ使いどころがたくさんあるのだが、（特にAndroidで）バグが多くて実用にはまだまだ慎重にならざるを得ない。 今回は、iOSで遭遇したバグについて記述しておく。 症状 position: fixedを指定した要素がz-indexを無視する。 精確に説明すると、position: fixedを指定した要素が、表示領域外にある部分が、スクロールされて表示領域に入ってきたときに、スクロールされている間だけ、z-indexが無視されて、より大きなz-indexが指定されている（即ちより手前の）要素より前面に表示される。 実際のコードをご覧いただこう。 <div class="contents">ここに通常のコンテンツ</div> <div class="bg"></div>
[JS]半透明やフラットのかっこいいパネルをさまざまなアニメーションで表示するスクリプト -Amaran JS
シンプルなテキストだけのものをはじめ、画像やアイコンを使った凝ったレイアウトの通知パネルをさまざまなアニメーションで表示できるjQueryのプラグインを紹介します。 表示位置やスライド・フェードなどのエフェクトも簡単に設定できる優れ物です。 Amaran JS Amaran JS -GitHub Amaran JSのデモ Amaran JSの使い方 Amaran JSのデモ デモではさまざまなデザインのパネルをさまざまなエフェクトで表示できます。 ↓は上：ユーザースタイル、下：半透明スタイル デモページ：オプション Amaran JSの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/jquery.amaran.min.css"> <
[JS]画像を使わずに、テキストをかわいくサークル状に配置するスクリプト -CircleType
幅780pxで表示 CircleTypeの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、Lettering.jsを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/lettering.js"></script> <script type="text/javascript" src="js/circletype.min.js"></script> FitText.jsを併用すると、表示サイズに合わせてテキストのサイズを変更することもできます。 Step 2: HTML HTMLはシンプル
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
背景、全画面で動画を再生。BigVideo.js #jQuery / Maka-Veli .com
いつかきっと使うメモ 今回の記事は以下から How To Build a Fullscreen Background Video Player | Vandelay Design Blog About the Author:Jake Rocheleau @jakerocheleau. Jake’s Google+ profile. より詳しく、技術的に読みたい方は今すぐGOです（記事は一応チュートリアルで全文英語です） jQuery / jQuery UI / Video.js / imagesLoaded を用いて、bigvideo.js と以下の指定で動くそう。 <script type="text/javascript"> $(function() { var BV = new $.BigVideo(); BV.init(); BV.show('動画.mp4'); });
HTML5のvideoタグを使って背景に動画を設定するjQueryプラグイン・videoBG
HTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプトです。対応していないブラウザには静画が表示されるようになっているみたい。 動画を背景に、というスクリプト。 動画のパスを指定して表示するみたいです。楽でいいかも。尚、HTML5未対応のブラウザには普通の画像を別途用意して指定しておくことで表示を切り替えるみたいです。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.videoBG.js"></script>コアとプラグインを読み込み。 $('.foo').videoBG({ position:"fi
ドラッグ&ドロップによる再配置も可能な、タイル状に要素を配置するjQueryプラグイン・jQuery.Shapeshift
要素をタイル状に配置してくれる、というjQueryプラグイン。特に目新しいものでは無いですけど。Pinterestライクなレイアウトを実装出来る、と言ったほうが伝わりやすいかも知れませんね。 Pinterestライクなレイアウトを実装出来て且つ、並べた要素をD&Dで移動、再配列してくれる、というもの。使うシーンは限られそうですけど面白いですね。 ドラッグ&ドロップで配列してる要素を自動で再配置してくれます。上図は画像になっていますが、ボックス要素に対応できるので応用が利きそうです。touch-punchを使ってタッチデバイスに対応させることも出来るようです。 ただ、再配置後の記憶をしないとなのでcookieやlocalStorage等を併用する必要があります。 コード<script type="text/JavaScript" src="http://ajax.googleapis.com
[JS]マジシャンがトランプを広げるように複数のパネルを華麗なアニメーションで広げるスクリプト -Baraja
デモページ：ダイナミックに重ねたりもできます Barajaの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。スタイルシートはhead内に配置します。 <link rel="stylesheet" type="text/css" href="css/baraja.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.baraja.js"></script> HTML 各アイテムはリスト要素で、画像や見出し・テキストを自由に配置できます。 <ul id="baraja-el" cl
[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト - BlocksIt.js
BlocksIt.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 ※jQueryは1.7.1で開発。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="blocksit.js"></script> Step 2: HTML HTMLは対象となる範囲をラッパーで包み、各パネルを同列に配置します。 パネルはデフォルトでdiv要素を対象にしていますが、任意の要素で実装できます。 <div id="container"> <div>パネル</div> <div>パネル</div> <div>パネル</div
Jason English
Hiker, photographer and software engineer documenting his travels around the world.
[JS]ノート風のレイアウトもOK！画像をベースラインに揃えて配置するだけのシンプルなスクリプト -Baseline.js
Baseline.js適用後 Baseline.jsの使い方 使い方は2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.baseline.js"></script> Step 2: JavaScript 適用する範囲をjQeuryのセレクタで指定し、ペースラインをpxで指定します。 $('img').baseline(24); //全てのimg要素に24pxのベースライン $('.content img').baseline(30); //.content内のimg要素に30pxのベースライン レスポンシブデザインにも対応しており、ブレイクポイントごとにベー
画面サイズに応じて画像を差し替える軽量jQueryプラグイン・jQuery Picture
スマフォやタブレットなどで閲覧した 際に表示する画像を差し替える軽量な jQueryのプラグイン・jQuery Picture のご紹介。レスポンシブWebデザイン でよく問題視される画像のサイズの件 に対応するライブラリです。 設定したブレークポイントに応じて画像を切り替えるライブラリです。2KBと軽量なのが良いですね。 以下サンプルです。手抜きですみません。 jsfiddleでフレームを操作して動作確認出来ます。 Sample コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery-picture-min.js"></script>
Messi, simple jQuery message plugin
- A simple message plugin for jQuery - by @marcosesperon About Messi is a jQuery plugin to show clean, elegant messages in a simple way. With Messi you will avoid to use default JavaScript alert notifications or new windows to provide extended information to the user. Display text, html content, images and ajax requests with 5KB code. Check in GitHub: https://github.com/marcosesperon/Messi Usagesh
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
要素をレンガ風に配列するスクリプト・jQuery Masonryで、配列させる要素を下揃えにする
要素をレンガ風に配列するjQueryプラグイン のMasonryで、要素を下揃えに配置出来るよ うにしたい、という内容です。オプション 項目を追加してオンオフを出来るようにカス タマイズします。下揃えにする機会があるか どうかは置いといてｗ jQuery Masonryというのは要素を時系列を崩さずに配列させる事が可能なjQueryのプラグインです。以前少し記事書いたので合わせてご覧下さい。 ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル ご覧の通りテキストコンテンツとは非常に相性が悪く、通常のブログやWebサイトではほぼ使いどころが皆無なプラグインですが、個人的にはギャラリーコンテンツの作成機会が多いので多少調べる機会が多いかもしれません。 こんな感じで下揃えにします。まぁそんだけな
[JS]スクリプト初心者でも簡単にカスタマイズできる、通知パネルをアニメーションで表示するスクリプト -noty
設置が簡単でカスタマイズも簡単にできる、ページの上部・下部・中央・角からアニメーションで通知パネルを表示・非表示するjQueryのプラグインを紹介します。 noty [ad#ad-2] notyのデモ notyの使い方 notyのデモ デモではnotyのさまざまな通知パネルを楽しむことができます。 下記は全てアラートパネルですが、他にもError, Success, Confirmが用意されています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFit
alessandroferrini.it