jQuery DrawSVG
FEATURES This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Weights less than 2KB minified and 800 bytes gzipped. Easy to use. Easing and stagger support. Free! Tweet USAGE Include jQuery DrawSVG after jQuery <script src="http://code.jquery.com/jquery-latest.min.j
マウスオーバーで画面端から横に伸びるCSSメニューの作り方
マウスオーバーで画面端から横に伸びるメニューを実装してほしいと依頼があったため作ってみました。 ECサイトのメニューの他、ブログ記事の目次にも応用できます。 ベース メニューのアイコンはFont-awesomeを使用しています。画像で代用することも可能ですが、 Font-awesomeを使用する場合は下のCSSを最初に読み込んでおきます。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> HTML <div class="slide_anime_nav"> <div> <a href="#" data-text="お気に入り"> <i class="fas fa-heart"></i> </a> </div> <div> <a h
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら） | 125naroom / デザインするところ（会社）です。
JavaScript固定のヘッダー（ナビ）がある場合はヘッダー分の高さを調整しなければなりません。レスポンシブだと高さが変わってしまいます。そんな時には『ヘッダー』のクラスやIDを指定してあげれば面倒な調整は不要になります。ちなみに今回の『ヘッダー』は『header』を使っています。 ▽jQuery（必須） <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ▽簡単な説明を記載しています。 $(function(){ var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。 var urlHash = location.hash; // ハッ
ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法 | TechMemo
ボタンをクリックした際に全画面に表示される、モーダルウインドウ風のメニューを実装する方法をご紹介いたします。 簡単なデモページを用意したので、挙動についてはデモページをご確認いただければと思います。 デモページを見る HTMLのマークアップ HTMLはシンプルで、以下のようにボタンとメニューをマークアップします。 <!-- メニューボタン --> <button id="btn-menu"> <span></span> <span></span> <span></span> MENU </button> <!-- メニュー --> <nav id="sp-menu"> <div id="sp-menu-position"> <ul class="sp-menu-list"> <li class="col"><a href="#">メニュー1</a></li> <li class="col"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
uhaha.net
https://codepen.io/nyantora_03_09/pen/RwrRLNq