アクセシビリティに対応したドロワーメニューのjQueryプラグインhiraku.jsを使ってみました。 この記事では、基本的な導入部分しか書いていないので、詳しいカスタマイズ方法は作成されたアップルップルさんのブログを見るのがいいと思います[…]
タグ: jQuery
スクロールに応じて要素の位置を変えたり、色を変えたりする時に便利なskrollrというプラグインを使ってみました。 デモサイトを見ればどんなものか分かると思います。 デモサイト 思い通りに要素を動かすことができます。使い方も簡単です。 もく[…]
先日、スマホアプリのコーディングを仕事でやっていたんですが、 jQueryのclickイベントを使うと、スマホではタップしてからほんのわずかラグがあります。 時間でいうと1秒にも満たないと思いますが、 実際に触っているとけっこう気になります[…]
今や定番のドロワーメニューやモーダルメニュー。 実装しているサイトは多いのではないでしょうか ただ、こういったメニューを取り入れているサイトで気になるのが、 メニューを開いている間、メニュー以外のコンテンツがスクロールしてしまう状態。 特に[…]
WordPressのテーマを_s(アンダースコアーズ)で作りました。ついでに公式ディレクトリ入りを目指して申請中です。 今見ているこのサイトがそのテーマです。テーマ名は「Modernize」 以前、子テーマを作りましたが、オリジナルのデザイ[…]
Midiumの記事にある画像をクリックすると画像が拡大されて、スクロールすると閉じる動きを実装できるzoom.jsの紹介です。 Midiumのデザインとかかっこいいですよね。 Midium どこか画像がある記事を見てみるとどんな動きか分かる[…]
selectタグの選択項目によって色を変える機会があったのでメモ。 デモ HTML CSS jQuery デモ 未選択の場合は色が薄いで薄いですが、何か選択されていると色が濃くなります。 プロフィールなどで、ちゃんと項目が埋められてるかユー[…]
なかなか文章で説明するのが難しいですが、 全てのメニューリストをプルダウンにするのではなく、幅に入りきらない分をプルダウンにするjQueryプラグインの紹介です。 本サイトがデモになっているので見た方が早いと思います。 サイトのウィンドウサ[…]
日に開催された関西フロントエンドUGの「Webとアニメーションの様々なありかた」に参加してきました。 本日は会場TAMさんをお借りして、「Webとアニメーションの様々なありかた」です! https://t.co/YIzYA[…]
実案件で「Slidebars.js」というドロワーメニューのプラグインを使う機会があったのでその使い方と、 そのままでは動きがイマイチだったところがあるので、気持ちいい動きになるようにしてみました。 こちらが公式サイトです。 Slideba[…]
12月5日に開発合宿とやらに初めて参加してきました。 今更ながらレポート 謝辞 当日撮った写真データ消してしまいました(笑) 尾崎の家 「尾崎の家」というところで合宿をやりました。 南海電車の尾崎駅から徒歩30分ほど。 ちょっと遠いのでタク[…]
ページが見えているか見えていないかを判定してくれるPage Visibility API。 なんのこっちゃ分からない方はデモサイトを開き、デベロッパーツールなどでコンソールを開いてください。 そして、ブラウザのタブを別のタブに切り替えて、戻[…]
iOS9のSafariで不具合対応したのでメモ。 現象について 発生機種 iOS9のSafari 内容 画面が小さくなったりいろいろ不具合報告があるようですが、 今回あった不具合は、ドロワーメニューやスライドメニューを開いて、閉じるときに画[…]
Webブラウザを通じてユーザのコンピュータに一時的にデータを書き込んで保存するCookie。 Cookieを使えばサイトに何回来たかなど計ることができます。 こんな使い方をしてみた Cookieは値や有効期限を設定できるので、キャンペーン系[…]
映画のワンシーンをJavascriptで作ってみよう!という勉強会に参加しました。 JavaScriptってWeb初心者からすると取っ付きにくい感じがしますし、 本を読んだり勉強しても、けっきょく実践でどう使えばいいか分からず、なかなか覚え[…]
使いやすいスライダー(カルーセル)のjQueryプラグイン、Slick.jsの使い方。 フリックで操作、自動再生、フェード切り替えなどなど、簡単に実装できる上に、オプションの設定だけでいろんな機能をつけられます。 デモサイト すごく簡単に実[…]