横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」 – bl6.jp
swipe-menu-jsは横からスライド・スワイプ表示するシンプルなハンバーガーメニューを実装できます。jQueryが使われていて、使い方やマークアップも簡単に記述できるので手軽に使用できるのがいいですね。 以下のページからswipe-menu-jsの実際のデモ動作をチェックできます。 デモ デモは全部で3つ用意されています。Menu 1（Slide menu with hover effect）、Menu 2（Slide menu with jQuery）、Menu 3（Swipe menu with jQuery）です。 どれも画面左上にハンバーガーアイコンが表示されていて、ここからナビゲーションメニューを展開できるようになっています。 Menu 1ではハンバーガーアイコンにホバーするだけでメニューが横からスライドで開かれます。閉じる場合はメニュー外にマウスを持ってくればOKです。
多彩な画像処理ができるJSライブラリ「Lena.js」 – bl6.jp
Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セピア、レッド、グリーン、ブルーなどいろんなフィルターが用意されていて、手軽に目的の画像を加工することが可能です。 以下のページから、Lena.jsの実際のデモ動作をチェックできます。 デモ デモでは、右側に元となる画像が表示されていて、その左隣に画像処理後の画像が表示されるようになっています。ちなみにページ読み込み時は、この左側には画像が表示されておらず、この場所にフィルターをドラッグ&ドロップすると、そのフィルターがかかった画像が表示されます。 フィルターは上部にたくさん設置されていて、目的のフィルター名を左側のボックスにドラッグ&ドロップすることで、そのフィルターを適用した時の画像がどのようになるかを確認できます。 Lena.jsに用意されているフィルターは以下になります。 gaussian grayscale hi
モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」 – bl6.jp
Simple HTML Menuは、モバイルにもピッタリなレスポンシブに対応したシンプルなメニューを実装することができます。PCでは水平メニューとして、モバイル版では垂直の開閉式メニューとして機能します。 以下、Simple HTML Menuの実際のデモページになります。 デモ デモでは画面上部の右側にメニューが水平に並んでいます（PCからの閲覧の場合）。レスポンシブにも対応しているので、ブラウザの幅を縮小していくとメニューがモバイル版に切り替わります。 モバイル版のメニューでは、ハンバーガーアイコンと「Menu」と書かれた文字のみが表示されます。ここをクリックすると、メニューが垂直にスライドダウンで開かれます。 メニューが開かれた状態になると、ハンバーガーアイコンが「×」のアイコンに変化します。再度この場所をクリックすると、今度はメニューがスライドアップで閉じられ、それと同時に「×」の
パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」 – bl6.jp
Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエフェクトを実装することができるjQueryプラグインです。60fpsによるrequestAnimationFrameが使われているとのこと。ファイル容量もコンパクトなところがいいですね。 以下のページからTilt.jsの実際のデモ動作をチェックできます。 デモ デモページには「Tilt.js」と書かれた正方形が表示されており、ここにホバーしながらカーソルを動かすことで、それに合わせてパララックスとチルトのアニメーションを見ることができます。 あまり見たことがない珍しい動きをするので、ユーザーにとっては印象に残りやすいかもしれませんね。チルトをすることで、グラデーションカラーが変化するところもおもしろいと思います。 また、Tilt.jsにはオプションもいろいろ用意されています。主なオプションは、maxTilt、perspe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
