【CSS】clip-pathを利用してテキストをアニメーションで表示する方法Webデザイン・アプリ開発CSSのclip-pathというプロパティを利用すると、任意のHTML要素を指定したパスの形状に切り抜いて表示させることができます。 よく利用されるケースでは、画像をパスで繋がれた図形の部分だけ切り抜いて表示するというパ ... 2017/08/04続きを読む
slick.jsにYouTube, Vimeo, video要素の動画を含めて自動再生するスライダーを生成する方法Webデザイン・アプリ開発現在、もっともポピュラーでカスタマイズ性が高く実装が簡単な、レスポンシブ対応のスライドショーjQueryモジュールである「slick.js」。 弊社にて提供中のWordPressテーマ「DigiPress」シリーズの次期 ... 2017/08/01続きを読む
CSSのみ!クリックでメニューが回転して開閉する3DアニメーションサンプルWebデザイン・アプリ開発今後制作予定のWordPressテーマのグローバルメニューのプロトタイプとして作成した、ハンバーガーアイコンをクリックすると、隠れていたメニューが奥から回転しながら起き上がって表示されるイメージのコンポーネントのサンプル ... 2017/07/09続きを読む
簡単!超軽量!プラグインなしでページ遷移時にフェードイン・アウトさせる方法Webデザイン・アプリ開発サイト内の別ページへの切り替え時にフェードイン/フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。 例えば、以下のようなもの。 また、「PJAX」というjQuer ... 2017/04/12続きを読む
CSS3のfilter:blurでぼかし効果をするとフチがぼやけるときの対処法Webデザイン・アプリ開発2020/2/14追記 : この方法で解決できない場合は、以下のSVGフィルターによるブラー加工で解決できます。 https://digipress.info/tech/svg-blur-for-css-filter/ ... 2017/04/05続きを読む
マウスオーバーで常にカーソル位置を向いて変形する3DアニメーションサンプルWebデザイン・アプリ開発今回のTipsは、ある要素のマウスオーバー時にその要素が常にマウスカーソルの位置の方向を向いて目で追ってくるような、視差効果を伴った3次元アニメーションのコーディングサンプルをご紹介します。 まずは以下の完成イメージで表 ... 2016/12/01続きを読む
CSSのみでグローバルメニューを3Dアニメーションで開閉表示するサンプルWebデザイン・アプリ開発いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に ... 2016/11/07続きを読む
スクロールに合わせて画像が徐々にぼやけていくエフェクトを施す方法Webデザイン・アプリ開発Webページ内に画像を表示して、スクロールに合わせて徐々にその画像をぼかしていく効果を施すサンプルコードをご紹介します。 このサンプルではjQueryを使用して、1枚の画像だけでなく、ページ内にトリガーとなる画像が複数あ ... 2016/10/31続きを読む
Snap.svgを使ったSVGのパスのモーフィングアニメーションデモWebデザイン・アプリ開発Webデザイン関連トピック , …SVGを変形させたりアニメーションさせることができる、Adobeがオープンソースで提供しているJavaScriptライブラリである「Snap.svg」を使って、SVGのpathを別のpathにモーフィングさせるアニメーシ ... 2016/10/25続きを読む
メニューのマウスオーバーで下線がスライドしてついてくるサンプルWebデザイン・アプリ開発サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。 CSSと簡単なjQueryで実装しています。 まずは ... 2016/06/16続きを読む
[CSS]マウスオーバーで立方体が回転する3DアニメーションギャラリーサンプルWebデザイン・アプリ開発今回は、前回の「マウスオーバーで平面が回転する3Dアニメーション」の応用編、グリッドレイアウトで並べた画像コンテンツを、立方体に見立てたキューブとして回転して別の面が表示されるパターンのCSSのtransformを利用し ... 2016/06/10続きを読む
[CSS]マウスオーバーで平面が回転する3DアニメーションギャラリーサンプルWebデザイン・アプリ開発今回のWebデザインTipsは、ギャラリーサイトを想定して、予め表示エリアのサイズを決めてあるタイル状に並べた画像コンテンツにて、マウスオーバーで画像がフリップして背面のパネルが表示されるという、CSS のtransfo ... 2016/06/10続きを読む