Authorpannyatto

レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」

Responsive Multi-Level Menu | Codrops

今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。

限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。

まずは、サンプルをご覧下さい。

レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル

古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。

→「レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」」の続きを読む

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』

Sidr

スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。

FacebookのページやYouTubeでも使われていますね。画面の広さが限られたなかでは、必要となってくる機能です。

今回はこのメニューをjQueryプラグインを使って簡単に作ってしまいましょう。

サンプルを2つ作ってみました。

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その1

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』サンプル その2

設置もとても簡単です。

→「クリックすると横からメニューが現れるjQueryプラグイン『Sidr』」の続きを読む

映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」

Text Opening Sequence with CSS Animations | Codrops

今回は、テキストを映画のトレーラーやオープニング風にアニメーションさせて表示させる「Text Opening Sequence with CSS Animations 」を紹介します。

サンプルをみていただいたほうがわかりやすいと思います。

映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」サンプル

(古いInternet ExplorerなどのCSS3に対応していないブラウザでは作動しません。)

まるでフラッシュを使っているような動きですね。使用されているのはCSSですので、テキストを簡単に変更できます。またフラッシュを使用するよりもSEO的に効果が見込まれそうです。

→「映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」」の続きを読む

コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」

Cheat Code

コナミコマンドというのは、ファミコンのゲームをはじめ様々なコンピューターゲームに登場する隠しコマンドのこと。ゲーム好きな方にはお馴染みですね。

ファミコンのグラディウスというシューティングゲームで、コントロールボタンから「上上下下左右左右BA」とコマンドを入力すると一瞬にしてオプションフル装備になるという裏ワザがありました。懐かしいですね。コナミコマンド初登場はこのファミコン版グラディウスだということです。

このコナミコマンド(隠しコマンド)を実装するサンプルを作ってみましたのでご覧下さい。

【コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」サンプル】

サンプルではキーボードの矢印キーから「↑↑↓↓←→←→」と入力してみて下さい。打ち間違えたらリロードしてまた試してみて下さい。

設置もすごく簡単です。使用方法は続きをどうぞ。

→「コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」」の続きを読む

シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」

AD Gallery

今まで、サムネイル付きスライダーを紹介したことなかったので、今回はサムネイル画像を表示させた画像スライダーをご紹介します。

最近、動きが凝ったjQueryのスライダー用のjQueryプラグインもいろいろ登場していますが、シンプルなサムネイル付きスライダー用のjQueryプラグインが必要なこともあるかと思います。

設置も難しくないですので、トップ画像に利用したり、ギャラリーにしたりと用途は広いです。

サンプルを作ってみました。

シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」サンプル

各ブラウザにも対応しています。軽くて設置もしやすいので、おすすめのスライダーです。

Firefox 3.5以降 , IE6以降, Chrome2以降 , Safari4以降, Opera9以降に対応しています。

→「シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」」の続きを読む

上(トップ)へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」

scrollUp jQuery plugin

今や定番となっている「スクロールアップ」ボタン。スクロールしているとあらわれて、クリックするとトップへするするとスクロールしてくれるというボタンです。

インターネットで検索すると様々な「スクロールアップ」ボタンを見つけることができて、迷ってしまいます。

いろいろなシーンに合わせて簡単に利用できて、エフェクトも綺麗なjQueryプラグイン「scrollUp jQuery plugin」がオススメです。

サンプルを作ってみました。

上へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」サンプル

今のホームページにそのまま組み込むだけで、「スクロールアップ」ボタンの設置が出来ますのでとても簡単で便利です。

設置方法は続きをどうぞ。

→「上(トップ)へスクロールさせるならいろんなシーンで使えるjQueryプラグイン「scrollUp jQuery plugin」」の続きを読む

画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。

画像にカーソルを合わせると画像が変わるというという効果を「ロールオーバー」といいます。

メニューやカートに入れるなどのボタンでもよく使われていますね。

画像のロールオーバーはCSSやJavaScript(jQuery)を使用して実装することができますが、「smoothRollOver.js」というjQueryプラグインを使用すると、比較的カンタンに実装できる上にロールオーバー効果をなめらかにすることが出来るようです。

今回は、jQueryのみのロールオーバー時と「smoothRollOver.js」プラグインを利用したロールオーバー時がどの程度違うかを比較するために、実装方法も合わせて説明したいと思います。

まずはサンプルを作ってみました。

1. jQueryでのロールオーバーサンプル

2.「smoothRollOver.js」を利用したロールオーバーサンプル

好みもあると思いますので、好みやデザインに合わせて使い分けたいですね。

それぞれの設定方法は続きをご覧下さい。

→「画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。」の続きを読む

スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』

サイドバー風のナビゲーションパーツをスクロールさせても一定の場所に固定してくれるのが、このjQueryプラグイン『stickyMojo』です。動作も軽くスムーズで、違和感がない固定のサイドナビゲーションが実装できるので便利です。

サンプルを作ってみました。

→ 「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」サンプル

フッターのコンテンツまでくると、フッターと重ならないように調整してくれますね。このように画面をリサイズしてもメインコンテンツと重ならない、またフッターコンテンツと重ならないように固定できます。

設置の仕方も簡単です。

→「スクロールしても良い感じにナビゲーションメニューを固定できるjQueryプラグイン『stickyMojo』」の続きを読む

jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法

高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。

サンプルを作ってみました。ご覧下さい。

「Camera slideshow」をフルスクリーンで背景にするサンプル

フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。

→「jQueryスライドショー「Camera slideshow」をフルスクリーンで背景にする方法」の続きを読む

めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』

今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。(めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。)

では、サンプルを作ってみましたのでご覧下さい。

『Flipping Circle Slideshow』サンプル

最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。

→「めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』」の続きを読む