[JS]CSS3アニメーションを時間ではなく、距離でコントロールするスクリプト -Approachオブジェクトに近くなるほど、不透明度を増やしたり、サイズを大きくしたりなど、距離でCSS3アニメーションをコントロールするjQueryのプラグインを紹介します。 Approach [ad#ad-2] Approachとは Approachのデモ Approachの使い方 Approachとは 通常、CSS3アニメーションは時間でコントロールしますが、Approachは距離でコントロールします。 例えば、下記のように右のオブジェクトから離れると透明で、右に近づくにつれ不透明度が増えます。
超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル:phpspot開発日誌
Swatch Book with CSS3 and jQuery | Codrops 超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル。 次のような綺麗なデザインの単語帳っぽいものを実装するチュートリアルです。クリックすればインタラクティブに回転等を加えながら動くのが特徴です。 CSS3によって秀逸にデザインされているため、質感はかなり美しく、更にアニメーション等の動きが加わることでよりリアルになってます。 若干動きがもっさりしているようですが、一度見ておいて損はないデモです 一昔前は、ちょっとWEBのデザインが上手であればプロに間違われるなんてこともありましたが、こういうのが当たり前になってくると、プロとアマの差がどんどん広がってくるのかもしれませんね。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル コンテンツをアニメーションさせつつ切り替えるタブを
[CSS]これは使ってみたい、繊細で美しいツールチップを実装するチュートリアル
How to create animated tooltips with CSS3 [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーション、擬似要素を使用しているため、Firefox, Chrome, Safariでご覧ください。 Demo 4 最初にぼんやりと大きなツールチップが表示され、縮小とともにはっきりとツールチップを表示します。 実装 HTML ツールチップはリスト要素で、各アイテムはa要素で実装されています。 <ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble
5分で習得できる Photoshop CS5 でキラーンと光る GIF アニメーションを作るチュートリアル
以上のようなアニメ GIF を作成するチュートリアルです。 キラーンとさせたい画像を Photoshop CS5 で開く 何か光らせたいバッチなら何でも良いです。 実はとても簡単なキラーンを作る 以下のようにまず白色の長細いシェイプを作ります。 そのシェイプを45度程度くらい傾けます。 シェイプの透明度を40%くらいにします。 キラーンの流れのフレームを作る 次にアニメーションを作ります。ウィンドウからアニメーションを開きます。 既に上の画像の右下に丁寧に矢印を付けておきました、コレをクリックするとフレームが出てきます。 既に丁寧に矢印があります。ここをクリックして秒数を2秒に変更です。また変更したらついでに以下の画像の中に赤枠で囲ったところをクリックしてフレームを新規作成しておきます。これが始点と終点となります。いわゆる今回の場合はスタンバイという感じで。 次に先ほど作ったような適当な感
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
