United Pixelworkers | Cotton BureauUnited Pixelworkers is back. You've paid your dues. Rejoin the union today.
カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」:phpspot開発日誌
Baraja: A Plugin for Spreading Items in a Card-Like Fashion | Codrops カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」。 カードをシャッフルしたり広げたり、自在に操るアニメーションエフェクトを作成できるjQueryプラグイン。 こんなアニメーション機能が、ほとんどのブラウザでも使えたらまさに次世代になったなぁと実感できるのかも。 将来的はWEBはもっともっとリッチになっていそうです 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」
[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
間口一就 まぐちかずなりの、ウェブサイト
Q.バーからお食事処へ、そして現在は「純喫茶」へと進化！？ 反響はどうですか？New まずまずの反響かな？ロックフィッシュはお酒がなくても楽しめるよ。塩っぱいおつまみは出せないけど、ピザとかサンドウィッチとか、ちょいとひねりのある軽食スナックあるよ。 Q.3種類のノンアルコールカクテルも開発したんですね？New この世界だと、ノンアルカクテルは当たり前で、20代の時にいっぱいつくったよ。だからそんなに困らずに作ったよ。 出血大サービスだ！えい！ 純喫茶かさごのメニュー モクテル あのハイボール：900円 (完成度高し！呑まないとー！) ビタール：900円 (苦味を足したビール風) ジンジャーリッキー：900円 (ごくごく呑めちゃうレモンと生姜味) お食事 壺漬けのピザ：900円 (ん？？と思いますがとっても美味) コンビーフのピザトースト：900円 (コチュジャントマトでさっぱり) チーズ
幅のカスタマイズも可能なレスポンシブWebデザイン用の表示確認ツール・Responsivator - かちびと.net
レスポンシブWebデザインの表示 確認ツールです。よく見かける タイプのツールですが、OSSで ソースが公開されているので後 で自分のサーバーに入れようと 思ったので備忘録として。 よく見かける、複数のサイズの幅を同時に表示確認出来る、というやつです。幅の数値は設定可能です。 こういうやつ。URL入れてRESPONSIVATE!っていうボタンをクリックすれば表示確認出来ます。 ↑ 幅のサイズは変更できます。 URLも発行されるので他の方に見せるのも楽ですね。OSSとしてソースコードも公開されてます。これは導入してみようと思います。 Responsivator
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
[JS]テキストを揃えたり、文字間を調整したり、かっこいいアニメーションを適用したりするjQueryのプラグインのまとめ
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS | DevelopersIO
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
[対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です（まだ読んでない人はぜひ読んでください！）。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb（ジョイディープ・デブ）氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化
スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」:phpspot開発日誌
スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」 2012年09月10日- stickyMojo contained fixed position sticky sidebar jquery plugin スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」。 一昔まえだとスクロールする度にアニメーションして酔ってしまうようなナビゲーションが通常でしたが、FacebookのPC版右カラムのようにposition:fixedをうまく使ってページに固定されるナビゲーションを簡単に実装できます。 スクロール位置に応じてナビゲーションを固定するため、シームレスに固定されるのが特徴。 ページを開いた所 ページをスクロールした所。ページの左上に常に固定されるので、途中で移動し
[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
ロゴ入りのクールなQRコードが作れる「Unitag」:phpspot開発日誌
Unitag QR Generator- Create fancy QR Codes for free - Check out Premium access - Unitag - Connect to the world ロゴ入りのクールなQRコードが作れる「Unitag」。 WEBブラウザ上でサイトのロゴが入ったQRコードなどを簡単に作れるツールです サンプル例。なんかかっこいい。 ロゴ入り。こんなのでも読めるんですね ちょっとデザインされた感じのもの デザイナーの方はこういうところもデザインしたいということで、１つのツールとして試してみてもよさそう 関連エントリ Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
可変グリッドレイアウトなWebデザイン集めてみました
フォルクスワーゲン公式サイト
relish-style.net
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
https://design-spice.com/2012/06/13/responsive-web-design-image/