HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
リスト要素で実装した水平タイプのナビゲーションのスタイルを壊すことなく、配置エリア・表示サイズに合わせて最適化するjQueryのプラグインを紹介します。 HorizontalNav [ad#ad-2] HorizontalNavのデモ HorizontalNavの使い方 HorizontalNavのデモ 水平タイプのナビゲーションの見た目は通常、成り行きや指定したサイズになりますが、HorizontalNavを使用すると配置エリアのサイズに合わせて各アイテムのサイズを均等にします。 デモ:480pxで表示 上:未適用はが成り行きで二段になってしまう幅になっても、下:適用の見た目は損なわれません。 HorizontalNavの使い方 実装は4ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//aja
Hi, I’m jQuery++. I am a MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.8 and later. I’m not a UI project like jQuery UI or jQuery Tools. Instead, I’m all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, I am jQuery’s bald-spot covering toupee. Select the plugins you want and c
2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その1 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に
/*! * jQuery Mobile 1.4.5 * Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC * http://jquerymobile.com * * Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors * Released under the MIT license. * http://jquery.org/license * */ /* Globals */ /* Font --------------------------------------------------------------------------------------------
概要 「ぽわーん」と表示させるプラグインです。CSS3を利用しています。 .fadeIn()や .slideDown()といった .show()系の動きです。 ダウンロード jQuery.gpPowan-1.0.zip [41KB] 基本的な使い方 デモ デモ1 : 基本的なもの Demo 1 リファレンス .gpPowan([duragion][, callback]) duragion … {Number} アニメーションの継続時間。"slow"等のキーワードには対応していません。 callback … {Function} アニメーション完了時に実行するコールバック関数。 CSS3について transitionとtransform(のベンダープレフィックス付きのもの)を書き換えて、戻しません。将来のバージョンで修正予定です。 その他 ライセンス MIT License 無償で利用でき
よくリンクにアイコンを付けることってありますよね?アレをリンク先のfaviconを自動で表示させることってできればって思ったことってないっすか? そんなWEB屋なら一度は(?)考えたことのあるfaviconのアイコン化がこんな感じで実装できることをつい先日知ることになり、びっくり感動してしまったので是非ご紹介させて頂ければこれ幸いです! 元記事はこちら! Favicons Next To External Links | CSS-Tricks これ実装すると、つまり下のような感じになるわけっすね! これ、何をしてるのか気になって見てみたら、そもそもgetFaviconっていうサービスがあるらしいことをしりました。これはリンク先のURLをパラメーターとして渡すと、リンク先の<link>情報みて、faviconのURL引っ張ってくるって仕組みらしいですね。 http://g.etfv.co/h
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Googleアナリティクスを使って、ウェブページがどのくらいスクロールされているか解析するjQueryのプラグインを紹介します。 下記のキャプチャはスクロールの量(パーセント)ですが、特定のエレメント(フッタや記事など)までスクロールされたかもできます。 Tracking Scroll Depth with jQuery and Google Analytics jQuery Scroll Depth -GitHub [ad#ad-2] Scroll Depthの使い方 Scroll Depthの対応ブラウザ Scroll Depthの使い方 Scroll Depthの設置は簡単です。 Gooleアナリティクス まず、Googleアナリティクスのトラッキングコードを設定します。 トラッキング コードの追加 -Googleアナリティクス ヘルプ スクリプト 「jQuery 1.7+」と当スク
How we decreased sign up confirmation email bounces by 50% - Kicksend Blog Eメールの入力間違えを防いでくれるjQueryプラグイン「mailcheck」。 hotmailがhotnailになっていたり、yahooがyhooになっているのを検出してくれます。 よくありがちな間違いかと思うのでサイトのメール入力欄に入れておくと問題を解消できそう 英語仕様ですが、配列を次のように定義してあげれば対応できそうです。 docomo.ne.jp とか yahoo.co.jp とか自由に入れるだけです 関連エントリ 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」 ページめくりを実現するためのjQueryプラグイン集 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン
Java Script、パララックス効果の仕掛けがもたらす新鮮な驚き スクロール芸でサイトがもっと楽しくなる。 特集記事に掲載したスクロール芸サイトのリンク集を公開します。 誌面の解説記事だけではわからない動きの演出を、ぜひ訪問して確かめてみてください。 P056〜P057「最新・スクロール芸ギャラリー」 ikiji Web is beautiful Unfold 東京タワーズ | Tokyo Towers Soleil Noir 2012 Manufacture d’Essai Balloon TEDxPortland jitto Netlash bSeen P058〜P069「あのスクロール芸を種明かし!」 Freestyle-Night Online Portfolio von Jan Ploch レッドドラゴン(星海社「最前線」) Nike Better World Nizo 鎌倉
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
カレンダーアイコンをクリックでdatepickerが表示するサンプル(Datepicker | jQuery UI)を見習って jQuery UI 1.7.1のdatepickerを微妙に日本語化して使ってみた jQuery UI ThemeRoller のデザインを選択する jQuery UI ThemeRoller - Flick ver.> Galleryのタブから選択しダウンロード /jquery-ui-1.7.1.custom/development-bundle内を見てみる demoとかdemoとかdemoとか /ui/i18n/ui.datepicker-ja.jsの読み込み <script type="text/javascript" src="/js/ui/i18n/ui.datepicker-ja.js"></script> regionalにjaを指定 $.datep
このサイトの一番下でJavaScriptとCSSをダウンロードできます。ダウンロードするのはProductionと書いてある方でいいと思います。ただ、CSSについてはそのままだとうまく表示されないと思うので以下のように変更して上書きします。 現在はCSSの追加なしで表示されるようになっています。また、全ファイルがzip形式でダウンロードできるようになっています。最後に書いたjavascriptのカスタマイズはまだ参考になるのでぜひご活用ください。 * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ /* ここからが追加部分 */ #slider { position:relative; min-height:
複数の商品写真を見せるのに適した、画像拡大にも対応したコンテンツスライダーのスクリプトを紹介します。。 画像を拡大表示したキャプチャ FancyMovesの特徴 滑らかなアニメーションで画像がスライド表示。 画像はスライドすると拡大・縮小表示。 スライダーの送りは、矢印・画像のクリック。 キーボード(矢印)操作にも対応。 画像は拡大表示が可能(FancyBox使用)。 FancyMovesのオプション スクリプトのオプションでは、下記の設定が可能です。 パネルのサイズ パネルで使用する画像のサイズ 見出し・本文の文字サイズ 移動距離 また、FancyBoxを使用しているので、そちらのオプションも変更できます。 FancyMovesでは下記のオプションを調整しています。 ズームイン・アウト時のスピード 不透明度 オーバーレイのカラー
Coin Slider: jQuery Image Slider Plugin with Unique Effects 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」。 画像の切替を、タイル状に切り替えたりすることができるみたいです。 jQueryプラグインなので、$(elemen).coinslider メソッドにオプション渡せば動くようになっています。 少し面白い動きを付けたい、という場合にも簡単に実装できるので覚えておくとよいかもしれませんね。 Flashで同じようにやろうとすると1からだと結構面倒そうな気がしますが、このjQueryプラグインを使うことで一瞬で実装できます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く