MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上では多彩な表現が可能になっていますが、それ故に自分のこだわった表現をどう実現したら良いか悩んでしまうことがあります。そこでぴったりの表現ができるオープンソース・ソフトウェアがないか探すこともあるでしょう。 今回紹介するjQuery Timelinrもそんなソフトウェアの一つです。まさに自分が探していたものだ、と言う方はいらっしゃるのではないでしょうか。 jQuery Timelinrの使い方 jQuery Timelinrは年表と画像、そして説明を組み合わせたコンテンツを表現できます。こちらは横向き。 矢印やキーボードで次の年に移動できます。 実際に動かすとこんな感じです。画像が大きくなっていくのが良い感じです。 横ではなく縦向きもできます。 jQuery Timelinr
Webサイトの背景に画像をいっぱいに 広げて、jQueryでスライドショー化、 というのを手軽に実装出来るWordPress のプラグインです。jQueryとWPでよく 困ってる方を見かけますのでプラグイン に頼るのも手かなと思います。 WordPressでjQueryを使う、という方で結構困っている方が多いので、以前傾向と対策的な記事を書いたのですが、プログラマーじゃないから難しい、という方はプラグインに頼ってみては如何でしょう。 こんな感じで簡単に背景を素敵なスライドショーにする事が出来ます。背景は常にいっぱいに広がってくれます。キャプチャじゃ分かりませんけど画像が切り替わります。 プラグイン配布先でデモがありましたのでご覧下さい。 Demo フードやファッションサイトなど、トレンドに関係が深いコンテンツと相性良さそうですね。写真で訴求力を高めたい時に有効な手段だと思います。 インスト
Sliding Image Panels with CSS3 | Codrops CSS3で画像を分割スライドする超クールなパネル実装例。 例えば、画像が４枚に分割されていてそれらがアニメーションで次の画像に切り替わるというエフェクトをCSS3で実現しています。 アニメーションの種類は４種類あって、全部CSS3でJSオフで動きます。クオリティが超高いので、ダウンロード版をそのまま使いまわすことも可能。 デモページ 関連エントリ CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」 CSS3で出来たクールなLightBox実装チュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.jpg" alt="" /></li> <li><img src="images/002.jpg" alt="" /></li> <li><img src="images/003.jpg" alt="" /></li> <li><img src="images/004.jpg" alt="" /></li> <li><img src="images/005.jpg" alt="" /></li> <
Circle Navigation Effect with CSS3 | Codrops CSS3を使った超カッコいいナビゲーション付きスライドショー実装例 スライドショーというよりかは、ナビゲーションがポイントなんですが、画像の下部に円形でアニメーションしながら次の画像を表示出来るなんていうナビゲーション付きです。 そもそもの写真もカッコいいのですが、ナビゲーションの動き具合がなかなかのセンスを感じます。 プログラムのダウンロードも可能なので、これは機会があれば是非使ってみたいと思ってしまいました。 仕組みとしてはborder-radiusを大きくして円形にしつつアニメーションをかましてるという具合のようです。 このテクニックは色々応用できそうですね 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 3D効果を使って迫力あるスライドショー
jqFancyTransitions slideshow with strip effects jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects. jqFancyTransitions is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+. Documentation, Download and Discussion
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
