タグ

ブックマーク / www.webopixel.net (2)

  • jQueryのサイドバー固定サブメニュー実装パターン

    jQueryのサイドバー固定サブメニュー実装パターン 最近はモニターのサイズがワイドなってきていることもありサイドバーを固定する機会が増えてきましたね。 そこでjQueryを使用したサイドバー固定にしたときのサブメニューの動きをいくつかご紹介します。 投稿日2018年04月27日 更新日2019年09月19日 基構造 navの子要素にulでマークアップします。 サブメニューはliの子要素のさらに子要素にulを入れ込みます。 HTML <aside id="sidebar"> <h1 id="brand-logo">Logo</h1> <nav id="global-nav"> <ul> <li><a href="#">Home</a></li> <li class="sub-menu"> <a href="#">About</a> <ul class="sub-menu-nav"> <l

    jQueryのサイドバー固定サブメニュー実装パターン
  • HTML5+Canvasでパーティクルっぽいのを作ってみる

    Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成

    HTML5+Canvasでパーティクルっぽいのを作ってみる
  • 1