[JS]複数のエレメントをターンテーブルのようにぐるぐる回すスクリプト -Roundabout
デモ：Around Other Things 回転の中心に他のエレメントを置いたデモ。 Roundaboutの使い方 Roundabouの実装方法を簡単に紹介します。 詳しい実装方法については「Learn」をご覧ください。 Roundabout -Learn HTML ぐるぐる回転させる各エレメントをリスト要素で実装します。 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="jquery.roundabout.js"></script> JavaScript jQueryのセレクタで指定し、Roundaboutを実行します。 <script>
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
Parallax Background with Javascript and CSS
« back to inner.geek Parallax Backgrounds a multi–layered javascript experiment This work is licensed under a Creative Commons Attribution 3.0 License. First of all, try scrolling up and down thing page. Use your scroll wheel, use the scroll bar, use the arrow keys, page up, page down, space bar. Note how the text scrolls normally, but the green background scrolls slowly, and how the clouds scroll
lightbox
The Psychology of Greatness in Legendary AthletesWhat defines greatness in legendary athletes? Beyond physical prowess and skill, their characters, mental resilience, and the ability to inspire transcend their technical achievements. The enduring legacies of individuals like Lionel Messi, Cristiano Ronaldo, Michael Jordan, and Muhammad Ali suggest a deeper interplay of psychological factors and so
[JS]パネルをフェードで切り替えるシンプルな国産のjQueryのプラグイン -ImageNavigation
デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
[JS]jQueryのプラグイン33+1選 -2009年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Organic Tabs アニメーションで収縮するタブコンテンツ。 flips パネルを多彩なアニメーションでスライド。 bxSli
JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
twitter facebook hatena google pocket 画像の切り替えを行うことで閲覧者の興味をひきつけることができます。 現状、多くがFLASHを使用していたりしますが、敷居が高いのが難点でしょう。 今回紹介する「Start/Stop Slider」を使用することで、わりと簡単に導入が可能です。 sponsors 使用方法 Start/Stop Sliderからstartstop-slider.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="startstop-slider.js"></script> 次に表示する画像などを以下のように指定します。 <
角丸javascriptライブラリ『curvyCorners』を使ってみる
角丸javascriptライブラリ『curvyCorners』を使ってみる 角丸javascriptライブラリ『curvyCorners』を使ってみました。 配布サイトからダウンロードしてきてrounded_corners_lite.inc.jsファイルをheadで読み込んでください。 <script type="text/javascript" src="rounded_corners_lite.inc.js"></script> 次にbodyに角丸にしたいblock要素をclass属性を付けて配置します。 <div class="myBox"> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> さんぷるさんぷるさんぷるさんぷるさんぷる<br /> </div> これで準備はO
Ajax » jQuery plugin » 角丸ライブラリ | PHP & JavaScript Room
アンチエイリアスのかかった角丸を生成するjQueryプラグイン。 画像も角丸にできます。 設置イメージ HEAD <!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.curvycorners.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('.c').corner(); $('.inner').corner({tl:{radius:6},tr:{radius:6},bl:{radius:6},br:{radius:6}}); $('.
画像やページをLightBox風に表示できるThickbox:phpspot開発日誌
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
Site Under Maintenance