CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
背景にした画像をドラッグ&ドロップ出来る様にするjQueryプラグイン・Draggable Background
背景の画像をD&D出来る様にする、というスクリプトのご紹介です。jQuery依存になります。ECサイト等で使えるかも・・・しれない。 用途はちょっと限定されそうですけど面白かったのでメモ。軽量で使い方も簡単です。 動作デモです。 テキストは普通にボックス内に書いてるだけ。背景はCSSで指定しています。あとはD&D出来る様に設定するだけ。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> <script src="draggable_background.js"></script>本体とプラグインを読み込み。 $('div').backgroundDraggable();あとはセレクタを指定するだけ。 X軸のみ、Y軸のみの
Beautiful Background Image Navigation with jQuery | Codrops
In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the […] In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
