• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

Tips

簡単!超軽量!プラグインなしでページ遷移時にフェードイン・アウトさせる方法

簡単!超軽量!プラグインなしでページ遷移時にフェードイン・アウトさせる方法

サイト内の別ページへの切り替え時にフェードイン/フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。 例えば、以下のようなもの。 また、「PJAX」というjQueryプラグインを利用すると、非同期通信でウェブページ内の更新が必要な特定の範囲だけリンク先の別ページの…
CSS3のfilter:blurでぼかし効果をするとフチがぼやけるときの対処法

CSS3のfilter:blurでぼかし効果をするとフチがぼやけるときの対処法

CSS3の filterプロパティで blurを指定して背景画像やimgタグの画像にぼかし効果を施すと、ぼかし具合が大きいほど、対象要素のフチまでぼやけてしまって、なんだか美しくありませんね。 Webデザインをやってる方は、案外こんな経験をされた方もいるのではないでしょうか? というわけで、今回のTipsはfilter…
マウスオーバーで常にカーソル位置を向いて変形する3Dアニメーションサンプル

マウスオーバーで常にカーソル位置を向いて変形する3Dアニメーションサンプル

今回のTipsは、ある要素のマウスオーバー時にその要素が常にマウスカーソルの位置の方向を向いて目で追ってくるような、視差効果を伴った3次元アニメーションのコーディングサンプルをご紹介します。 まずは以下の完成イメージで表示された画像をマウスオーバーでぐりぐり動かしてみてください。 See the Pen 3D hove…
CSSのみでグローバルメニューを3Dアニメーションで開閉表示するサンプル

CSSのみでグローバルメニューを3Dアニメーションで開閉表示するサンプル

いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に移動するエフェクトのサンプルをご紹介します。 Javascriptは使用せず、CSSのみで表現してい…
スクロールに合わせて画像が徐々にぼやけていくエフェクトを施す方法

スクロールに合わせて画像が徐々にぼやけていくエフェクトを施す方法

Webページ内に画像を表示して、スクロールに合わせて徐々にその画像をぼかしていく効果を施すサンプルコードをご紹介します。 このサンプルではjQueryを使用して、1枚の画像だけでなく、ページ内にトリガーとなる画像が複数ある場合でもスクロールして可視エリアから外れるにつれて、それぞれの画像が徐々にぼやけていくようにしてい…
メニューのマウスオーバーで下線がスライドしてついてくるサンプル

メニューのマウスオーバーで下線がスライドしてついてくるサンプル

サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。 CSSと簡単なjQueryで実装しています。 まずはサンプルをご覧ください。 See the Pen Menu with Underline Slidi…
[CSS]マウスオーバーで立方体が回転する3Dアニメーションギャラリーサンプル

[CSS]マウスオーバーで立方体が回転する3Dアニメーションギャラリーサンプル

今回は、前回の「マウスオーバーで平面が回転する3Dアニメーション」の応用編、グリッドレイアウトで並べた画像コンテンツを、立方体に見立てたキューブとして回転して別の面が表示されるパターンのCSSのtransformを利用した3Dアニメーションサンプルをご紹介。 前回のTipsは以下をご覧ください。 それでは、前回の平面パ…
[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

[CSS]マウスオーバーで平面が回転する3Dアニメーションギャラリーサンプル

今回のWebデザインTipsは、ギャラリーサイトを想定して、予め表示エリアのサイズを決めてあるタイル状に並べた画像コンテンツにて、マウスオーバーで画像がフリップして背面のパネルが表示されるという、CSSのtransformを利用した3Dアニメーションの実装例をご紹介します。 タイル状のグリッドレイアウトは、定番jQue…
Return Top