For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
21 Beautiful jQuery Sliders for your next Project
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
ウェブサイト作成に役立つ35のwebサービス｜Webpark
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部
[JS]パネルがアニメーションでフリップするスクリプト -Sponsor Flip Wall
Sponsor Flip Wall With jQuery & CSS デモページ デモではグリッド状に配置されたパネルにマウスでフォーカスするとハイライトされ、クリックすると各パネルはくるっとひっくり返ります。 ひっくり返ったパネルには、個別のテキストやリンクが配置されています。 各パネルはdiv要素で配置されており、ハイライトのエフェクトはCSSでホバー時にボックスシャドウを適用しています。 CSS ボックスシャドウのスタイルシート <textarea name="code" class="css" cols="60" rows="5"> .sponsorFlip:hover{ border:1px solid #999; /* CSS3 inset shadow: */ -moz-box-shadow:0 0 30px #999 inset; -webkit-box-shadow:0
フリップが回転するjQuery Plugin用プラグイン QuickFlip | バシャログ。
QuickFlipは、フリップが回転するような感じで表示するコンテンツを切り替えるプラグインです。 設置方法 配布ページよりデータ一式をダウンロードし、QuickFlipを利用したいhtmlのhead要素などで以下のファイルを読み込みます。 <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="quickflip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="quickflip.css" /> 表示する部分は以下です。 <div class="quickFlip"> <div class="quickFlipPanel"> <p> Front content here
[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
jQueryでパネルをめくるエフェクト効果「QuickFlip2」｜BLACKFLAG
パネル（もしくはカードの様なもの）に対して、 表面と裏面をひっくり返すようなエフェクト効果を付けれるプラグイン 「QuickFlip2」が面白かったのでご紹介。 ≫QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler | Jon Raasch’s Blog 使い方も簡単で、jQueryファイルと合わせて、 上記サイトからダウンロードできる「jquery.quickflip.js」を ページ上からリンク。 それと下記スクリプトをページ上に読み込ませるのみで実装可能です。 ————————————– <script type=”text/javascript”> $(function() { $(‘.quickflip-wrapper’).quickFlip(); }); </script> ————————————–
jQueryを使ったフリップをめくるような動きをするスクリプト
基本的な構造はサンプルを見てもらうとしてポイントは以下の部分 $("#flipBT").click(function(){ $("#flipBox").flip({ direction: 'bt', color: '#D46419', speed: 400, content: "" }); }); それぞれの意味はこんな感じです。 direction ： めくれる方向を指定（デフォルトは tb） tb → 上から下へ bt → 下から上へ lr → 左から右へ rl → 右から左へ color ： 背景の色 speed ： めくれるスピード（デフォルトは500） content ： 中身をここに記述します
簡単！本をめくるような表現を実現するjQueryプラグイン「Viewbook」
twitter facebook hatena google pocket これは簡単に導入できてよさげなプラグインです。 本をめくるような表現をさくっと導入できるViewbook - jQuery Pluginを紹介します。 また、オプションも色々あるので、オリジナルなコンテンツになりそうです。 sponsors 使用方法 Viewbook - jQuery Pluginからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="jquery.viewbook.1.0.0.js" type="text/javascript
jQuery Easing - jQuery 日本語リファレンス
Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。（下記サンプル参照） そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ
【Javascript】jQueryをつかった一定時間で画像を切り替えるスクリプト（フェードイン）｜PICxPIC
一定時間がたつと画像が切り替えるスクリプトでございます。jQueryつかってます。 サンプルデモはこちらです。 ファイルのダウンロードはこちらから。 画像を切り替えるスピードなどは簡単に変えることができます。ちなみにスピードのとこの3000というのは3秒のこと。1秒は1000です。 画像を<p id=”gallery”>とかで囲めば表示されます。切り替える画像の数も拡張子も自由に変えれるけれど、画像の名前は1.jpgとか2.pngとか、1、2、3とかの連番でなくてはいけない。 [html] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script src="js/jquery.js" type="text/javasc
jQueryによるマウスオーバーアニメーション | cam-len
setIntervalとjQueryを組み合わせて背景をスクロールって言う手法をhoverに用いたところ、動作が安定しなかったので色々調べて見た結果の覚え書き。 背景スクロール自体は結構色々なサイトで取り上げられており、基本的には作りは同じなのでカスタムしやすそうなシンプルなソースを拝借したのですが元サイトは失念…。 clearIntervalなし //ソースはこんな感じ $(".jQuery_scroll").hover( function(){ $(".pngNG",this).stop(true).fadeTo("fast",1 ); //アニメーションスピード var scrollSpeed = 1; //画像サイズ var imgWidth = 915; //画像の初期位置 var posX = 0; //ループ処理 setInterval(function(){ //画像のサイ
JavaScriptやCSSの外部ファイルに手を加えサイトの表示速度を改善する3つの方法
色々スクリプトを設置してヘッダーがJavaScriptやCSSの外部ファイルでいっぱいになっていることはありませんか?外部ファイルが多くなればもちろん表示速度への影響も大きくなります。 サイトの表示速度はGoogleの検索順位にも反映されますし、そもそも訪問者のことを考えると少しでも表示速度は速い方がいいですね。 JavaScriptやCSSファイルを軽量化する 空白や改行をなくしてJavaScriptやCSSファイルを軽量化します。簡単に圧縮してくれるオンラインツールがたくさんありますが個人的なおすすめはこちら。 Compress javascript and css シンプルで使いやすいと思います。「basic compress」は空白のみ、「powerful compress」は改行も圧縮してくれます。 dean.edwards.name こちらも、同じように圧縮してくれます。軽量化
jQueryを学ぶためのリンク集
1. 概要の理解 jQueryを一切知らない場合はまずは概要の理解から始めます。 ノンプログラマーのためのjQuery入門 http://www.slideshare.net/hayatomizuno/jquery-7665168 はじめてのjQuery http://higashizm.sakura.ne.jp/jquery_first/ 2. 基本的な使い方を理解する サンプルを見ながら具体的なコードを作成し理解を深めます。 40分で覚えるjQuery速修講座 http://ascii.jp/elem/000/000/498/498710/ jQuery基礎文法最速マスター http://blog.webcreativepark.net/2010/02/02-111519.html jQueryサンプル集 http://www.designwalker.com/2008/04/jque
[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips - Web 業界の技術屋 | VIVID Labs.
悪名高き IE6 がついに Yahoo さんからも干されてデベロッパー歓喜！となってから、それなりに時間が過ぎましたね。 あなたの会社では IE6 のサポート状況は如何なものでしょう？当社では Yahoo さんもこうしていますよ、せめて IE7 にしましょ？ね？ね？と言う地道な活動を続けて、それなりに効果が出ています。 実際 IE6 をサポートしなければ CSS がシンプルに書けたり、png のアルファチャンネルをプラグイン無しで描画出来…で、き… 出来てないじゃん！ と言う訳で今回は IE7 と IE8 で再現を確認したアルファチャンネルの描画バグをフィックスします、症状は下記のような感じ。 普通に img 要素で描画する分には問題無い 既に描画されている要素の opacity を弄るとアルファチャンネル部分が黒くなる 普通にサイトを作っていて、png ファイルの要素の opacity
HugeDomains.com
Captcha security check suzken.com is for sale Please prove you're not a robot View Price Processing
JavaScriptで画像を回転させる「Wilq32.RotateImage」
ただ、写真をずらっと掲載しているだけでは、つまらないという方は多いと思います。 jQueryのライブラリ「Wilq32.RotateImage」では、簡単・手軽に画像を傾けることが可能です。 sponsors 使用方法 Wilq32.RotateImageからjQueryRotate.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="/test/js/jquery-1.3.js"></script> <script type="text/javascript" src="/test/js/jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#id名').rotate({ang
画像を回転できるjQueryプラグイン『wilq32』 – creamu
画像を違った風に見せたい。 そんなときにおすすめなのが、『wilq32』。画像を回転できるjQueryプラグイン『wilq32』だ。 このサイトでは、↑のように画像を傾けるJavaScriptが公開されている。 ソースは以下の通り。マウスオーバすると画像を回転させることもできる。 $(document).ready(function() { $(‘#image’).rotate(-25); }); 画像を回転できるjQueryプラグイン、チェックしてぜひ使ってみてはいかがだろうか。 » wilq32 いろいろ作業。やることが満載だ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Booklet - jQuery Plugin
認証がかかっています