第6回 裁ち落としてインパクトのあるデザインを作る | gihyo.jp
ユーザビリティを落とさずインパクトを出すには 雑誌などで、ページサイズいっぱいに画像を配置したデザインをよく見ますよね。 写真を全面にレイアウトすることで、インパクトを出すことができます。 今回は、同様の効果をウェブで実現する方法を解説します。 ここ数年、ブラウザサイズいっぱい（width:100%）に背景画像などを敷いたサイトを多く見かけるようになりました。ただ、パターン画像ならリピートすればいいですが、1枚絵だとそうはいきません。1枚絵を背景にする場合、以下の3つくらいの方法が考えられます。 backgroundとの輪郭をはっきりさせた形で、画像のサイズでぶつ切りにする グラデーションさせるなどして、backgroundの色となじませる ウィンドウサイズを固定値にする 1と2は、制約のある中でのデザインになるため、自由度が下がります。 3は、デザインする枠のサイズを決められるため、自由
第3回 トップページを彩るスライドショーのポイント | gihyo.jp
その他、speedやtimeout、pause（0：マウスオーバ時にスライドをストップしない、1：マウスオーバ時にスライドをストップする）などで細かく動きを指定することもできます。 そのほかにも指定可能なオプションはたくさんあり、「jQuery Cycle Plugin - Option Reference」で確認することができます。 スライドのコンテンツとナビゲーションを指定する 次に、bodyタグ内のXHTMLソースを見ていきます。 XHTMLソース（bodyタグ内） <div id="slider"> <div id="slideshow"> <div class="slider-item"> <div class="text_item"> <h2>Wonderful elephants<br /> living abroad.</h2> <p>フェードイン&アウトするシン
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
[JS]ホバー時、ふんわりとバウンドするモーションをつけるスクリプト
マウスのホバー時に、ふんわりとバウンドするモーションをつけるスクリプトをJanko at Warp Speedから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript"> $(document).ready(function(){ $(".button").hover(function(){ $(".button img") .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump .animate({top:"-6px"}, 100).ani
[JS]複数のパネルをアニメーションでスライドして切り替えるスクリプト -Sliding Tab Menu
サイドバーなどの省スペースにぴったりな、複数のパネルをスムーズなアニメーションでスライドして切り替えるスクリプトをQuenessから紹介します。 jQuery Sliding Tab Menu for Sidebar Tutorial demo デモでは、タブをクリックすると、それに対応したパネルがスライドして表示されます。 各パネルはコンテンツの量に合わせてサイズが調整されます。 タブとパネルはそれぞれdiv要素で実装されており、スライドのアニメーションにはjQueryとjQuery.ScrollToが使用されています。
Brian Reindel | Fantasy and Science Fiction Author
Welcome! My name is Brian Reindel, and I write fantasy and science fiction. If you enjoy reading short stories containing the paranormal, supernatural, aliens, other worlds and fascinating characters, then you're in the right place. Ray Bradbury, Isaac Asimov, Arthur C. Clarke and John Wyndham are my primary author influences, including a healthy dose of "The Twilight Zone" and "X-Files" — all add
[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a
![[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f7120768ce8f7380b64d8daf3a7d52402809916/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030405.png)
新規サイトを構築するリソースがパッケージになった -Easy front-end framework
HTMLをはじめ、CSSやJavaScriptなどで実装するフロントエンドの主要な機能が一つのパッケージになった「Easy front-end framework」を紹介します。
第17回 「その場編集」を実装する | gihyo.jp
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 本来であれば、上記の仕組みの４の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu
[JS]動作が軽快なパネルを水平・垂直にスライドするスクリプト -Easy Slider
リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。 Easy Slider 1.5 demo パネルには画像やテキストなどを配置することが可能で、スライドのコントローラーはテキストベースのものやグラフィカルなものを使用することができます。 demo 1（スタイルは無し） demo 2（スタイルを適用） demo 3（スタイル無しで垂直方向に） demo 4（スタイル適用、自動スライド） demo 5（複数のスライダーを設置） スクリプトのオプションでは、スライドのスピード、スライドの自動・手動、ポーズの時間などを調整することができます。 Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
第13回 フルスクリーンで背景画像を表示するには | gihyo.jp
Webでも裁ち落としでインパクトを出せる DTPでは、1ページ内に写真を裁ち落としでページいっぱいに載せ、その上に文字を置くのは定番のデザイン。でも、Webでそれを表現するのはなかなか難しいものです。ユーザーによってディスプレイの解像度や利用するブラウザが違うためです。 現在、多くの解像度やブラウザに対応できるように、widthを固定し、コンテンツをセンター配置にすることが多くなっています。その分、うまくフルスクリーンで表現できれば、することができれば、より一層かっこよさやインパクトを与えることができます。 今回ご紹介するのは、JavaScriptを使い、フルスクリーンで背景画像を表示する方法です。第6回「裁ち落としてインパクトのあるデザインを作るでも同じようなUIをご紹介しましたが、IE6で縦スクロールが出てしまうという欠点があります。オプションの充実度からも、今回のやり方のほうが使いや
Purplecoat.js | Simple Labeled Overlays
Step 0: Add purplecoat-min.js along with jQuery. <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="http://ellekasai.github.io/purplecoat.js/purplecoat.min.js"></script> Step 1: Add data-purplecoat="foo" and data-purplecoat-label="Hello!" to any element. <img data-purplecoat="foo" data-purplecoat-label="Hello!" src="http:/
[JS]ナビゲーションの現在位置の表示を自動で変更するスクリプト
ナビゲーションの現在位置を取得し、要素にクラス（activeなど）を追加してデザインを変更するスクリプトをCSS newbieから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea>
[JS]二つのパネルをダイナミックにずらして表示するコンテンツスライダー -dualSlider
左右に配置された二つのパネルをスライドのタイミングをずらして表示するコンテンツスライダーを紹介します。 dualSlider ※注意 IEでアクセスすると「Virus.DOS.Albania.429」が検出されます。当方はFirefoxでアクセスしていため気がつきませんでした。 しかしながら、スクリプト自体はかっこいいので、いつか解消されることを期待しつつURLを記載しておきます。 http://www.hugoandcat.com/DualSlider/index.html コンテンツスライダーの操作は自動と手動があり、自動と手動の切り替えは右上のボタン、手動の操作は右下で行います。 手動操作のインターフェイス dualSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。 スクリプトのオプションでは自動・手動の切り替え、アニメーションのタイミングなどを設定
アニメーションで色が少しずつ変化するボタンを作成する三つのチュートリアル | コリス
マウスをフォーカスすると、アニメーションで色が少しずつ変化するボタンを作成するPhotoshopとHTML/CSSとJavaScriptの三つのチュートリアルをSix Revisionsから紹介します。 Create an Animated "Call to Action" Button demo チュートリアルは三部構成で、Photoshop編、HTML/CSS編、JavaScript編となっており、デモページではアニメーション有り版（JavaScript）、無し版（HTML/CSS）があります。 simple demo(アニメーション有り版） simple demo(アニメーション無し版） ボタンはCSSスプライトで実装されており、画像の作成もそれ用になっています。
第5回 jQuery UIによるユーザインターフェースの改良 | gihyo.jp
今回使用する「Dialog」「Draggables」「Droppables」「Sortables」に必要なファイルは以下の通りです。 themes/ jquery-1.2.3.min.js jquery.dimensions.js ui.mouse.js ui.resizable.js ui.dialog.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.droppable.ext.js ui.sortable.ext.js ui.sortable.js jQuery UI 1.5bを使うために、今回は同梱されているjQuery 1.2.3を使うことにします。バージョンが上がりますが、これまでのサンプルの動作に影響はありません。 ライブラリの設定 ライブラリの各ファイルを、head要素の子要素に以下のように指定します（
Janko Jovanovic – Design Management + Coaching
For nearly 30 years, I’ve been navigating the many sides of design and product worlds: building products, leading teams, mentoring people, and shaping strategies. My work now blends Design & Product Leadership, Coaching, and Strategy & Futures to support others in making smart decisions and navigating increasing uncertainty and complexity. Coaching Strategic advising, mentoring, and coaching have
[JS]インタラクティブなインターフェイスを実装するJavaScriptのライブラリ -Glow | コリス
インタラクティブなタイムテーブルのUIなどを実装するJavaScriptのライブラリ「Glow」を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト
[JS]画像をダイナミックな上下のスライドで変更するスクリプト | コリス