2013年7月19日のブックマーク (2件)

  • 「HTML5で冷気を表現したサイトがすごいな」を分解してみた! / SQUEEZE - Web Design Studio -

    HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過pngで作成されたリアルな冷気画像を、少しずつ動かして描画します。(1)は右から左へ、(2)は時計まわり、(3)は上から下へ。 スムーズなループアニメーション (1)の右から左へのアニメーションの場合、同じ位置に同じサイズで<canvas>を2つ配置して、それぞれに同じ透過pngを描画します。片方は透過pngの幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ

    「HTML5で冷気を表現したサイトがすごいな」を分解してみた! / SQUEEZE - Web Design Studio -
    squeezejp
    squeezejp 2013/07/19
    分解してみました
  • ブログファン獲得!RSSリーダー 登録ボタン・リンク設置方法まとめ / SQUEEZE - Web Design Studio -

    7月2日「Google Reader」のサービス終了から2週間以上経過し、みなさんは代わりにどのRSSリーダーを常用するか固まって来た頃でしょうか。 どのサービスが人気なのか気になるところですが、各所ブログなどでは登録(購読)ボタンを公式に提供しているFeedlyボタンをよく目にするような気がします。 そこで今回は、ブログファン獲得のための各RSSリーダーの登録(購読)ボタン・リンクをご紹介します。 Feedly http://cloud.feedly.com/ ボタン設置ドキュメントhttp://www.feedly.com/factory.html 設置サンプル: 登録リンク青字部分にURLエンコードしたfeedを入れます。 <a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3a%2f%2ffeeds%2efeed

    ブログファン獲得!RSSリーダー 登録ボタン・リンク設置方法まとめ / SQUEEZE - Web Design Studio -
    squeezejp
    squeezejp 2013/07/19
    書きました。