ホームページ上でカウントダウンを実現するjQueryCountdownプラグイン | ウェブという選択肢
head部記述 サンプル <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('#counter').countdown({ image: 'img/digits.png', startTime: '01:12:12:00' }); $('#counter_2').countdown({ image: 'img/digits.png', startTime: '00:05', timerEnd: function(){ alert('5秒経過しました!'); }, format: 'mm:ss' }); }); </script> スクリプト上部がサンプル1で下部がサンプル2の
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
次世代の検索フォームを作成するjQuery＆CSS3サンプル:phpspot開発日誌
Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery＆CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。 アイデアの応用で面白いインタフェースが作れそうです ボタンがあってクリックするとアニメーションしながら伸びて検索フォームになります ボタンをクリックすると立体的にキューブっぽく回転して検索入力ボックスが現れます これを見ると、ああなんかまた色々と出来て数年後にはどうなっていっちゃうんだろう、ついていけるんだろうかなという不安すら覚えてしまいますね。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 高機能なカルーセルを実装
スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」:phpspot開発日誌
Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下のナビゲーションでページ送りをしたりも出来るみたい 今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」
レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」:phpspot開発日誌
ResponsiveSlides.js Responsive jQuery slideshow レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 画面サイズが変わっても問題なく動作するレスポンシブなスライドショー実装が可能です サイズは１KBぐらいでマークアップも超シンプルに記述できます ブラウザサイズを変更しても問題なし 今後はこうしたライブラリもレスポンシブ対応必須となっていきそうですね 関連エントリ ３ステップではじめるレスポンシブWEBデザイン 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 ファイルアップロード関連のjQueryプラグイン１０
画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」:phpspot開発日誌
Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、Youtubeの動画なんかも次のようにスライドショーさせることができてます。 単に写真を配置するよりもこうしたものを使うほうがよりよく写真を見てもらうことができるのかも。 インデックスもついていて、カーソルを合わせるとツールチップでサムネイルが表示されるなどのこだわりも見られます。 関連エントリ 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 迫力あるフルスクリーンの背景スライ
facebookのタイムラインをjQueryとCSSで作るチュートリアル:phpspot開発日誌
Facebook Timeline Design using JQuery and CSS. facebookのタイムラインをjQueryとCSSで作るチュートリアル。 facebookのタイムラインをみて感動した者です。あのUIを見て自分も作ってみたいけどどうやってるんだろうって言う方もおられると思いますが、そんなタイムラインを実際に作っちゃおうというチュートリアルです. ここまでの応用力があればなんでも考えたUIは作れそうなので、勉強しておくとよいかも 実際のデモページ - 良い感じです 優れたUIが利便性を高めてユーザを集めるというところをfacebookが実証していますが、こうした先進的なUIを作れるようになりたいものですね 関連エントリ jQueryとCSSで実現する押しやすくオシャレなチェックボックス実装チュートリアル HTML5＆CSS3をフルに活用したスライドショー実装ライ
jQuery Countdown
A jQuery plugin that sets a div or span to show a countdown to a given time. The current version is 2.1.0 and is available under the MIT licence. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations. Download now Defaults Formats 1 Formats 2 Layouts Significant Count Up Relative Pause/Lap Time Zones Callbacks Localisa
[jQuery]コンテンツをスマートに魅せるタブプラグイン集：30 CSS and Javascript Tabs Solutions | magazine.PXROCKcom
RSS FEED CATEGORY: TAGS: action brushes canvas cheatsheets clean color creative css css3 effect fonts forum framework free Gallery generator google grid hello world! html5 idea Illustrator jquery logo pattern photoshop plugin psd reset sample socialmedia style template texture theme tool tutolials twitter typography UI wallpaper webdesign wiki wordpress xHTML ARCHIVES: 2012年5月 2012年1月 2011年12月 201
![[jQuery]コンテンツをスマートに魅せるタブプラグイン集：30 CSS and Javascript Tabs Solutions | magazine.PXROCKcom](https://cdn-ak-scissors.b.st-hatena.com/image/square/dd5f8ce6b8dc44db78f288b69d17016677c80994/height=288;version=1;width=512/http%3A%2F%2Fpxrock.com%2Fsys%2Fwp-content%2Fuploads%2F2011%2F01%2Fj12-150x150.jpg)
少しのコードで実装可能な20のjQuery小技集
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
jQuery事始めvol.3・プラグインに頼らず自分でクリックで切り替わるタブメニューを作ってみる - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 暫く空いてしまいましたが、jQueryを コピペに頼らず自分で書いてみよう、 という記事。第三回目です。僕よりも 全然詳しい人のほうが多いんですが、 最近何度かデベロッパーさんの憤り の発言を目にするので多少でも貢献 出来ればと思います。 というわけで第三回目はよく見るタブメニューを書いてみましょう、というもの。 「jQueryを使ったスムースなタブメニュー – ウェビメモ」という記事をお見かけしたのですが、簡単なタブメニューですのでコピペにもプラグインにも頼らず自分で作ってみようじゃないかと、そういう趣向です。 内容は完璧に良いコードとかではなく、あくまで脱ビギナーという内容となります。ビギナーの僕が何様だみたいな話は置いといて。 分かりやすさをメインにしています
リリースされたばかりのjQuery 1.7.1に対応したチートシート
先月、リリースされたばかりのjQuery 1.7.1に対応したチートシートを紹介します。 即ダウンロード、即保存ものですね。 jQuery 1.7 Visual Cheat Sheet [ad#ad-2] jQuery 1.7.1は1.7のバグフィックス版で、リリース情報は下記をご覧ください。 jQuery 1.7.1 Released jQuery 1.7 Released jQuery 1.7のAPIで大きく変わったのは、.on(), .off()が追加されたことです。これは既存の.bind(), .unbind()に代わるもので、他にも.on()は.delegate(), .live()、.off()は.undelegate(), .die()に代わります。 これらは1.7.1でも利用できますが、これからは.on(), .off()を使用することが推奨されています。 チートシートでは
[JS]直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama
デスクトップだけでなく、iPhoneをはじめとするスマートフォンなど、さまざまなデバイスに対応した画像ギャラリーを実装するjQueryのプラグインを紹介します。 Fotorama [ad#ad-2] Fotoramaの主な特徴 Fotoramaのデモ Fotoramaの実装 Fotoramaの主な特徴 Fotoramaはセットアップも簡単で、直感的な操作性が楽しい画像ギャラリーのスクリプトです。 メインの画像をスライドするにはいくつかの方法が用意されています。 矢印ボタンでメイン画像をスライド ドラッグ操作でメイン画像をスライド ナビゲーションでメイン画像をスライド サムネイルでメイン画像をスライド サムネイルもドラッグでスライドすることができます。 サムネイルもドラッグでスライド サムネイルのボーダーはアニメーションで動作し、読み込み時のエフェクトも用意されています。 Fotoramaの
組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」:phpspot開発日誌
jQuery Org Chart ? a plugin for visualising data in a tree-like structure The Silver Lining 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 次のような組織図を作ることができます。ドラッグ＆ドロップでインタラクティブに再配置することも可能です ドラッグ＆ドロップで再配置可能 気になるマークアップですが、ul, li を階層的に記述するだけでよいものになっています。これを上記のようにビジュアライズしてくれるのは楽ですね 関連エントリ アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」 複数要素の関連をビジュアライズできるライブラリ「arbor.js」
様々なドロップダウンメニューを実装するスクリプト集:phpspot開発日誌
Useful jQuery Drop Down Menu Scripts - DesignModo 様々なドロップダウンメニューを実装するスクリプト集 ページをシンプルに見せつつ、機能性も損なわないようにできるドロップダウンメニューも色々な実装がありますね。 様々なタイプのドロップダウンと、それを実現するためのスクリプトが公開されていていざ自分がドロップダウンを実装するという時に参考にできます 最近はやってるサイトはナビゲーションなんかもシンプルになるように、それでいて十分な機能を提供している気がしますが、ドロップダウンなどをうまく活用していますね 関連エントリ リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSS3単体でアニメーションするドロップダウンメニューを実装 CSS3だけで実現する幅広で使えそうなドロップダウン実装チュ
Shuffle Letters Effect: a jQuery Plugin
In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element - an interesting effect that can be used in headings, logos and slideshows. Updated on 10 Sep 2011: The plugin was slightly improved by including a callback function, called when the animation is complete. Just pass it as a property of the arguments object: $('#el').shuffleLetters({callba
コンテンツをページ内でハイライトしつつ切り替えられるjQueryデモ:phpspot開発日誌
Cool Highlighter Effect with jQuery | jQuery Plugins コンテンツをページ内でハイライトしつつ切り替えられるjQueryデモ 縦に区切ったコンテンツをベースにハイライトを使ってページを切り替えるというお洒落なUIを実現できます。 ページはキーボードによる切り替えが可能で、スライドショーっぽく使うことができます。 デモページ - 実際に動きを見てみましょう 関連エントリ XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」 ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
e-riverstyle.com
jQuery Mobileを使ったスマホ対応サイトの作り方やTips
