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
lazyload.jsはスクロール時に画像の読み込みを開始して美しく仕上がる。
大きな栗の木の下で ■当ブログ投稿内容の当事者や関係者の方で、コメントの削除や記事訂正を希望される方は、該当ページのコメント欄よりお申し付けください。可能な限り対応させて頂きます。 lazyload.jsを使うと、画面のスクロールに合わせて画像を読み込むから美しい。 jquery.jsとlazyload.jsをダウンロード＋アップした上で、 head内に以下を追加 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dimensions.min.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script> <script type="text/ja
jQueryのプラグインをひたすら紹介するWebサイト・jquer.in
jQueryのプラグインをひたすら 紹介するWebサイト、jquer.in をご紹介致します。紹介されて いるプラグインは割と最新の ものが多いようです。 ひたすらjQueryプラグインを紹介するWebサイト。割と最近作られたプラグインばかり紹介してるみたいです。
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
lake.js
How does it work? Like this: <script src="jquery.js"></script> <script src="lake.js"></script> <script> $(function() { $('#lake-img').lake({ 'speed': 1, 'scale': 0.5, 'waves': 10 }); }); </script> ... <img id="lake-img" src="lake.png" style="display: none;"/> Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element. Th
jQuery UI の effect を使い、クリックで要素を横に揺らす
jQuery UI の effect プラグインを使い、クリックで、要素を横に揺らす方法。effect() の1つ目の引数に、「shake」を指定する。3つ目の引数で、横に揺れるアニメーション動作の速度を、ミリ秒単位で、調整できる。 実装例（サンプル） 実装例（サンプル）の動作について 実装例（サンプル）のカーキ色のボックスをクリックすると、ボックスが横に揺れる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascr
Designoob jQueryを使ったアニメーション 10+
Six Revisionsに10 Awesome Techniques and Examples of Animation with jQueryとして 10個のjQueryを使ったアニメーションが紹介されています。 ソースもUPされているので参考にどうぞ。 Puffing Smoke Effect in jQuery 煙突から煙を吐くアニメです。 ゆらゆらとゆれるのが特徴的ですね。 Parallax Scrolling Background 右上のメニューを選択すると 画面が動いて、他のボードに移動します。 ページ全体を使った大胆なアニメーションですね。 これらを使えば、Flash等も使わずに スムーズなアニメーションが作成できますね。
jQueryを使って、日時に合わせて背景画像を自動的に変更する - Di notebook
日時（月、時間など）に合わせて、背景画像を自動的に変更したいとき。 月に合わせて、背景画像を（正月、節分、ひな祭り、......）のように替えたい場合、まず1〜12月の画像を連番で用意する。月については、 1月はimage0.png、2月はimage1.png のように0を初期値として連番で画像に名前をつける。表示するためのjavascriptは以下の通り。 var theDate = new Date(); var thisMonthImage = "url(image" + theDate.getMonth() + ".png)"; $("#content").css("background", thisMonthImage); head要素でjQueryを読み込んでおく id="content"の属性を付けたHTML要素の背景画像が設定される
指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish
img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
jQueryで背景色をランダムに変える jQuery入門&サンプル集
今回は比較的簡単な背景色をランダムにってのをjQueryでやってみたいと思います。ウィンドウを開くたび、色をこちらで指定して好きな色のみでランダムに背景色を変更できるようにします。 ※デモ追加しました。 ではHTMLソース。 <body> <p></p> </body> ほぼ空ですがpタグのところに文字を入れるのでpタグだけ入れといてください。 ではjQueryのソース。 var bgcolor = ["#fff000","#ff3dab","#0085f5"]; hairetusu = bgcolor.length; //配列数「3」が出力 $('p').append(hairetusu+"パターンのランダム背景です。");//pタグに配列数を出力 var picup = Math.floor(Math.random()*hairetusu); // 1～3を変数picupに入れる va
キャラクターと背景が動きまくるjQueryプラグイン（おまけつき） jQuery.spritely | jQuery | javascript | understandard.net
ロンドンにある Artlogic Media Ltd. という会社が公開している jQuery プラグイン、jQuery.spritely がおもしろかったので、紹介がてらポスト。 公開したのが2010年3月10日ということなので、公開ほやほやなプラグインのようです。 このプラグインを使用すると、FLASH のような動きを、iPhone のような FLASH 非対応のデバイスでも見られるようになります。 ※“クリック”と書いてある箇所は iPhone などのデバイスでは、“タッチ”になります。 jQuery Spritely | Spritel ※リンク先がデモも兼ねています。 ページを開くと、背景がスクロールしていて、その上に鳥が2羽飛んでいます。 これだけでも充分すごいんですが、ページのどこかをクリックすると… マウスのある場所まで降りてくる！ 背景がスクロールしているエリアから飛び出
[JS]jQueryのプラグイン33+1選 -2009年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Organic Tabs アニメーションで収縮するタブコンテンツ。 flips パネルを多彩なアニメーションでスライド。 bxSli
EasyFreeTools.com - Free Web Tools For Everyday Tasks
Free Web Tools & Online ConvertersBuilt For Easier Everyday TasksStop wasting valuable time doing small tedious tasks when you can focus on the bigger picture. Use our easy free tools and pat yourself on the back. You Deserve it! 🙂 Temperature ConversionConvert temperatures between Fahrenheit, Celsius, and Kelvin with ease. Ideal for cooking, travel, science projects, and daily weather interpreta
jQueryのプラグイン「Page Scroller」を商用利用でも無料に変更しました：更新- 3.0.7
当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ（3.0.7）して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前： 表示 - 非営利 - 継承 2.1 日本 変更後： 表示 - 継承 2.1 日本 使用条件 上記のライセンスに従い、個人でも商用で
Web-ContentsSketch：ウェブを中心にデザイン活動している人の日々の記録 【久しぶりにjQueryに関するプラグインをいろいろ見ていました[その2]。特にColorlistが気に入りました】
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル／サッカーの話題なども。 無事にポータルサイトやコンセプトブックのコンテンツサイトもアップになったので、一安心。 今後も、情報発信、表現で適切なものを適切に使うことを行なっていきたいな、と考えてます(^^ というわけで、ちょこっと追加で、改めていい感じのjQueryプラグインがあったのでご紹介～～。 ●[jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu | Ys DESIGN 元サイトはこちら ●Color Fading Menu with jQuery | CSS-Tricks マウスオーバーで背景画像が切り替わったり文字の色がフェードで変わるので上品な感じ。 今、よく実装している背景画像配
『背景色変更（グラデーション）』
body{ background:url(画像のＵＲＬ) repeat-x bottom; background-attachment:fixed; } #frame{ background-color:transparent; } #sub_a{ background-color:transparent; } #sub_b{ background-color:transparent; }
jQueryプラグイン サンプル（画像系）：skuare.net
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider
IEでもCSS3のプロパティ、エフェクトを表現できるようにするリソース＆スニペット
CSS3 ノンサポートの IE でも CSS3 の border-radius、box-shadow、text-shadow などの、エフェクト系プロパティを利用する為のライブラリをご紹介します。また、最後に IE の filter を使ったコードもまとめてあります。 IEでも CSS3 の表現をするためのライブラリを使ってみました。IE9 がどれくらい普及するか分かりませんが、IE9 の CSS3 のサポートを見る限り、相変わらず IE だけ特別扱いしてあげないとダメなところもありそうですねー。以下のリンクで、IE9 の CSS3 サポートの状況をチェックできます。 Impressive Webs CSS3 Support in Internet Explorer 9 今回は、IE8 以下でもいくつかの CSS3 のプロパティを利用できるようにするためのライブラリを、2つほどご紹介します
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
solidstate.jp
グラデーション背景 5秒おきに色が変わる｜アメブロ初心者用カスタマイズ だめ奥さまCSS/HTML図書館