スクロールするとコンテンツがフェードインするjQueryプラグイン作った。
スクロールして対象要素が画面に出てきたときにいい感じでフェードインして表示させるjQueryプラグイン「jquery.scrollFade.js」を作りました。文章だとわかりにくいかと思いますので、下記のデモを参照ください。 サンプルコード jQuery本体、jquery.easing、jquery.scrollFade.jsの3つを読み込みます。そして、フェードさせたい要素に対してscrollFadeメソッドを実行させます。下記の例では「.scrollFade」というクラスを持つ要素を対象にしています。scrollFadeメソッドは、フェードアウト前の透明度（out）、フェードにかける時間：ミリ秒（duration）を引数として設定できます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
画像の上に文字を表示 Hover Captions (HCaptions.js)
Markup example This example uses all default settings. <a href="#myToggle" class="panel"> <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" /> </a> <div id="myToggle" class="cap-overlay hide"> <h5>Cupcakes</h5> <div class="content"> Name: cupcakes.png<br /> Photography: Ryun Shofner<br /> <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> <a href="jav
ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。【IE6対応版】｜BLACKFLAG
以前、ここでご紹介したエントリー、 「ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法」。 前回のパターンではIE6に対しては、このThickBoxの不具合（？）処理の対応をしていなかったのですが、 どうやら、昨日自分のTwitterをフォローしてくれた方が、この方法を使ってくれていたようなので IE6対応版も作ってみました。（←もちろん現在の業務上でもこの先必要になるもの…） jQueryモーダルウィンドウプラグイン「ThickBox」で ブラウザ枠を縮めてもモーダルウィンドウ枠が画面から見切れない方法【IE6対応版】。 （詳しい事象内容は前回記事から。。。） ThickBoxのデフォルトファイルではIE6に対して、モーダルウィンドウ枠「#TB_window」の位置指定は、 CSS「thickbox.css」ファイル内で、IE独自の指定「express
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
qTip - The jQuery tooltip plugin - Home
1Win casino üstünlükləri və fərqləndirici xüsusiyyətləri 1win casino, istifadəçilərinə həm stimullaşdırıcı, həm də rahat bir oyun təcrübəsi təmin edərək, digər online kazinolardan unikal üstünlükləri və fərqləndirici xüsusiyyətləri ilə seçilir: Oyunların müxtəlifliyi: 1Win, slotlardan, kart oyunlarından, video pokerdən canlı dilerlər ilə canlı oyunlara qədər geniş bir oyun kolleksiyasını təqdim ed
Build a Better Tooltip With jQuery Awesomeness | Envato Tuts+
One of the great tools we have in our web development goodie-bag are tooltips. A tooltip is a box that appears when you hover your cursor over an element like a hyperlink. It provides supplementary information about that element. For example, a link with little or no text (an icon) may become confusing. Provide an extra sentence or two within a tooltip to explain to your users what will happen if
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
スクロールすると自動的にトップへ戻るボタンがでてくるjQueryプラグインを作りました。 | モンキーレンチ
最近よく目にする、ページをスクロールしていくと出てくる「トップへ戻るボタン」をjQueryプラグイン化したので公開します。 ダウンロード GitHubで公開しています。 inc2734/jquery.scrollButton.js 使い方 プラグイン読み込み 下記のコードを記述してjQueryとプラグインを読み込みます。head要素の中とかが良いと思います。 <link rel="stylesheet" type="text/css" href="/PATH/TO/jquery.scrollButton/jquery.scrollButton.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri
ShadowBox
ShadwBox3.0備忘録 このサイトを立ち上げてる途中で気になった”ShadowBox”自分で忘れないためにも、また何方かの役に立てればと思いこのページを作りました 【ShadowBoxって何？】 先ずは下のMy Imageと書かれたリンクをクリックして見てください。 My Image どうですか？このページの上に画像がかぶさるように表示されたでしょうか？ しかも表示の際に徐々にウインドウが大きくなるアニメーション付です。 これが簡単に出来ます。 【設置準備】 ShadowBoxにいきます。 クリックで拡大 右側のDownloadをクリック クリックで拡大 下方のDownloadクリック ダウンロードした圧縮ファイルを解凍しアップロードします。 【設置１】 設置したいhtmlファイルの<head>～</head>間に <link rel="stylesheet" type="text/
Timothy van Sas - Animate a hover with jQuery
Timothy van Sas is very good in webdesign, xhtml, css and smooth dancing RSS FeedAnimate a hover with jQuery Animate an image while hovering it and show the visitors information while doing that. Sounds simple huh? Well it is, but the effect is nice and can be nice for a portfolio, for example. Ok, lets take a look at an example first, after that i will show you how it’s done. It’s quite simple
CSS swap hover effect | Min Tran's weblog
CSS swap hover effect Posted by Min Tran on 20 Jun 2008. 27 comments Few months ago, I worked on an e-commerce project whose owner (the client) required each and every of the product photos with information to be displayed in a fancy way. It was requested that the product photo be swapped by its product description when the mouse hovers over it. This kind of effect is very interesting and easy to
Plupload: Multi-runtime File-Uploader
Upload in HTML5 We are using HTML5 APIs. Always. Plupload is based on multi-runtime pollyfills for XMLHttpRequest L2, File and Image APIs. So when there's no HTML5 available in the browser, we emulate it ourselves. mOxie (combined code-name for pollyfills) is completely standalone and available separately. Drag'n'Drop Files from Desktop Files not only can be picked from browse dialog, but also can
Facebook ファンページで JQuery を使いたい
Facebookのファンページ FacebookページでFBMLアプリケーションや独自のアプリケーションタブを作成するときに、JQueryを使う方法です。 正規のJQueryは使えないので、有志の方が作成した、FBML用のJQuery互換のライブラリー「FBjqRY」を使います。 ライセンスは、MITライセンスです。 安定版：(2010/11/4現在、バージョン0.2) http://code.google.com/p/fbjqry/ 開発版：(2010/11/4現在、バージョン0.6) https://github.com/darwin/fbjqry 安定版と開発版では、作りが異なっているようなのでつかえるメソッドなどに違いがあるかもしれません。 開発版については、JQuery1.3.2と、1.4.2のいくつかの機能をベースにしているそうです。 実際の使い方としては、FBMLアプリケーシ
jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法 – bl6.jp
すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探している人なんかにはまさにといった感じかと思います。その名もFLEXSLIDER。しかも軽量なのがうれしいです。とても有名みたいですが自分は最近知りました…。以下、簡単な使い方です。 [ads_center] FLEXSLIDERの使い方 まずは下記サイトよりダウンロードします。 FlexSlider – The Best Responsive jQuery Slider head内でjQueryとプラグイン、そしてCSSを読み込みます。 <link rel="stylesheet" href="flexslider.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"><
ColorBox - ポップアップ内を自由に設定できる活かしたjQuery
View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can
jPlayer : HTML5 Audio & Video for jQuery
a project by happyworm The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQuery plugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and encouragement is provid
jQuery 超簡単にブラウザサイズに合った背景画像を表示できる
背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery Backstretch」を試してみました。ただ表示させるだけじゃなくて、フェードで複数の背景を切り替えたりといったことまでできます。使い方はめちゃくちゃ簡単です。全画面の背景画像はとてもインパクトあってかっこいいですね。 [ads_center] jQuery Backstretchの使い方 下記のURLよりダウンロードします。 jQuery Backstretch あとはjQueryとプラグインのファイルを読み込んで画像のパスを指定すればいいだけです。 <script src="jquery-1.6.4.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script> $.backstretch("sample.jpg"); </
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ひでぶろぐ。 jquery qtip2 透明 opcity