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でスクロールした要素をページ上部に固定するPersistentHeadersプラグイン
jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグインを公開します。 このプラグインは、下記のサイトで紹介されているサンプルをプラグイン化し、機能を追加したものです。 PersistentHeaders １．サンプル サンプルを用意しました。スクロールすると各コンテンツのヘッダー部分がページ上部に固定されます。また、ヘッダーを含んだコンテンツがページから消えると固定されていたヘッダーも消えます。 サンプル ２．プラグインのダウンロード 以下のリンクからプラグインをダウンロードして、ファイル名を「jquery.persistentheaders.js」にリネームしてください。 jquery.persistentheaders_0.0.1.js jquery.persistentheaders_0.0.2.js 以下、設定方法です。 ３．HTML H
容量が大きいページを開く際にプリローダーを表示するJavaScript「QueryLoader」 | Web活メモ帳
容量が大きいページを開く際にプリローダーを表示するJavaScript「QueryLoader」をご紹介。 大きな画像ファイルがたくさんある場合や、プログラムから動的に画像出力する際など、表示に時間がかかる際に使えるスクリプトになっています。
jQueryで動かすアニメーションエフェクトが素敵なプリローダー・CUSTOM PRELOADER EFFECT - かちびと.net
ちょっとお洒落なプリローダーを探してた という方の参考になるかな・・と思ったの と、自分でも使いたかったので備忘録です。 アニメーションエフェクトが素敵なプリ ローダー・CUSTOM PRELOADER EFFECTの ご紹介です。 エフェクトはjQueryとeasingで動かし、エレメントはcssで作成しています。コードも軽量で分かりやすいし、エレメントはcssベースなのでなかなか使い勝手がいいんじゃないかと思います。 動きがなかなか素敵なんでｓ・・と言われても動き見ないとですよね。以下、公式サイトのサンプルです。 Sample ドットはcss3でサークル上を形成、位置はランダムとなっています。 コード <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/java
jQueryでページ内スムーズスクロール | 1：n – DETELU Blog
jQueryでページ内リンクをスムーズに移動（ページトップへ等）するものを作ろうと思いいろいろ調べていたら、いいページを見つけたので早速試してみました。 We Ain’t Seen Nothin’ Yet. : [Rails meets jQuery] jQueryで作るページ内目次とスムーススクロール 上記の記事では「Interface.js」を利用しているようなのですが、動作させるコードを読んでいるとInterface.jsをどこで使っているかわからなかったので、jQueryだけで動作確認すると、とりあへず動きました。jQueryの古いバージョンでは「scrollTop」がjQuery自体に含まれていなかったのかもしれませんが、最近jQueryをいじり始めたため詳しいことはわかりません…。 ということでコードはほぼそのまま利用させていただき、スクロール動作だけを変更しています。 使用フ
jQueryで「Now Loading-30%」みたいなプリローダーを作る方法
フラッシュサイトの専売特許だったNowローディング（プリローダとも）ですが、jQueryやHTML5の登場で、最近では、非フラッシュサイトでも見かけるようになりました。この記事では、jQueryを使ってプレローダーを表示する方法を考えて見ます。 デモ 今回作るプリローダーのデモです。一度読み込むとキャッシュされてしまうので、もう一度みたい方は、ブラウザをキャッシュを消して見てください。 デモ 考え方とコード イメージファイルが重いサイトの場合であれば、イメージをプレローディングしながら、読み込んだイメージ数に応じた％を表示することでプリロード します。すべて読み込んだらメインコンテンツを表示します。 このサンプルコードでは、画像のロードイベントを拾って読み込んだイメージをカウントし、%とプログレスバーの表示を変えています。 <!DOCTYPE html> <html> <head> <sc
jQueryで画像ロールオーバー時にその場でシンプルに拡大表示するイメージビューアーのスクリプトサンプル｜BLACKFLAG
今では画像のイメージビューアーとしてのjQueryプラグインは多々あります。 最近よく見かけるもので、画像をクリックもしくはロールオーバーすることで 周りのレイアウトは保持したままで画像のみがその場で拡大表示されるエフェクト。 画像の見せ方としてちょっと興味があったので プラグインを使わず実際にスクリプトを組んで実装する方法を、 あれこれ試してみたサンプルを紹介してみます。 まずは動作サンプルは以下から。 画像にマウスオーバーしてみてください。 jQuery IMG HOVER ZOOMUP【SAMPLE01】 画像にマウスオーバーすることで周りのレイアウトを崩さずに画像のみを拡大表示します。 拡大後、画像からマウスアウトすると元に戻ります。 内部構成について、まずはHTMLから。 配置する画像とそれに付随するテキストのみの形で HTMLはあくまでシンプルな形にしておきます。 ◆HTML
『queryLoader.jsでページのプリロードを表示 html』
flashサイトのようなnow loading... みたいなやつを表示します。 サンプル GayaDesignのDownloadから queryLoader.css queryLoader.js を自分のcssフォルダ、jsフォルダにダウンロード <head>内に <link rel="stylesheet" href="css/queryLoader.css" type="text/css" /> <script type='text/javascript' src='js/queryLoader.js'></script> <body>内に <script> QueryLoader.selectorPreload = "body"; QueryLoader.init(); </script> で完成。
[JS]サムネイルにマウスオーバーしたら画像を切り替える
大きい画像１箇所とサムネイルいくつか配置して、サムネイルにマウスオーバーしたら大きい画像をサムネイルのやつに変更するスクリプト。 テーブル版、複数設置版、クロスフェード版の他、jQuery版とMooTools版も書きました。 シンプル版 イベントリスナーを使用したもの thumbsというIDにあるimgタグを自動収集して、srcから_thumbを抜いたものを viewに入ってるimgのsrcへ置換します。 テーブル版 イベントリスナーを使用したもの カスタマイズする場合はforの変数iが1から始まっている事に注意。 これは取得したimgの配列から先頭にあるimg#rollover_viewを飛ばすためです。 逆配置にする場合は、0スタートで(myImg.length-1)とする。 ページ内に複数設置する場合 大きい画像とリストのIDをクラスに変更。親のIDを指定して実行します。 複数設置＋
![[JS]サムネイルにマウスオーバーしたら画像を切り替える](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
[JS]直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama
デスクトップだけでなく、iPhoneをはじめとするスマートフォンなど、さまざまなデバイスに対応した画像ギャラリーを実装するjQueryのプラグインを紹介します。 Fotorama [ad#ad-2] Fotoramaの主な特徴 Fotoramaのデモ Fotoramaの実装 Fotoramaの主な特徴 Fotoramaはセットアップも簡単で、直感的な操作性が楽しい画像ギャラリーのスクリプトです。 メインの画像をスライドするにはいくつかの方法が用意されています。 矢印ボタンでメイン画像をスライド ドラッグ操作でメイン画像をスライド ナビゲーションでメイン画像をスライド サムネイルでメイン画像をスライド サムネイルもドラッグでスライドすることができます。 サムネイルもドラッグでスライド サムネイルのボーダーはアニメーションで動作し、読み込み時のエフェクトも用意されています。 Fotoramaの
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
プレロード（先読み）｜jQuery plugin｜Ajax｜PHP & JavaScript Room
ページロード完了後に指定した間隔で画像をフェードイン表示していく方法が掲載されています。 ページロード時にページ上の画像をすべて隠しておき、完全にページが読み込まれたら、ページ上の画像を上から順に配置されている順にフェードイン表示するようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta
Demo | jquery.vgrid.js
Demo list - Variable grid layout. demo001 - Simple Example demo002 - Basic Option Example demo003 - Any Height Grid Example demo004 - FadeIn Option Example demo005 - Sort Example demo006 - Dynamic Grid, Start/Finish Event Example demo007 - Dynamic Image Grid, Start/Finish Event Example demo008 - Multi Box Grid Example demo009 - Grid Element Show/Hide Example demo010 - Drag And Drop Sort Example
エレメントごとに動作設定できちゃうjQueryスライダー「Sequence」がステキらしい！ | うぇぶこん-Web Concourse-
HOME > インターネット > CSS > エレメントごとに動作設定できちゃうjQueryスライダー「Sequence」がステキらしい！ Share on Tumblr Tweet Check 「Sequence」は、エレメントごとにスライドの仕方を設定できちゃうというjQueryのすてきプラグインです。 1枚の画像をまるっとスライドするだけじゃなく、配置した複数の画像やテキストをCSS3アニメーションでそれぞれスライド出来ちゃうってことらしい。 まぁ、ごちゃごちゃ拙い説明するよりデモを見てもらった方が早いっス。 ↓ こんな感じ。 Sequence Theme Demo – Modern Slide In 他にも20コ以上のオプションが用意されていて、パララックスを使って奥行きのあるデザインを表現できちゃったりとか。↓ AppleのiPhoneページみたいにエレメントごとにいろんなスラ
フロートしたブロックをレンガ風に積み上げてくれるjQueryプラグイン「jQuery Masonry」を試してみた！ | うぇぶこん-Web Concourse-
HOME > インターネット > JavaScript > フロートしたブロックをレンガ風に積み上げてくれるjQueryプラグイン「jQuery Masonry」を試してみた！ フロートしたブロックをレンガ風に積み上げてくれるjQueryプラグイン「jQuery Masonry」を試してみた！ 2012年2月25日 18:30 | JavaScript Share on Tumblr Tweet Check ちょー今さら感満々ですが、フロートした要素をレンガ風に積み上げてくれて、リキッドレイアウトでのアニメーションもステキなjQueryのプラグイン「jQuery Masonry」を試してみました。 CSSでブロックをフロートさせるとき、ブロックの高さを揃えないと意図したように並ばないってことありますよね。 ↓ 例えばこんな感じ。 普通にフロートした場合 いろんな大きさのブロックを普通にフロ
Hover and Click Trigger for Circular Elements with jQuery
Your browser does not support the border-radius property! On elements with a border radius of 50% (which makes an element appear as a circle), the hover event gets triggered on mousing over the element itself which is its rectangular shape (see dashed outline). We'll apply a hover class and be able to click it only when entering the circle itself. Hover over the circle to see the effect. Read the
Thumbnail Proximity Effect with jQuery and CSS3
life was gracedBut his own worth, wherein his life was graced
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Plus123 : MaxImage 2.0-bata1
Automatic Image Montage with jQuery
Grid Navigation Effects with jQuery