マウスオーバーで紙がペロっとめくれ上がる演出を実現するコード 『3D Hover Folding Effect』
3D Hover Folding Effect By Silke Voigts 紙に見立てたエリアをマウスオーバーすることで、ぺろっとめくれ上がる演出がアニメーション化されたものです、めくれ上がった下に何か […]
スクロールに連動してキャラが落下していくさまを表現したアニメーション 『Falling Down the Rabbit Hole』
よく出来た演出で、背景とキャラクターもとてもいいかんじです GIFアニメだと少しわかりにくいかもしれないのですあ、ぜひリンク先で体験してみてください
テーレッテレーと効果音を付けたくなる、カラフルな集中線が回転するアニメーション 『Colored rays on SVG』
実用性というか、少しネタ的なものですが SVGを使えば、画像を拡大しても画質が下がることがないので、その特性を活かしてレスポンシブでも背景全体が回っているかのように演出することが出来ます。
フッターをfixedで固定したちょっとしたパララックス効果を与える演出 『Fixed footer』
フッター部分をposition: fixed;で固定することで、ページをスクロールしていった時に視覚効果を与えるようになっています
CSSだけで作られたToggleボタン5つのデザイン 『Pure CSS toggle buttons』
javascriptを使わずCSSだけで実現したtoggleボタンと5つのデザイン checkboxを使ってtoggleボタンを実現しています
SVGでアニメーション効果を与えたイカしたチェックボックスとラジオボタンのデザインの8種 『Checkboxes and Radio Buttons with SVG』
SVGを使ったアニメーションで、チェックボックス、ラジオボタンをクリックした時にチェックする様をアニメーションで表したものです、全部で8種類のパターンが作られており、ひとつはお気に入りのものが見つかるかな？と思います
ちょっと水に濡れた所で絵の具で描いたかのような滲む感じがあるタイポグラフィ 『Physical Typography – Resonate 2014』
なんとも、不思議でカッコイイ、タイポグラフィ 絵の具が水で滲む感じの演出です 色はランダムに変化していきます
SVGフィルターで写真をマウスポインターがあるところにフォーカスされる効果を実現するテクニック 『Depth of field effect with SVG filters』
Depth of field effect with SVG filters By vcurd マウスポインターを画像の上で動かすと、マウスポインターがあるところがフォーカスされるように表現されます、SVGフィルターを使 […]
360度のパノラマ画像をスクリーンに写しだして表示しているかのように見せるテクニック 『Panoramic (pure CSS)』
CSSのみでパノラマ写真を360度回転させながら、その場で周りを見渡しているかのようにするテクニック。
ページのスクロールに合わせてプログレスバーが進むアイディア 『Reading Position Indicator』
ページの全体のどれ位の位置にいるかが分かるようになっている、ページのスクロールに連動したプログレスバーです。
マウスオーバーによる、表示の切替とjQueryをつかってdataを読み込むテクニックを使ったデザイン
Pen By Arron Hunt プロフィールの下にあるアイコンをマウスオーバーすることで、スイッチが入りそれに関連した情報が表示されるようになっています、またマウスオーバーした後でもスイッチは有効のままで表示されたま […]
マウスと連動して背景が動くパララックス効果を使ったキュートなデザイン 『Simple Parallax with jQuery』
マウスを動かすことで、背景の一部が連投して動くパララックス効果を使った背景です。 また、背景もキュートでポップなデザインで完成度が高いです。
複数の違ったサイズの画像を決まったサイズのブロック内に最大の大きさで天地中央(上下、左右で中央)で表示するテクニック 『Vertical/Horizontal Centering』
画像をブロック内で天地中央表示するテクニック
真似したくなっちゃう良質なポートフォリオデザインとHoverアクション 『Portfolio Selector』
Hoverを使ったアクションで初期状態では見切れている画像の部分が中央へ移動するアクションです
バーガーボタンの作成とアニメーションのアイディア 『Starbucks Mobile Nav Hamburger』
バーガーボタンの三本線の方を作ったんではなくて、背景を緑にして、その上にbeforeとafterで棒線をつくりそれがアニメーションしてクロスするというものです
レスポンシブに画面幅が狭くなると簡素に変形していくアイコンが新しい 『Pure CSS Responsive icons (one div)』
色々なレスポンシブデザインがありますが、アイコンをレスポンシブにしちゃうんなんて驚き。全くもって私にはこんな発想がなかったので驚きと、新しいボキャブラリーというか、WEB制作での引出しが増えるわけで、喜びを感じます
入力フォームにフォーカスすると鉛筆でカキカキするアニメーションを表示するアイディア 『Simple focus in/out input animation』
inputのフォーカスすることで、入力中であるアニメーションを表示させるアイディアです フォーカスするとPENが左から現れて、カキカキとアニメーションするのが入力中だというのがわかりやすくて良い
画像を右クリックでメニューを出現させるテクニック 『Radial context menu』
子猫の画像の上でマウスの右クリックをすることで、円盤のメニューが出現します 円盤にはなにか機能を付けたりSNSへの共有のリンクを付けたりして使えます
CSSのコピペだけで出来る良質な5つのグラデーション 『Gradients By boltaway』
Gradients By boltaway いい感じのグラデーション5種です。コピペでそのまま使えちゃいます カラーコディネートとか、グラデーションの作成とか得意な方じゃないのでこういうのは助かりますね & […]
ギフトボックスをイメージして作られたパララックスがおもしろ、楽しい 『Gift box』
プレゼントの包み紙を解いて、そして箱を開けるというのをスクロールしていくことで、表現するパララックスです 下にスクロールしているのに、リボンが横にスライドしていくのはなんだか不思議な感じもします
