Photoshopを使った独特なテイストのアニメーション「シネマグラフ」を作ってみよう | ライフハッカー・ジャパン
シネマグラフを知っていますか？ 写真の一部だけを動かして、そこに注目を集める手法です。不思議で効果的なアニメーションが作れますよ。 シネマグラフはJamie Beck氏とKevin Burg氏がブログ「From Me to You」の中で初めて紹介した手法です。こちらで他の作品もチェックしてみてください。 早速、米Lifehackerでもサンプルを作ってみました。鼻をグリグリほじるちょっとふざけたアニメーションがご覧いただけたはずです。今回は、このシネマグラフをどうやって作ったかを紹介します。あなたも自分の作品を作ってみてください。動画で見るのが一番わかりやすいので、まずは冒頭の動画をチェックしてください。以下に、詳しい手順を書いておきます。 ステップ 1：アイデアを考え、短い動画を撮る まず、動画クリップを作成します。何か特徴的な動きが入っているといいでしょう。例えば、前出のコーヒーをス
画像の最大幅を calc() で制御する
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがある これをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
ドラッグできる画像拡大ライブラリ「Highslide JS」
ドラッグできる画像拡大ライブラリ「Highslide JS」 Check Tweet 配布元：Highslide JS ライセンス：Creative Commons Attribution-NonCommercial 2.5 License(個人利用は無料、商用利用時は$29～) Highslide JSはドラッグ可能な画像拡大のJavaScriptライブラリです。 利用方法 ダウンロードしたhighslide.jsとhighslide.cssをhead要素内などで読み込みます。 <script type="text/javascript" src="./highslide/highslide.js"></script> <link rel="stylesheet" type="text/css" href="./highslide/highslide.css" /> 利用したいスタタイル
ColorMe!ShopProでLightboxを使う
カッコイイ写真表示の代名詞といったらLightbox系のAjaxライブラリですけど、 ColorMe!ShopProはヘッダが操作出来ないので、Usage通り<script>をヘッダに入れて～ということは出来ない。 なので一見使用不可能に見えるけど、結構あっさり使えます。 ポイントは３つ。 ヘッダに挿入するJavascriptファイルへのリンクは、Body内に記述する。 スタイルシートは使用するページのテンプレートCSSにコピペする（上級者モード） テンプレートのアンカータグにrel属性入れる 一番大きなポイントはCSS。 外部ファイルにしたCSSはヘッダにリンク入れないと反映されないので、scriptと同様にbody直下にリンクしても使えない。 ColorMe!ShopProはヘッダの操作が出来ないものの、テンプレートの各ページ（商品詳細画面やカテゴリ画面）ごとに使用するＣＳＳをテキスト
小粋空間: Highslide JS でサムネイル画像を拡大表示する
サムネイル画像をクールに拡大表示する Highslide JS を利用する方法を紹介します。内容は Movable Type をサンプルにしていますが、他のブログ等でも応用できると思います。 WordPress ではプラグイン WPJ-Highslide 0.2 が利用できるみたいです。 とりあえず下記のサンプル画像をクリックしてください。拡大表示された画像の上でクリックすると元に戻ります。 拡大ツールでは、当サイトでも紹介している Lightbox JS が有名ですが、この Highslide JS は下記の特徴があります。 拡大画像の下にキャプション（タイトル）の挿入が可能 ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示） 拡大画像のドラッグが可能 以下、カスタマイズ方法です。ここではダウンロード時のバージョン 2.2.74.0.6 で話を進めます。
Highslide JS - JavaScript thumbnail viewer
What is Highslide JS? Highslide JS is an image, media and gallery viewer written in JavaScript. These are some of its advantages: Tip! Use the visual Highslide Editor to set up your Highslide installation without writing code. Quick and elegant looking. No plugins like Flash or Java required. Popup blockers are no problem. The content opens within the active browser window. Single click. After ope
Highslide JS-サムネール画像を拡大表示するスマートなjavascript - WEBデザイン BLOG
サムネールをクリックすると同一ウィンドウ上に画像を表示するというjavascriptでLightbox JS・Lightbox が有名かと思います。以前からあまりスマートではないと思っていたら、スマートにしたタイプのHighslide JSが公開されていましたので紹介します。 Highslide JS-サムネールをクリックすると同一ウィンドウ上に画像を表示します。サムネイル画像をワンクリックで拡大画像表示、そして拡大画像をワンクリックでサムネイル画像に戻します。とってもスマートです。Lightbox JSよりも若干ストレスなく画像表示できます。 Highslide JS - JavaScript thumbnail viewer http://vikjavev.no/highslide/ IE 4.0・Netscape 4.79には対応していませんが、その他の最新ブラウザには対応しています
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」:phpspot開発日誌
http://zeitgeistwebdesign.com/wordpress/?p=42