今回の Tips は、JavaScript を一切利用せず、CSS のみを駆使して表現するイメージスライダーを作ってみます。 スライドは、サムネイル付きのナビゲーションボタンをクリックすることで切り替わるようにしてみます ...

JavaScript を使わず、CSS のみで複数のモーダルウィンドウを開閉するアイテムの一覧のサンプルコードをつくってみました。 例えば、EC サイトで商品一覧のサムネイルをクリックすると、その商品の拡大画像と説明、価 ...

WordPressプラグインやテーマのサブメニューとして「アドオン」メニューを追加し、アドオンのページを開くと、利用可能な拡張機能の一覧が表示され、ユーザーは一覧からクリックして気になったアドオンの詳細ページに直接参照し ...

汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊 ...

弊社にて現在開発中のWordPressテーマに搭載する機能の候補として、各セクションの境界の形状に、波形の波打つアニメーション要素を表示する仕組みを簡単に作ってみました。 想定は、例えば弊社で提供中のDigiPressテ ...

今後制作予定のWordPressテーマのグローバルメニューのプロトタイプとして作成した、ハンバーガーアイコンをクリックすると、隠れていたメニューが奥から回転しながら起き上がって表示されるイメージのコンポーネントのサンプル ...

サイト内の別ページへの切り替え時にフェードイン／フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。 例えば、以下のようなもの。 また、「PJAX」というjQuer ...

2020/2/14追記 : この方法で解決できない場合は、以下のSVGフィルターによるブラー加工で解決できます。 https://digipress.info/tech/svg-blur-for-css-filter/ ...

今回のTipsは、ある要素のマウスオーバー時にその要素が常にマウスカーソルの位置の方向を向いて目で追ってくるような、視差効果を伴った3次元アニメーションのコーディングサンプルをご紹介します。 まずは以下の完成イメージで表 ...

いわゆるハンバーガーメニューアイコン(こんなの : )のみを表示して、クリックすると左端からオフキャンバスナビゲーション(グローバルメニュー)がスライド表示すると共に、メインコンテンツエリアは3Dアニメーションで斜め奥に ...

Webページ内に画像を表示して、スクロールに合わせて徐々にその画像をぼかしていく効果を施すサンプルコードをご紹介します。 このサンプルではjQueryを使用して、1枚の画像だけでなく、ページ内にトリガーとなる画像が複数あ ...

サイトのグローバルメニューの各メニューをマウスオーバーした時に、アンダーラインがメニュー幅に合わせてスライドしながらアニメーションでついてくるサンプルをご紹介します。 CSSと簡単なjQueryで実装しています。 まずは ...