これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識
この"easeInQuad"にあたる部分が、イージングです！ イージングを設定することで、動きに、勢いや波をつけることができます。 イージングを設定して、ボールを左右に動かしたものがこちら！ ちなみに、イージングがないとこんな感じです。 イージングを使いこなそう！ イージングは結構、種類が多いです。 例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています！ でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか？ 今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、 それぞれのイージングの特徴と、使いどころを紹介します！ ちょっと、注意事項 CSSや、jQueryでのアニメーションのやり方 今回はアニメーションのやり方そのものについては、説明を省き、イージングの話を中心に書きます。
Webサービス運営で覚えておきたい、登録フォーム作成の7つのポイント
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！ 中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。 Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
UFOを操ろう！ HTML5+JavaScriptで実装するスマホコントローラーの仕組み。
HTML5ゲームの投稿プラットフォーム「jsdo.it HTML5-Games」がスタート！ HTMLファイ部ほんだです。 カヤックの新規開発事業部「ブッコミジャパン」が、 HTML5ゲームをあそべる、つくれるプラットフォーム「jsdo.it HTML5-Games」をリリースしました！ jsdo.it（弊社運営のHTML5コード共有サイト）からHTML5ゲームを簡単に投稿でき、 他のクリエイターによって投稿されたゲームを無料で遊べます！ また、スマートフォンをコントローラーにしたゲームを簡単につくれるようになる JavaScriptライブラリ「jsdoitController.js」もリリースしました。 今回は「jsdoitController.js」で使えるようになる 「jsdo.it WebSocket Controller」（以下：jsdo.it コントローラー）の 仕組みについて
もしもフロントエンジニアがSVG女子をイジったら。音声認識やfpsコントローラなど本気だしすぎな件
SVG女子が公開されて2週間がたちました たいへん多くの方に視聴していただいているようで、感激しています！ 「SVG」がすっかりバズワードになっていますね。 まだの方はぜひご覧ください！ SVG女子を見る SVG女子にはユーザーが自由にイジってオリジナル作品を作れるモードがあります。 いわゆる「神モード」というやつです。 この「神モード」に公開直後から多くの作品が集まっています。（嬉しい！） SVGはJavaScriptから操作できることが特徴です。 色を変えることはもちろん、オブジェクトを変形させたり 再生速度を変えることもJavaScriptからできてしまうんですね。 このSVG女子がすごい！今見ておくべきフロントエンジニアの本気！ セピアカラー カラフルなSVG女子の世界がセピア色になってます。 再生する（SVG女子のページに飛びます） コードを見る SVG女子の消失 アイちゃんが消
携帯デザイナー必修科目！容量を増やさずリッチなバナーを作るコツ
こんにちは(✿´艸`✿) 今日は携帯を家に忘れて、何をしても落ち着かない一日を過ごしてます。 携帯中毒の YURIっぺ です。 今回はドットの素材を使った、軽い携帯バナーの作り方をご紹介します！ ついでにフリーで素材もお配りしてますので、気軽にダウンロードしてくださいませ。 手順１、まず始めに、ドットで描いた模様を用意します！ 今回はシンプル（black）を使って作っていきます。(この素材はページの下の方でダウンロードできます) 手順２、ドットで作成した模様、シンプル(black)を好みの色に変えて２枚重ねます。 同じように3パターン用意しました。 画像右にある丸の中の拡大画像を見てみてください。ここで使われている色数はそれぞれ2色です。 色数を減らせば軽くなるgif画像で描きだすと166バイト前後でとても軽いことがわかります。 手順３、バナーの背景に手順２で作成した素材をいれます。 この
ところでiPadアプリってどうやって作るの？てなったときに読む記事
こんにちわ。4-ROOMSが終了なんてショック過ぎ！やしこです。 最近iPadのデザインに関わる機会がありまして、情報がまだまだ少なかったのでまとめてみました これからiPadのデザインをする方のお役に立てばうれしいです 今回はTwitterクライアントやリーダーで主流な２カラム型のアプリデザインです ePub（電子書籍）の作り方は先月のMDNで特集されていました iPadにしか見られない（WEBにない）仕様 縦横で画面構成が変わる iPadはiPhoneと同じく持ち方によって画面レイアウトが変形します。 縦横２パターンデザインする必要があります 意外とデザインをモニタの中だけで詰めていくと忘れる動きなので はじめにワイヤーに盛り込まれているか確認した方が良いと思います。 PopOver 項目の詳細を見たいときは画面遷移ではなくてPopOverとよばれる吹き出しのようなものがオーバーレイし
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
ドキッ！デザイナーのバッグの中身拝見！
皆様こんにちは！いつもはデザイナーたちのアウトプットを紹介していますが、今回は kayacデザイナー達のこだわりの身の回りアイテムを紹介していきたいと思います！ ...という名目で、抜き打ち荷物検査を行いました！！いったい何が出てくるのか！？ hashimotoの鞄の中 鞄はユニクロの真っ白なやつを使ってます。 ■CROQUIS 100sheets maruman ss クロッキー帳。メモ帳としても、落書き帳にもできる、程よい大きさが使いやすいです。ロゴマークが鼻から飛び出てる鼻毛に見えるので好きです。 ■ステッドラー トリプラス ペン。人間工学に基づいて設計された三角のグリップがにぎりやすいです。あところころ転がらないのでうれしい。描き味もよく線の強弱がつけやすいのでイラストを描くときに重宝しています。 ■GUM #211 かため 歯ブラシ。ボディの配色がいいです。 中でも取っ手が紫でブ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
みんなでつくるフォント「FONTA」に投稿された、秀逸すぎるタイポグラフィのまとめ
地獄のミサワがCSS3の勉強に最適と話題に