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
ブラウザ上でPDFを表示するJSライブラリ「PDF.js」:phpspot開発日誌
PDF.js PDF.jsを使えば、PDFをそれっぽいインタフェースとともにブラウザ上で表示してしまえます。 なんでもJavaScriptでやりゃいいってもんじゃないよ、という気もしますが、面白かったのでご紹介です。 PDFを一貫して同じインタフェースで表示させたいというようなニーズにマッチしそうですが、動かないブラウザもあるみたい。 世界は広いということを認識させられるライブラリですね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ド派手なビジュアリゼーションを実現できるJSライブラリ「Toxiclibs.js」 ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」 OpenOffice等の文書をWEBで表示するJSライブラリ「WebODF」
Backbone.js と比較しながら Knockout.js を試してみた - present
Backbone.js を試したから Knockout.js にも挑戦 JavaScript のクライアント MVC フレームワークは Backbone.js でいこうと思っていたんですが、Knockout.js が Ver 2.0 でかなり機能追加されて、ちょっと心変わり。もともと Knockout.js のデータバインディング機能に興味を持っていたところに、テンプレート機能が追加されて、試してみたくなりました。 念のため説明すると、Knockout.js は、.NET 開発者にはお馴染みの、データバインディングや MVVM パターンが特徴のフレームワークです。 Knockout : Home ちなみに、Backbone.js の記事はこちら。 作って覚える Backbone.js - present 作って覚える Backbone.js (2) Router 編 - present T
HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog
HTMLで複数の画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示され読み込まれたものがフェードインして表示されます。 ▼前者のデモ ▼後者のデモ 後者のデモには、ローディングのパーセンテージ表示も付いています。読み込みが何%まで達しているかを確認できるのも、後述のJSライブラリのメリットです。 HTML5で作られたフルFlash的なサイトを見たときにimgタグでインターレース的に画像がバラバラとでてくることが多くて、いつも微妙な思いをしていました。Flas
[JS]直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama
デスクトップだけでなく、iPhoneをはじめとするスマートフォンなど、さまざまなデバイスに対応した画像ギャラリーを実装するjQueryのプラグインを紹介します。 Fotorama [ad#ad-2] Fotoramaの主な特徴 Fotoramaのデモ Fotoramaの実装 Fotoramaの主な特徴 Fotoramaはセットアップも簡単で、直感的な操作性が楽しい画像ギャラリーのスクリプトです。 メインの画像をスライドするにはいくつかの方法が用意されています。 矢印ボタンでメイン画像をスライド ドラッグ操作でメイン画像をスライド ナビゲーションでメイン画像をスライド サムネイルでメイン画像をスライド サムネイルもドラッグでスライドすることができます。 サムネイルもドラッグでスライド サムネイルのボーダーはアニメーションで動作し、読み込み時のエフェクトも用意されています。 Fotoramaの
JavaScriptでの日付の処理が超便利になる「Moment.js」:phpspot開発日誌
Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
Web Creative Park
このサイトは? JavaScriptやjQuery、jQuery Mobileなどのリファレンスを提供するサイトです。 現在総意製作中の為、情報量は少ないですが、日々追加されていっています。
背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」
背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。 さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。 sponsors 使用方法 Vegas Background jQuery Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.vegas.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.vegas.js"></script> <script> $(function(){ $.v
jQuery でページスクロール - daily dayflower
jQuery 1.2 以降だと scrollTop（と scrollLeft）という疑似スタイルが利用できるようになったので，jQuery UI を使わずとも，jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば， <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに，スムーズにスクロールしたいのなら， $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで下さい。 [note]追記 もう少し増やして見やすくしたものをダウンロード出来るようにしました。 [/note] プラグイン読み込み <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquer
window.onloadの代替スクリプト
Updated Entry: http://p2b.jp/200805-events-order 今日は七夕Wですね。小学生の頃は、学校総出で「♪笹の葉さーらさら〜」ってやって、七夕伝説に思いを馳せたものですが。いつになってもガキの頃の心を忘れない大人でいたいものです。 さて、Ajaxの隆盛によって、その根幹であるJavaScriptはブログに欠かせないものとなっています。ppBlogも例外ではなく、至るところで活躍してます。一般にブログの(トップ)ページは、色々な情報を詰め込んでいるために、ファイルサイズは大きくなる傾向にあり、また、画像も至るところで使われるために、読み込むべきコンテンツサイズは更に大きくなります。ブロードバンドが当たり前の今日でもページの表示にちょっと待たされるのは珍しいことではありません。で、JavaScriptは(画像も含めた)ページの内容物が全部読み込まれた後に
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと - かちびと.net
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
[JS]年表や社史など、アニメーションでスライドする時間軸コンテンツを簡単に実装できるスクリプト -Timelinr
jQuery Timelinr [ad#ad-2] Timelinrのデモ Timelinrの実装 Timelinrのデモ デモでは、水平レイアウト、垂直レイアウト、オートプレイの3種類があります。 スライドのアニメーションもかっこいいですが、パネル表示時のズームもいいですね。 デモ：オートプレイ [ad#ad-2] Timelinrの実装 HTML 時間とパネルをそれぞれリスト要素で実装し、divで内包します。 「#timele, #dates, #issues」はデフォルトの設定です。 <div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> <p>Lorem ipsum.
シングルページで魅せる、縦方向にパララックス効果を表現するjqueryサンプル | バニデザノート
１ページで魅せるポートフォリオサイト風の動きのなかで 最近よく見かけるパララックス効果を採用したデザイン。 今回は縦にスクロールする際に、 スクロールの速度をレイヤーごとに調整して 視覚的に速い部分と遅い部分が起こるようなチュートリアルがありましたので 紹介いたします。 ▼One page website, vertical parallax http://www.webdesignshock.com/one-page-website/ このチュートリアルは、nike better worldというNikeのサイトから インスピレーションを受けて作成されています。 なので、こちらも見ておくことをおすすめいたします。 デモはこちらから。 大事なのは初期のBOXの定義（ＣＳＳ）と それぞれのＢＯＸがどんな動きをするのか （今回だったら特にスクロールスピード）を確認しておくこと。 いまブラウザの
表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっと気になってたjQueryプラグイン だったのでテストしてみました。表示 しているサイズに応じてレイアウトや フォントサイズを最適なものにしてく れる、というもの。Media Queryは使用 していないのでcssも綺麗に保てます。 場合によっては軽量化に繋がるかも、と思ったのでちょっとテストしてみたかったライブラリ。説明されてもあんまりピンとこないライブラリですけどｗなんというか、かゆいところに手が届く的なやつです。 このようにサイズを表示変えるとフォントサイズやdivの幅も指示通り変わってくれます。Media Query択一だと、どうしても面倒になってくることもあるので、こういうスクリプトも覚えておくと保険になるかもですね。スクリプトはたったの6KBですの
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。
Chrome Experiments
Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.
要素にヒント表示したい際に使えそうなポップアップ実装jQueryプラグイン「grumble.js」:phpspot開発日誌
要素にヒント表示したい際に使えそうなポップアップ実装jQueryプラグイン「grumble.js」 2011年07月26日- Grumble.js 要素にヒント表示したい際に使えそうなポップアップ実装jQueryプラグイン「grumble.js」 $('h1').grumble(options) と唱えると、h1要素のとなりに次のようなバブルを表示させることが出来ます。 要素指定なので簡単です。optionsにはアングルや距離等も指定できます。 一定秒数超えたら消すということも出来ます。オレンジ色だけじゃなくて、別の色にすることもできるみたい なんとも注目してしまいそうなポップアップですが、注目させたいポイントに置くとCVRアップなどに貢献できるのかも。 関連エントリ カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 リンクにカー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使って画像スクロール、クリック後画像の切り替えをする | CSS Lecture
http://www.designwalker.com/2010/06/jquery-forms.html
