画像を永遠とループさせたりしようぜ。 このスクリプトの内容について © Company 2012
湯気をもわもわ出すような。画像をゆっくりと永遠とループさせる
画像を永遠とループさせたりしようぜ。 このスクリプトの内容について © Company 2012
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
【爆速】Photoshopで作る湯気の作り方 - YouKnow.jp
みるだけでよだれが滴るおいしい料理写真をつくるよ。 言うまでもないことだけどさ、おいしい料理といえば、あつあつ感。 あつあつ感に必要なのは湯気。 WEB業界的には「湯気つけときゃうまそうに見える」っていう都市伝説があるよ。 今回は料理写真をおいしく見せるために、Photoshopで作る湯気の作り方を紹介するよ。 さらに今回は、アクション機能を使って、2回目以降から文字通り一瞬で湯気がつけられるようにするよ。 今回の記事では、この見るからにおいしそうな画像に湯気をつけてこのように加工するよ。 この画像はゆん無料壁紙画像集様からお借りしています。ありがとうございます。 料理をおいしく見せる湯気の作り方Step1.加工したい画像を開く 加工したい画像をPhotoshopで開きます。 Step2.湯気を作る このStep2をアクションに保存しておくと、次回から一瞬で湯気を制作することが出来ます。
写真・画像編集 | KSクリエイト・長野の映像制作・写真撮影サービス
SILKYPIXは使いにくい？プロが教えるSILKYPIX Developer Studio Pro 11の効果な使い方
「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の幅サイズ分、右にオフセットして画像の右端と左端が継ぎ目なく繋がるようになっています。 マ
美術が「２」だったEngineerでも作れるCSS アニメーション - Qiita
はじめに ホットペッパー グルメで開発を担当しているSE(Standing Engineer)の小山瑞樹 (こやまみずき)です。 担当はWebアプリケーションのServer Sideの実装(Java)ですが、最近はWeb Front EndでA/Bテストの実装(JavaScript+CSS)をメインに開発しています。 さて、私の所属するチームでは普段はこの記事みたいに少しずつ美味しいものを堪能するコース料理のようなA/Bテストをたくさん回しているのですが、なんとなくホールケーキをドカ食いしてもいいんじゃないかという気がする瞬間がやってきて画面一面をジャックしてしまうA/Bテストを実施することもあります。 （例：ハロウィンの施策） このときのアニメーションの実装がなかなか楽しかったので、作り方の整理の意味をこめてCSSで作るアニメーションの基本的なところを書いてみます。 作ってみるもの せっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Puffing Smoke Effect in jQuery
jsdo.it
jsdo.it