Bootstrap向けのレスポンシブなメガメニューを実装する・「Responsive Bootstrap MegaMenu」Responsive Bootstrap MegaMenuはBootstrap向けのRWDに対応対応したメガメニューです。ドロップダウンメニューの中には動画やGoogleマップ、大量のリストを格納可能で、モニターサイズの小さいスマフォ等ではアコーディオン形式に切り替えられます。覚えておくと便利そうですね。 Responsive Bootstrap MegaMenu
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
誰でも出来る！プラグインを使わずにjQueryで実装するタブ切り替え機能！
こんにちは、ミキです。 今回はアウトプットの場として、 最近プラグインを使わずに実装した タブ切り替え機能の紹介をしたいと思います。 HTML まずタブとタブに連動したコンテンツのHTMLを用意します。 一番目のタブに「class=”select”」をつけます。 最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、 ここでは「class=”hide”」をつけました。 ちなみにダミーテキストは夏目漱石の坊っちゃんからです。 <ul class="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <ul class="content"> <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かし
jQueryでマウスホイールの上下イベントを取得 ＋ 余韻をつけたイージングスクロールを実装する実験｜BLACKFLAG
最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くあり その都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですが jQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ 自分でもいろいろと試してみたので実験内容と併せて紹介してみます。 今回のjQueryを使ってのマウスホイールのイベント処理は 「Web制作 W3G」さんの記事を参考にさせていただいてます。 【参考記事】ホイール系イベント2014年版クロスブラウザ｜Web制作 W3G jQueryだけでなくネイティブJavaScriptでの取得方法や ホイール関連の処理について詳しく紹介されています。 記事によるとjQueryを使ってのマウスホイール処理方法は 以下のようなスクリプト記述で取得可能となります。 ◆SCRIPT <scri
アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」:phpspot開発日誌
MixItUp アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 これはなかなか汎用性があって便利そう。デモサイトではレスポンシブにもなっていて、タッチデバイスでも快適に使えそうです。 ブログ、ポートフォリオサイトなど、実装すればよりモダンでクールなサイトに仕上がりそうです。 関連エントリ 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブでタッチフレンドリな軽量LightBox実装jQueryプラグイン「Image Lightbox」 クールに実装できるレスポンシブなモーダルダイアログ「Remodal」 レスポンシブサイト用レイアウトフレームワーク「Grid」 レスポンシブかつフラットなソーシャルボタンを実
Webページのナビゲーションを自動生成する軽量なjQueryプラグイン・jQuery Tocible
ページの見出しを取得して、サイドにナビゲーションを生成する、というスクリプトのご紹介。jQueryに依存しています。 いわゆる目次のリンクを生成する、というスクリプトです。ドキュメントページなんかに良さそうです。 動作サンプルです。 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.tocible.js"></script>コアとプラグインを読み込みます。 $('#foo').tocible({ heading: 'h2', //ナビゲーションに組むエレメント subheading: 'h3', //ナビゲーションに組むエレメント navigation: 'nav', //ナビゲーションを生成する場所 title: ''
長いテキストを「…」で省略するjQueryプラグイン・Smarttruncation
長いテキストを省略して表示 する、というjQueryプラグイン 、Smarttruncationのご紹介。 CSSのみでも一応は可能ですけど、 こちらはある程度応用が利くの で覚えておこうかと思います。 この手のライブラリはいくつか見かけましたけど、これは日本語でもそのまま利用出来るので一応メモ。 動作サンプル 長いテキストが省略されています。上は語尾を、下は真ん中あたりで省略。なかなか便利なのでは。 CSSのtext-overflow:ellipsis;で制御できない時に試してみてはいかがでしょう。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.smarttruncat
スマホ、PCで使えるサイドバー実装ライブラリ「Slidebars」:phpspot開発日誌
Slidebars スマホ、PCで使えるサイドバー実装ライブラリ「Slidebars」 スマホアプリでよく見られるメニューをスマホ、PCのWEBで使えるようにしたライブラリ。 左右に開かせられるのが特徴。フリックによってオープンすることは出来ませんが、まだブラウザベースの場合は挙動が安定しないのでこれはこれでよいかも。 iOS端末、PCにおいてはほぼ完璧に動作しますが、Android4系の端末ではメニュースクロールでメインコンテンツもスクロールするなど、注意が必要のようでした。 関連エントリ PCサイトでもスマホサイトのようにサイドバーを実装するデモ 複数階層のサイドメニューを実装するデモ＆サンプル iPhoneのサイドメニュー風UIが作れるjQueryプラグイン「jPanelMenu」
jQueryでたった5行の記述で長いテキストを「…」で省略する
テキストをJavaScriptで省略して語尾に「･･･」を付けたいケースは割とよくある。jQueryプラグインなども存在するがjQueryを読み込んでいるのであれば下記のように5行の記述で長いテキストを「…」で省略することが可能。 半角0.5文字、全角1文字版を追記
jQueryを使ってドロワーメニューを実装する | FSFIELD Labs
JavaScript jQueryを使ってドロワーメニューを実装する ドロワーメニュー（drawer menu）とは、アイコンを押したときに表示される一覧画面のことです。最近スマートフォンサイトでよく使われていますね。スマートフォンサイトは画面の大きさの関係上、どうしてもファーストビューのエリアが狭くなりがちです。そこでドロワーメニューが役に立ちます。サイト内で共通の要素（グローバルナビなど）をまとめることで省スペース化することができます。 ちなみにドロワーとは英語で引き出しの意味です。ガンダムでドロワっていう名前の大型空母がありましたが、ここからきているんでしょうね。 格納するファイル jquery.js jquery.mobile-menu.js style.css 記述の仕方 HTMLの記述 ここにアイコンを押したときに表示される一覧画面が入ります ここにメインコンテンツが入ります
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
フォント表現の可能性を広げるjQueryプラグイン 「20 jQuery Typography Plugins」
webサイトをより魅力的に演出するために利用されることの多いjQuery。プラグインの種類にもさまざまなタイプがありますが、今回紹介するのはフォント表現の可能性を広げるjQueryプラグイン 「20 jQuery Typography Plugins」です。 （Textillate.js） 独特の動きや文字組・文字列を表現できるクリエイティブなフォントのjQueryプラグインがまとめられています。 詳しくは以下 No Vacancy まるでネオンが光っているかのようなグラフィックを表現できるプラグイン。レトロな印象のデザインにおすすめ。 jQuery Super Easy Text Rotator by Pete R. | The Pete Design シンプルなフォントですが、回転やフェードイン・アウトなど、いろいろな動きを実装することができます。 Squishy 丸みを帯びた可愛らし
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
Fullscreen Overlay Effects | Codrops
Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays. Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects
スクロールで表示範囲に入った際のアニメーションをコードレスで簡単に記述できる「scrollReveal」:phpspot開発日誌
scrollReveal.js スクロールで表示範囲に入った際のアニメーションをコードレスで簡単に記述できる「scrollReveal」 デモページでは、スクロールしていくと要素がそれぞれにアニメーションするクールなデモが見れます 実装には次のように、data-scrollrevelにルールに沿った文字列を渡すだけで、複雑なJSコードは不要です。 関連エントリ スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 スクロールに連動するパララックスな星空背景を実装できるjQueryプラグイン「Starscroll」 ページを水平にパララックスしつつスクロールさせられるjQueryプラグイン「jInvertScroll」 スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit」 要素をスクロール中に自動で固定する「
「それやりたいならjQueryは要らないよ」を教えてくれる・「YOU MIGHT NOT NEED JQUERY」
YOU MIGHT NOT NEED JQUERYはjQueryを使わずに出来る事をまとめたチートシートサイトです。FadeInやshow/hideさせるだけ、エレメントにclassを加えたいだけ、など簡単なものなら重い本体を読み込まない方がエコですね。ブラウザも限られますので案件次第で使い分けると良さそうです。勉強にもなりました。 YOU MIGHT NOT NEED JQUERY
Formstone
Formstone is a front end library that aids in the rapid development of web projects by abstracting modern web patterns into highly customizable jQuery plugins. Build the web faster with Formstone. Modular Components are name-spaced for minimal overlap with your existing styles and scripts. Responsive Components are designed mobile-first to ensure fast, usable interfaces, no matter the screen size.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダンなプログレスバーを表示できるJSライブラリ「nanobar.js」:phpspot開発日誌
ページ内のローディングをもっとオシャレにできる「Progress.js」:phpspot開発日誌
めしおのアフィリエイト教材レビューブログ