たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
Web design, UI/UX Design, Drupal - PETEX STUDIO
Hi guys, my name is Feijing (Pete) Xu, born in Beijing, China, currently reside in Vancouver, Canada. I have been working in this area for over a decade. I'm passionate about what I do, I love being creative and I hope this comes through in all the work I do. To me, there are several aspects are important when designing a website: usability, functionality, good interaction of shapes and colors.
75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine
In this two-part overview, we feature some of the most useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. We hope that this overview will help you find or rediscover some tools that you could use in your next projects. If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was c
マウスにあわせて画像が3D的に追従するサイトを簡単に作れるjQuery jParallaxプラグイン
jParallaxの紹介とデモ jParallaxプラグインは、マウスに合わせて奥行き感のある3Dのような動きを実現できる、パララックス系のプラグインです。簡単なコードだけで、インタラクティブなエフェクトがかけられるので、JavaScriptが得意でない方でも設置できると思います。 とりあえず、どんなものか下のようなデモを作ってみましたので、見てみてください。 デモを見る 仕組み 下のような感じで、画像を重ねマウス量に応じてそれぞれ、スライドさせています。 jParallaxを使えば、画像を重ねたりマウスに応じて画像をスライドといったことをすべてやってくれます。 使い方 基本的な使い方は、とても簡単で、パララックスさせる複数枚の画像をDIVタグで囲み、 そのDIVタグに対して、jparallax() を呼び出すだけです。 <!DOCTYPE html> <html lang="ja"> <
テキストのサイズを調整し、両端をピッタリと揃えて表示するスクリプト・slabTextをWPプラグインとして日本語環境に対応・WP slabText
ご連絡頂いて、良さ気だったので ご紹介。以前記事にした、テキスト の両端を揃えるタイポグラフィ系 のスクリプト・slabTextを日本語 でも利用出来るようにし、且つWP で利用出来るようにしてくれました。 今年の1月くらいにご紹介したslabTextをWPで、且つ日本語で利用出来る、というプラグインです。slabTextに関しては以前の記事をご参照下さい。 テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT 過去記事でも書いたように、普通に使っても日本語環境で使うのは若干微妙でした。（単語単位で半角スペースを入れる必要があった）これをうまく解消してくれているので需要も結構あるのでは無いかなと思います。 もともと目をつけていたスクリプトだったので日本語環境で利用出来るようになったのはとても嬉しいです。スクリプトの開発者さんは
40 Useful jQuery Image And Content Sliders
jQuery has made the lives of developers extremely easy, thank to its efficiency and the availability of a plethora of plugins for different purposes. The plugins have enabled even amateur designers to create such amazing things, which before jQuery only professional and experienced designers could make. Many different kinds of jQuery plugins are being released everyday which can help you achieve a
アニメーションでレイアウトを変更するMasonryを使ったポートフォリオのテンプレート
グリッドベースに配置されたパネルをダイナミックなアニメーションで配置変更するポートフォリオ用のテンプレートを紹介します。 Expanding Fullscreen Grid Portfolio オンラインデモ [ad#ad-2] Masonryは以前紹介した「パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry」のjQueryのプラグインで、パネルをグリッド状に配置し、ブラウザのサイズを変更すると、それに合わせてアニメーションでパネルの配置を変更します。 スライドショー時のキャプチャ 実装 ダウンロードファイルには、HTML, JS, CSSなど一式が揃っています。 コンテンツは必要な箇所のみ変更するだけで、そのまま利用できると思います。 HTML 最初に表示されるパネルのHTMLです。 <div class="item block" data-bgimage="imag
Simple Way to Random Display or Rotate Content Using JavaScript and CSS | Css Globe
In a project I did recently there was a need for randomly displayed content in form of one of those "Did you know" tips. There were 8 to 10 paragraphs of text and client wanted to display just one randomly chosen. Since that was the static site I decided to go with front end solution. I am aware that there are many more elegant back-end solutions but read on and you'll see that there are advantage
[JS]文字にアニメーションを使った面白いエフェクトを与えるスクリプト -Text Effects
Scrambled Writer 文字をごちゃまぜにし、アニメーションで元通りにします。 Text Effectsの使い方 Text Effectsの使い方は簡単で、「jquery.js」と当スクリプトを外部ファイルとして記述し、スクリプトを実行するだけです。 「Typewriter」を例にすると、下記のようになります。 HTML <div id="my-container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip e
[JS]jQueryのプラグイン33+1選 -2012年2・3月
Camera 表示サイズに合わせて最適なレイアウトを提供するResponsive Design対応のスライドショー。
Jon Montenegro | award winning interactive creative design and art
creative Jon ux Montenegro direction communicate art modern director idea gallerys perfection create concepts typography selected Work experience augmented reality ar bright semantic infographics mobile ux philadelphia publications visual design user apps exhibit peace architecture research interface design arts interactive us calm awards museum ethnography found cloud photography blog clear webwa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...