[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
[JS]jQueryのプラグイン33 1選 -2011年7月 | コリス
jquery.transitions CSS transitionのサポートを検出し、classベースのアニメーションを与えることができます。
[JS]Twitterのツイートをブログやサイトに簡単に設置できるスクリプト -jTweetsAnywhere
Twitterでつぶやいたツイートをあなたのブログやサイトに簡単に設置できるjQueryのプラグインを紹介します。 jTweetsAnywhere デモページ [ad#ad-2] jTweetsAnywhereの設置は簡単で、数行のスクリプトで自分のブログやサイトにツイートを設置することができます。 jTweetsAnywhereの主な特長 指定したユーザー（複数可）のツイートを表示。 ユーザーのリストからツイートを表示。 Twitterの検索の結果を表示（パラメータは全対応）。 @Anywhereに対応。 エンドレススクロールを使ったページングをサポート。 自動更新でリアルタイムにツイートを表示。 ツイートボックスのカスタマイズが可能。 Follow me ボタンの設置が可能。 ネイティブのリツイートをサポート。 ユーザーのプロフィールを表示。 ツイート内のリンクを検出し、自動でリンク化
jQueryを使ったフルスクリーンで演出するスライドショー「Sliding Panel Photo Wall Gallery with jQuery」
javascriptを使って様々な表現ができるjQuery。様々なシーンで利用されていますが、今日紹介するのはよくあるスライダーで表現されたスライドショーではなくて、フルスクリーンをで演出されるスライドショー&ギャラリー「Sliding Panel Photo Wall Gallery with jQuery」を紹介したいと思います。 上記のように一面に画像を引き詰め、その画像をクリックするとしたからせりでてくるようなエフェクトで画面遷移され、個別の画像が表示されると言うものです。 詳しくは以下 ローディングアニメーションもgifアニメで埋め込まれていたりと細かなところも考えられています。 実装はそれなりに面倒ですが、作り自体は意外とシンプルです。元文からはソースファイルをまるごとダウンロードできるのと、事細かくソースの実例が掲載されているため、よく読み込んでいけば、オリジナルのエフェクト
[JS]jQueryを使用して上下左右からパネルをスライドさせるチュートリアル
二枚の画像を上下左右のスライドのアニメーションで変更するチュートリアルを1stwebdesignerから紹介します。 How to Create Sleek Sliding Box Effect With jQuery デモページ 滑らかなスライドのアニメーションはjQueryで実装されており、シンプルなスクリプトを追加するだけです。 基本のスクリプトは下記のようになります。 JavaScript <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $('#top-left').hover(function(){ $(this).children('.front').stop().animate({'top' : '150px', 'left' : '300px'}, 500)
[JS]画像をモザイク状に切り替えるスライドショーを実装するチュートリアル
切り替え時のアニメーションにはフェードやスライドのアニメーションがよく使用されていますが、ちょっと変わったタイル状に推移していくエフェクトをもったスライドショーを実装するチュートリアルをTutorialzineから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="mosaic-slideshow"> <div class="arrow left"></div> <div class="arrow right"></div> <div class="mosaic-slide" style="z-index: 10;"> <!-- The mosaic-slide div and the tiles are generated by jQuery --> <div class="tile" style=
jQueryで作るスライドするラベル – creamu
おっと思わせる仕掛けのあるフォームを実装したい。 そんなときにおすすめなのが、『Sliding Labels v2』。jQueryで作るスライドするラベルです。 フォームにフォーカスすると、ラベルがすっと左に移動しますね。とてもさりげない動きなので、ユーザビリティーを損なわず、おっと思わせる効果があると思います。 デモは以下から。 View the Demo 一度見てみてください。 Sliding Labels v2 DTPデザイナーと近場で飲み。楽しかった。共通点がいろいろあるんですが、やっぱりやりたいのはロックだということを再認識しました。 昨日、CREAMUのコンセプトを見直しました。「web2.0を紹介するデザイナーブログ」としていましたが、「WEB制作・ブランディング」に変更。やりたいのは制作と、アウトプットする対象のブランド価値の向上なので、ワードを絞り込みました。SEO的な観
jQueryで作るiTunesライクなスライダー – creamu
手動で切り替えられるフォトスライダーを作りたい。 そんなときにおすすめなのが、『How to Create a Simple iTunes-like Slider』。jQueryで作るiTunesライクなスライダーです。 右に表示される矢印アイコンをクリックすることで、サムネイルと写真が切り替わる動きになっています。なかなか気持ちのいい動きですね。 jquery.jsとmocha.jsというのを使っていて、ソースはとてもクリーンになっています。 デモは以下から。 Demo View It Online 一度見てみてください。 How to Create a Simple iTunes-like Slider tuts+ネットワークのサイトが、それぞれデザインリニューアルされていますね。細部の改善を図ったとのことですが、よりメリハリのある、すっきりとしたデザインになっていると思います。 さて
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルなデザインの各種コンテンツが揃ったウェブサイトの無料テンプレート -Aurelius
Apple風デザインが美しい、スライドショーギャラリーのスクリプト
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳