マウスの動きに追従する「マウスストーカー」のシンプルな作り方 | ARAKAZE NOTE
CSSの考え方としてはposition:fixed;で配置。座標は後でJavaScriptでマウスに追従させるという感じです。ちなみにpointer-eventsを記述し忘れるとマウスイベントがうまく使えなくなったりします。 .stalker{ position:fixed; z-index: 10; /* 一番上のレイヤーに */ pointer-events:none; /* マウスイベントの邪魔にならないように */ width: 30px; height: 30px; border-radius:50%; background:#fff; /* ストーカーDOMの中心をマウス座標に */ top:-15px; left:-15px; /* DOMを滑らかに追従させる為に */ transition: transform 0.2s ease-out; }
Nuxt.jsでSassとpugを使えるようにする方法（ついでにjqueryも） | ARAKAZE NOTE
前回書いたこちらの記事では普通のWebサイトをNuxt.jsで作り変える流れをざっと書きました。 普通の受託系Web制作者による普通のWebサイトをNuxt.jsで作り変えてみた話 今回は上記の記事では割愛したNuxtでSassやpugなど、これまでgulpで使っていた便利なものを同じように使うためにはどうすれば良いか、ということを書いていこうと思います。 あくまで僕の環境（Mac）でこうしたら動くようになった、という記録なので正しいやり方ではないかもしれません。でも大事なのは成果物で、環境なんてのは自分が便利に使えれば良いの精神で書いていきます。 （沢山の人が関わるような大規模プロジェクトはちゃんとした環境構築しないとやばいとは思いますが） なぜSassとpugとjQuery（プラグイン群）を使いたいか？ まず自分にどんな前提知識があったかをざっと説明しておきます。 ・Sassやpugを
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
シンプルでカスタマイズ可能なスクロールバーを実装出来るプラグイン SimpleBar の使い方 | ARAKAZE NOTE
カスタマイズ可能でシンプルなスクロールバーを実装出来るプラグインの紹介です。 クロスブラウザ対策もされているのでページ内でスクロールバーが必要な個所があるときには重宝しそうです。 用意するもの コアファイルはGitHubからダウンロードします。 必須なファイルはダウンロードしたディレクトリのdistの中に入っているsimplebar.cssとsimplebar.jsのふたつです。こちらjsは好きなところで読み込めば良いです。 <head> <link rel="stylesheet" href="simplebar.css" /> <script src="simplebar.js"></script> </head> htmlはスクロールバーを表示させたい要素に対してdata-simplebar属性を追加します <div data-simplebar></div> 基本的な使い方 使い方
画像がちゃんと読み込まれたら実行 を実現する ImagesLoaded ！ | ARAKAZE NOTE
ImagesLoaded アニメーションを多様するようなWebページを作っていると「画像が読み込まれるのが遅くてうまくいかない！」、「画像がちゃんと読み込まれてから関数を実行させたい！」といった場面にぶち当たることが出て来きます。 そんなときに便利なのが「ImagesLoaded」！非常に簡単な記述で、要望を満たしてくれます。 必要なもの 公式ページがあるのでそちらから必要ファイルをダウンロードしてきます。 １つしかありません！ <script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script> 使い方 使い方も至極単純です。通常のJSで使う場合のほかに、jQueryなどの書き方もあります。 //通常の書き方 imagesLoaded( '#container', function() {/*実行させたい処理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
忙しい人でも楽しめる！1巻完結の個人的お勧め漫画5選 | ARAKAZE NOTE
遅延ロードを実装するのに便利な lazySizes の使い方 | ARAKAZE NOTE
カラーマットのスライドインから要素が現れるCSSアニメーション | ARAKAZE NOTE
色々なスクロールエフェクトを実装出来る ScrollMagic の使い方 | ARAKAZE NOTE
WordPressで記事の子カテゴリーだけ取得したい場合のメモ | ARAKAZE NOTE
ふわっと慣性がついたスクロールを簡単に実現できる Luxy.js の使い方 | ARAKAZE NOTE
WordPressでtitleタグの出力内容を制御する。分岐やカスタマイズいろいろ。 | ARAKAZE NOTE
Chromeでアドレスバーにペーストが出来ない！？ショートカットキーの上書き方法 | ARAKAZE NOTE
非同期によるページの先行読み込みで表示の体感速度を高速化！ InstantClick の使い方 | ARAKAZE NOTE
任意の行数（高さ）で三点リーダー付きの省略を実現するプラグイン Shave の使い方 | ARAKAZE NOTE
WordPressのContactForm7で送信後のサンキューページを作る方法 | ARAKAZE NOTE
スマホの実機に開発者ツールを表示できるJSライブラリ Eruda が便利 | ARAKAZE NOTE
モーダルで閲覧できるギャラリーを実装するのにfancyBox3が便利過ぎる。 | ARAKAZE NOTE
Photoshopでパターンを使っている要素をWeb用背景画像として書き出すとき | ARAKAZE NOTE
2ヵ月の育児休業を取得することにしました：育児はじめました | ARAKAZE NOTE