[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック | コリス

2014/07/01 230 users エフェクト アニメーションgif タップ デモ コリス

Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 上記はデモをアニメーションgifにしたもので、実際の動作は下記ペー... 続きを読む

multiscroll.js - パララックスとはまた違うスクロールエフェクト MOONGIFT

2014/06/12 55 users パララックスエフェクト パララックス MOONGIFT 上下

パララックスエフェクトに代表されるようにスクロールで新しい視覚効果を生み出す試みがされています。単純な上下のスクロールでは得られない大きなインパクトを訪問者に与えることができます。 その新しい手法として紹介したいのがmultiscroll.jsです。スクロールによって起こる新しいエフェクトを楽しんでください。 multiscroll.jsの使い方 何はともあれ動画を見るのが一番分かりやすいかと思い... 続きを読む

[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ | コリス

2012/11/08 549 users ズーム 縮小 ホバー時 HTML コリス

シンプルなHTMLで画像を配置し、ホバー時にかっこいい新しいエフェクトを与える10個のスタイルシートを紹介します。 どのコードもコピペですぐに使えますよ。 10 Easy Image Hover Effects You Can Copy and Paste ホバーしたらズームで拡大 ホバーしたらズームで縮小 ホバーしたら水平にパン ホバーしたら垂直にパン ホバーしたら少し傾ける ホバーしたら回転し... 続きを読む