jQueryでコンテンツ要素を点滅させる方法｜BLACKFLAG
Webページ上のテキストや画像などの要素を点滅させるには、 古いものでは＜blink＞タグだったり、CSSでの「text-decoration:blink;」などがあったりしますが タグ自体が廃止タグだったり、ブラウザが対応していなかったりであまり使い物になりません。 そこで、テキストや画像などのコンテンツ要素を jQueryで簡単に点滅させる方法について自分用メモ程度に紹介してみます。 jQueryで点滅 jQueryでの点滅はいろいろやり方がありますが シンプルな方法として、対象物に対してfadeInとfadeOutを続けて指定することで 簡単に実現することができます。 例として、画像＜img＞タグを点滅させる場合のスクリプトは以下のようになります。 ※今回はHTML／CSSはあまり重要でないので割愛します。 ◆SCRIPT <script type="text/javascript"
[jQuery] エフェクトの後にremove()したい時にはqueue(callback) - yprops.com/notes
引き続きJavaScript をいじっています。 勝手が違って悶えていますが、だいぶ慣れてきました。 jQuery のすばらしさにしびれていたらまんまとハマった点について。 ■やりたいこと フェードアウト後にそのエレメントを削除 ■うまくいかない式 $('#some_element').fadeOut(300).remove(); //エレメントは、フェードアウトせず、すぐに消える。 ■原因 キューに入るメソッドと入らないメソッドがあるため。 ■説明 １） jQuery クラスのメソッドは、戻り値として自身のオブジェクトを返してくれるので、続けて処理したいメソッドは続けて記述できる（= メソッドチェーン)。 ２） エフェクトに分類されるメソッドのほとんどは、一旦キューに溜まってから実行されるため、前のエフェクトの終了を待って動いてくれる。 ３） 1) と 2) は互い
Offreg - A jQuery plugin that turns your images into a screen print.
A JQUERY PLUGIN - THAT TURNS YOUR IMAGES INTO RGB "PRINTS" VERY CMYK - SO STEREOPHONIC
About SPARKFUL | SPARKFUL
打造伴隨人們多年、一同成長的有趣產品從每日補水到每日走路、從記帳理財到待辦事項，我們的產品都是從生活中的小事情開始，讓小小的樂趣在生活中發芽。我們相信好的產品可以伴隨人們多年，進而影響大家的生活習慣。 我們的工作核心，就是將「樂趣」帶到每一個人的身邊。無論是外地工作的女兒，透過《Walkr》收到父母的能量記錄來確認彼此健康；《植物保姆》陪伴小女孩在醫院裡枯燥的治療時光；或是透過《記帳城市》學習理財，真實地在現實生活完成了夢想。 我們知道，一定還有很多有趣又動人的故事默默發生在這千萬人中。 一個充滿樂趣的產品，伴隨著人們長大，成為回憶的重要核心。我們都相信，這些故事都是這千萬使用者中，最重要的那些體驗，是我們和我們的使用者們共同擁有的回憶。
jQuery.BlackAndWhite - Gianluca Guarini
jQuery.BlackAndWhite Description This plug-in can easily convert any colored image into a B&W greyscale image. It uses the the HTML5 canvas tag and a fallback for the old browsers Usage 1 Include the plug into the page: <script src="js/jQuery.BlackAndWhite.js"></script> 2 Set the image wrappers using the css: .bwWrapper { position:relative; display:block; } 3 Initialize the plug in on window load
要素をランダムにフェードイン／アウトさせる「LivingFade jQuery Plugin」
twitter facebook hatena google pocket 要素のフェードイン／アウトをランダムにさせる「LivingFade jQuery Plugin」を利用すると少し異なった印象を与えられそうです。 また、昨今見られるページ表示後に要素をフェードインさせる、あるいはリンクをクリック後に要素をフェードアウトさせてから遷移させるなども簡単に導入できそうです。 sponsors 使用方法 LivingFade jQuery Pluginからjquery.livingfade-0.2.jsをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.livingfade-0.2.js"></script
jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】 | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery ウィンドウ全画面や特定要素サイズに合わせて背景画像を設置する素晴らしいプラグイン【BACKSTRETCH】】です。フルスクリーン（背景全画面）に画像を配置するプラグインは数々ございますが多機能で設定が面倒だったり、若干動きが不安定だったり、重かったりと選択に悩みます…。単純に特定要素の背景全画面に画像を配置するだけのプラグインでしたらこの【BACKSTRETCH】が軽量かつ簡易と一番のオススメです。 BACKSTRETCH ダウンロードページ ウィンドウ全画面への実装 実装方法は至ってシンプルです。まずはウィンドウの背景全画面に画像を配置します。 読み込み <script src="js/jquery-1.X.X.min.js"></script> <script src="js/jquery.backstretch
jQuery Effect Spectrum
概要 jQuery Effect Spectrumは、jQueryのプラグインあるいはjQuery.Effectの一種として動作します。 ある要素から他の要素（もしくは指定の場所）へ、四角形が残像を残して移動します。 Ajaxなどで変化させた箇所を強調したり、説明の中で指し示しているものを明示的にしたりするのに役立つと思います。 動作 このプラグインは nao58 が作りました。 他のサンプル [1] [2] 使い方 まずjQuery本体が必要です。 jQueryそのものの導入については、別途ドキュメントなどを参照してください。 jQuery Effect Spectrumは、本家プラグインページのリポジトリか、githubから入手してください。 実行は、開始点となる要素に対してspectrumメソッドを呼び出します。 その際、必ず目的地が必須となることに注意してください。 目的地は、de
champagne.js | fresh tilled soil
built by fresh tilled soil hello hola bon giorno ni hao guten tag namaste hello bonjour hola bon giorno ni hao chao guten tag namaste bonjour hola ni hao chao guten tag namaste hello bonjour hola bon giorno
jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法｜BLACKFLAG
以前の記事で「jQueryで画像などコンテンツ要素を順番にフェードインさせる方法」と題して、 一覧となって並べられた画像をjQueryを使って順々にフェードインさせる方法を紹介しましたが、 同様のパターンで、フェードインさせる順番をランダムにするパターンを できるだけシンプルな構成で作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像がランダムによって順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <div id="thumblist"> <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/
jquery.path
jQuery.path使い方 読み込むもの jquery本体 jquery.path.js 書き方(ちょーシンプル) html <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> <script src='https://raw.github.com/weepy/jquery.path/master/jquery.path.js'></script> <div>test</div> css div{ width: 20px; height: 20px; background: gray; position: relative;<!--ここではまった--> } js ベジェ曲線 $(function(){ var bezier_params = { start: {
jquery.rotate.js を使って、画像がクルクル回るWelcome作ってみました♪ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
こんにちは☆最近すっかり涼しくなりましたね…！ みなさん、体調など崩していませんか？？ さて、今日は画像を回転させられるjQueryのプラグイン、 jQuery rotateというプラグインを使ってみましたので、そちらをご紹介したいと思います♪ このブログのメイン画像、 これまでは水中から撮った水の写真を使用していたのですが、 長かった夏も終わって涼しくなってきたので衣替えしてみました♪ 追記:今はデザインを変更していて、同じ方法で切手風のデザインをクルクルしています。 Fireworksマニアではお花をクルクルしています♪ →Fireworksマニア お花で出来たWelcome文字です♪ この部分、ただの画像がぺたっと貼ってあるだけではなく、 画像を回転させられるjQueryのプラグイン、jQuery.rotate.jsを使用してそれぞれのお花がマウスオーバーで回転する、という仕掛けにな
Blurjs.com - For Sale
Project Title Use this area of the page to describe your project. The icon above is part of a free icon set by Flat Icons. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12! Client: Start Bootstrap Date: April 2014 Service: Web Development Close Project Title Use this area of the page to describe your project. The icon a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Wheel Menu by Pete R. | The Pete Design
http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/menu-nav/curtain/index.html
http://1stepwebdesign.com/web-design/47-special-effect-jquery-plugins-for-web-designers/