デザイン×テクノロジーで新しいサイトを創り続けるLETTERS.INCの制作物から心地よいアニメーションを学んでみるVol.1 – T2
デザイン×テクノロジーで新しいサイトを創り続けるLETTERS.INCの制作物から心地よいアニメーションを学んでみるVol.1 10月 7, 2015 tanamako 読了: 約 2 分 最近様々なサイトで、デザインとテクノロジーの掛け算が素晴らしい『Letters.inc』が制作したサイトが取り上げられている。心地よいアニメーションと綺麗・シンプルでありながらも印象に残るデザインが特徴的だ。平凡な二次元的なデザインやインタラクションではなく、見るものを惹き付ける心地よいアニメーションの裏側はどのように創られているのか一部アニメーションのソースを見ながら学んでみる。 こういう発想があったのかという手紙のアニメーション 今回アニメーションの参考にしたサイトはこちら。 http://amp-music.net/about/howtobuy/ AMP MUSICというチームにミュージシャンが所
ディレクターでもコピペで簡単実装出来るGoogle Analyticsのイベントトラッキング – T2
ディレクターでもコピペで簡単実装出来るGoogle Analyticsのイベントトラッキング 10月 1, 2015 tanamako 読了: 約 3 分 Google Analyticsを使ってサイトやメディアの分析をしている方が多いかと思います。グーグルアナリティクスで、ページのトラッキングだけでなく、ディレクターの要望に応じて『このリンクのイベント数を計測したい』という事があるかと思います。または、エンジニアの力を借りる事なく簡単に計測できるようにしたいという事がある場合に簡単にコピペで取得できる方法をご紹介します。 JS側の設定 // 現在表示されているURLを取得 function getUrl(){ return location.href.replace(/\#.*$/, '').replace(/\?.*$/, ''); } // aタグに付与 $('.js-gaTrack
Web・ホームページ制作の競争優位性は価格(安さ)、スピード、デザイン、技術力のどれになるか – T2
Web・ホームページ制作の競争優位性は価格(安さ)、スピード、デザイン、技術力のどれになるか 10月 1, 2015 tanamako 読了: 約 4 分 Web、ホームページ制作のツール(CMS)が増えて、一般に普及しており安価に、ある程度誰にでも制作を出来るようになってきました。更にクラウドソーシングサービスの成長で、フリーランス等の小さなチームに低単価で仕事を依頼するという流れがここ2年位あると実感しています。この流れはより進んでいくのではないかと思いますが、Web・ホームページ制作の競争優位性はどこになるのか、どこを伸ばすべきでどういう組織形成、受発注の仕組みを作るべきなのか考えてみます。 クラウドソーシングサービスによって価格が低下している？ ランサーズやクラウドワークスという発注者と受注する会社もしくは個人を繋ぐサービスが増えてきていますが、クラウドソーシングする事によって、価
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。 開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間 この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。 まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる
prefixMyCSS
CSS3 Supported Properties Full support Partial support No support animation background-clip background-origin background-size border-radius box-shadow gradient (linear) gradient (radial) transform 2D transform 3D transition How it works It's easy, fast and free. You can now use powerful CSS3 techniques, and don't waste your time writing each properties. First, write your codefor your loved browser
CSS3で斜めに傾いたメニューを作る時のメモ | Webクリエイターのメモ帳
このサイトの右上に斜めになったメニューがありますが、これはCSS3（+背景画像）でできています。 IEの場合はスタイルシートを変更して画像で再現されるようにしています。 このメニューをCSS3で作るときに若干コツがいったので、CSS3で斜めに傾いたメニューを作る時のメモ。 HTMLコード HTMLコードはこのような最小限でシンプルなもので実装しています。 </p> <ul> <li id="demo-menu1" class="demo-menu"><a href="./">MENU1</a></li> <li id="demo-menu2" class="demo-menu"><a href="./">MENU2</a></li> <li id="demo-menu3" class="demo-menu"><a href="./">MENU3</a></li> <li id="demo
デザイナは要注目！ 明日から語れるHTML5＆CSS3
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（3/4 ページ） HTML5の新しいタグ＜canvas＞＜video＞＜audio＞とは HTML5に追加されたタグの代表的なものを2つ紹介します。新しい表現の可能性を感じることができると思います。 ＜canvas＞タグ ＜canvas＞タグはJavaScriptで図形を描画できるエリアを生成します。＜canvas＞タグは応用次第で、さまざまな用途に使うことができます。 例えば、円グラフを更新するとします。従来であれば数値に合わせて円グラフの画像を作成し、GIFやPNG画像として出力して更新することになるでしょう。しかし＜canvas＞タグを使うと、JavaScriptの数値を変更するだけで円グラフを描画できるので、画像を作成する手間を省くことが可能となります。 例えば、カヤックの技術部ブログでも＜ca
ウノウラボ Unoh Labs: DOMろうTouchコンテンツ
Flashエンジニアnao ozawaです。最近あんまりゴリゴリとFlashでコーディングしていません。なんでかなぁ！まるで働いていないみたいじゃないですか。一応ちゃんと仕事してるんですよ？ まぁ、そんな感じの毎日なので、実はここ数日、作業のかたわら、スマートフォン向けページのレイアウト方法を色々考えております。 ・ブラウザの画面回転するのめんどくさくね？ みなさんご存知のように、iPhoneを筆頭に最近のスマートフォンは、携帯を横に向けると、合わせてくるりと画面が横レイアウトに変わります。斯(か)く言う私も初めてソレに遭遇したときには驚きを隠せず、暫くは日がな一日iPhoneをくりくりと縦にしたり横にしたりして過ごしていたものです。それはそれは楽しかった。 が、しかし、最近スマートフォン向けのページを作る具体策を考えてみて、はじめて気がついたのです。 画面の幅が変わるのって、めんど
有料から無料になったCSS3による42種のウェブアプリボタンセット「Zocial」
もともとは24ドル(約1800円)の有料セットだったのですが、今は無料でダウンロード可能なのが「Zocial」です。42種類のCSS3によるフォントフェイス(font-face)と、ベクター形式によって自由なサイズでキレイに描画できるアイコンボタンの組み合わせとなっています。 Zocial ~ CSS3 Buttons, Sass Framework. http://zocialbuttons.com/ Zocial | CSS3 Button Set http://zocial.smcllns.com/ ダウンロードは下記サイトの「ZIP」ボタンをクリックすれば可能です。 samcollins/css-social-buttons - GitHub https://github.com/samcollins/css-social-buttons/ サンプルは以下から閲覧可能。 Zocia
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stroll.js - CSS3 Scroll Effects