MopBox 複数パネル(デモには100以上のパネルも)の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
MopBox 複数パネル(デモには100以上のパネルも)の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス(少々今さら感も感じますが・・・)効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト&jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
CLNDR.jsはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。 カレンダー機能は意外とよく使われます。イベント系はもちろん、ブログのサイドバーにつけることもあります。そんなカレンダー表示をjQueryで提供するのがCLNDR.jsです。 デモ。左側にカレンダー、右側にイベントの一覧が表示されています。 別なデモ。カレンダーのみ表示して日付をクリックすると… イベント表示に切り替わります。 こちらはすっきりとしたデザインのデモ。 CLNDR.jsは今時のフラットデザインですっきりとした見やすいカレンダーになっています。そのまま使うのはもちろんjQueryベースとあって、他の処理と組み合わせて拡張するのも容易です。シンプルなUIだけに使い勝手が良さそうです。 MOONGIFTはこう見る カレンダーの利用場面はとても多いです。単純に表示するの
jQuery CustomboxはCSS3のエフェクト付きもモーダルウィンドウを実装するスクリプト。モーダルウィンドウの出現時、非表示時にエフェクトがかかります。用途は限られてしまいそうですが、かなり凝ったものも作れるみたいなので覚えておいても損は無さそうです。 jQuery Custombox
CLNDR.js カスタマイズが容易なカレンダー生成jQueryプラグイン「CLNDR.js」 マークアップやCSSは独自で定義してデザインし、Underscore.js形式のテンプレートを使ってカレンダー部分を実装できます カレンダーを実装する際は動的な部分がでてきてしまって割りとややこしいですが、動的な部分はJSでやってくれます サーバサイドでライブラリなどを利用してカレンダーを生成する以外にも、クライアントサイドでカレンダーを実装したい際の1つの選択肢として使えそう 関連エントリ Googleカレンダーっぽい物や日付ピッカー等カレンダー関連のjQueryプラグイン集15 レスポンシブで超クールなカレンダーデモとjQueryプラグイン「Calendario」 Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」
Custom event: タブの切替時の前後にイベントを設定します。 Tabsletの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> Step 2: HTML タブをul要素で、各コンテンツをdivで実装します。 タブのアンカー(#tab-1)とコンテンツのid(tab-1)は対応するように設定します。 ラッパーのclassに「tabs」を指定し、機能を選択
仕事上必要だったので、拙筆「webkit系ブラウザ(Chrome/Safari)で両端揃えはできないの?jQueryで検証」のスクリプトを流用して作りました。 簡単な説明 コーディング例 justify(両端揃え)cssだと上手くいかない なぜなら、justifyが横幅よりも少ない文字列の右端を揃えるという趣旨ではないからです。 table.company th, table.company td { text-align: justify; text-justify: inter-ideograph; border-right: #ccc 1px solid; border-bottom: #ccc 1px solid; padding: 10px; } 自作jQueryの場合 table.company2 th, table.company2 td { text-align: just
ライター内藤です。 本日は日本人の大好きな「均等割り付け」を超軽量jQueryで実現します。 特にtableのthタグなどで利用頻度が高いかと思いますが、block要素でも使えます。 Wordで言うと、これ です。 両端揃えではなく均等割り付けが必要な理由 下の図が分かりやすいと思います。 text-align: justify; text-justify: inter-ideograph; 上記のcssは、1行に満たない文字に関しては左寄せになります。 この命令の趣旨は、書籍の紙面を想像してもらうとわかりますが、複数に渡る行の右端を揃えることにあります。 ですので、thタグに上記のcssを適用しても、図中2行目以降のようになってしまいます。 つまり、横幅よりも少ない文字列を均等割り付けできないわけです。 cssでは実現できないので、jQueryを使う 拙筆webkit系ブラウザ(Chr
iOS7のさまざまなシーンで利用されているズームを使って、コンテンツからナビゲーションを切り替えるjQuery+CSS3のかっこいいエフェクトを紹介します。 デモのアニメーション コンテンツから左上のボタンをタップ・クリックすると、ズームを使ってコンテンツを縮小し、ナビゲーションをダイナミックに表示します。 デモはデスクトップだけでなく、スマフォのブラウザでも動作します。 実際の動作は、下記ページで試してください。 iOS7 Zoom - out Side Nav Reveal スクリプトはjQueryを使って、下記のスクリプトを記述します。 (function($) { jQuery(document).ready(function() { $('.toggleMenu').click(function() { var windowHeight = $(window).height();
デフォルトでは当日がマークされて表示され、月を自由に移動することができます。 本来、フォームに日付を簡単に入力するためのプラグインですが、 単純なカレンダーとしても使用可能です。 jQuery ui オフィシャルサイトで、 デフォルトのままダウンロードすると、Datepickerを含むjQuery uiのフルオプションがダウンロードされます。 ダウンロードしたファイルは圧縮されていますので解凍します。 バージョンにより多少ファイル名が異なりますが、 jquery-ui-1.8rc3.custom.min.js のような形式だと思いますが、スタイルシートなど添付のファイルは全て必要ですので、 サイトのルートにjquery_ui等のディレクトリを作成して置きます。 もちろん、jqueryも必要ですがダウンロードしたjquery uiのバージョンにより必要なjqueryのバージョンがあります。
Shipping, taxes, and discount codes calculated at checkout.
Rotate then flip out それぞれのパネルを回転させ、異なるタイミングでめくってフェードアウトさせます。 animo.jsの使い方 Step 1: 外部ファイル animo.jsはjQuery 2+で動作し、animate.cssを含む60以上の美しいアニメーションをコントロールできます。 head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> <script src="animo.js" type="text/javascript"></script> <link href="animate+animo.css" rel="stylesheet" type=
TOP > javascript , WebDesign > 質の高いUXを与えるためのjQueryプラグイン集「9 jQuery Plugins for Improving Website Navigation」 WEBにとってUXはとても重要な要素の一つ。隅々までサイトを見ていただくためにはここがダメだと利便性が悪く、多くのユーザーに不快な思いを与えてしまいます。今日紹介するのはjQueryで質の高いUXを実現するためのjQueryプラグインを集めたエントリー「9 jQuery Plugins for Improving Website Navigation」です。 Intro.js jQueryを利用した様々な仕組みが紹介されています。クリエイティブであれば良いというものではありませんが、斬新な動きだったり、仕組みだったり、工夫を凝らしたプラグインが集められています。今日はそ
シンプル・軽量で、レスポンシブ対応、タッチデバイス対応、スワイプもキーボード操作にも対応したカスタマイズにも優れたOOCSSベースでマークアップされたスライダーを実装するjQueryのプラグインを紹介します。 Glide.js Glide.js -GitHub Glide.jsのデモ Glide.jsの使い方 Glide.jsのデモ デモはスマフォ・タブレットをはじめ、最新のモダンブラウザでご覧ください。 スライドのエフェクトにCSS3を使用していますが、IE8などの古いブラウザでも代替のエフェクトで動作します。 デモページ Glide.jsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
jQuery、Javascriptに関するWEBサイトやブログ記事、Twitterでのつぶやきの中から、役立つ情報を日々紹介しています。jQuery速報 jQuery Navi「easySlider1.7.js」を利用して、シンプルなHTML構造で設置も簡単なスライドショーを実現する ソースがシンプルで設置も簡単なjQueryのスライドショープラグイン「easySlider1.7.js」ですが、Y.Motoshige 様のサイトでは、実際の動作サンプルが公開されていますので、設置やカスタマイズの際には … 278 Views
デモページ:Dynamic content コンテンツはさりげないアニメーションで追加・削除されます。 Salvattoreの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="js/salvattore.js"></script> Step 2: HTML HTMLは単にパネルを並列に配置するだけで、ラッパーに「data-columns」を加えます。 <div id="timeline" data-columns> <div>Item #1</div> <div>Item #2</div> <div>Item #3</div> <div>Item #4</div> <div>Item #5</div> </div> Step 3: CSS コラム数はスタイルシートで設定します。 レスポンシブ対応にするには、Media Querie
SMINT | The simple jQuery plugin for lovers of one page websites. スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 ページを開くと中部に何の変哲もなく現れるナビゲーションバー。スクロールするとページの上部にfixed固定され、どれだけスクロールしてもナビゲーションできて便利な物を簡単に実装できます デモはレスポンシブにも対応しているっぽいです。1ページにコンテンツを埋めこんでBookmarkによって移動させる的なページで便利に使えそう 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 ナビゲーションが斬新な30のサイト
バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 2013年09月04日- AnimateScroll - jQuery Plugin for Animating Scroll バウンドさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 通常のアニメーションスクロールであれば、jQueryのanimate等で簡単に実現できますね。 このプラグインを使えば、リンクをクリックすると指定位置までスクロールし、バウンドやゴムのように伸び縮みするようなエフェクト付きでアニメーションが実装出来ます プロモーションサイトなどでインパクトを重視したい場合は使ってみるといいかもしれません 関連エントリ スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「Sticky-Kit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く