キーワード検索「スライドショー」
1117
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るように...
549
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わ...
354
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一...
214
![[JS]超軽量、設置も簡単、オプションも豊富なスライドショーのスクリプト -Orbit | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-orbit.html)
実装も簡単で、オプションも豊富に揃った、使い勝手のよい画像スライドショー用のjQueryのプラグインを紹介します。 約4KBと超軽量なのもいいですね。 右上のオートプレイは状況も表示します。 Orbitの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js" type="text/javascript"...
244
以前にも「XHTML+JSでプレゼンを作りたいときのツールまとめ」なるまとめをしましたが、Slippyなる新しいツールが出てきたようですね。見た感じすごく良さそうですよ。↑ こんなマークアップが…。↑ こんなスライドショーに。↑ 使い方。矢印キーで進む/戻る、タブキーで一覧表示、[数字]+Enterで直接ジャンプです。↑ 一覧表示はこんな感じ。さらに言語を指定してSyntax Hilighting...
222
![[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-vegas.html)
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外...
191
ディスプレイ（ブラウザ）のサイズ、画面いっぱいに背景画像を拡大表示するCSSやjQuery プラグインをいくつか試してみたのでレビューをまとめてみました。CSSだけでフルスクリーンで背景表示ができるものや、jQueryのプラグインを使ったものなどいくつかご紹介します。ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけたjQueryのプラグインを試し...
168
Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、...
188
![[JS]さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-agilecarousel.html)
一つ一つの完成度が高い、アニメーションを伴ったさまざまなタイプのスライドショーが簡単に設置できるjQueryのプラグインを紹介します。 Agile Carousel - Javascript Slideshow - Im [...]
149
okok同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 BACKSTRETCH 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタ...
117
![[JS]わずか2行のスクリプトで実装するアニメーション機能付きスライドショー | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/a-slide-show-in-2-lines-of-javascript-by-joewalnes.html)
下記は各ポイントを意訳したものです。Step 1: コンテンツ（HTML）Step 2: ページめくり（JavaScript）Step 3: スタイリング（CSS）Step 1: コンテンツ（HTML）はじめに、スライドショーのコンテンツを用意します。 ここでは一つのスライドに一行のテキストを表示します。HTML5<!DOCTYPE HTML><html><head><title>My slide...
101
Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」 2012年04月02日- Timeline Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」。 一見スライドショーのようでもありますが、タイムライン付きのスライドショーになっています。何かの歴史を語る時には是非使いたいと思ってしまう程のクオリ...
84
クリエイティブなCSS3テクニック集「CSS3 Image Galleries, Slideshows and Image Effects」 限られたスペースを有効に利用するため、もっと魅力的に写真を見せるためにスライドショーを利用しているという方は非常に覆いと思いますが、今回紹介するのはCSS3で実現するクリエイティブなスライドショー集「CSS3 Image Galleries, Slidesh...
90
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にス...
83
Webサイトの背景に画像をいっぱいに 広げて、jQueryでスライドショー化、 というのを手軽に実装出来るWordPress のプラグインです。jQueryとWPでよく 困ってる方を見かけますのでプラグイン に頼るのも手かなと思います。 WordPressでjQueryを使う、という方で結構困っている方が多いので、以前傾向と対策的な記事を書いたのですが、プログラマーじゃないから難しい、という方はプ...
74
25 Useful Html5 Cheat Sheets and Tutorials For Web Developer HTML5で色々作るチュートリアル＆チートシート ギャラリーやcanvas、スライドショー、コンタクトフォーム等色々なものを作るチュートリアルとチートシートなどがまとまっています。 HTML5でテトリスを作るチュートリアルなんかもあります 最近HTML5ネタが多くなって来ました...
79
![[JS]表示サイズにあわせて最適なレイアウトを提供する高性能なスライドショーのスクリプト -Camera | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-camera.html)
Cameraのデモ Cameraの使い方 Cameraのデモ デモは上記のトップにあるものと、他に3種類のスライドショーがあります。 トップのものが一番シンプルで、Cameraの基本性能を楽しめます。 画像の切り替えには、美しいアニメーションが採用されています。 デモ：Fullscreen フルスクリーンタイプのスライドショー。 Cameraの使い方 Cameraで使用する基本的なHTMLの構造か...
88
AppleっぽいUIが秀逸なイメージスライドショー実装jQueryプラグイン「AviaSlider」2010年05月31日-AviaSlider - a unique jQuery Image slideshow plugin AppleっぽいUIが秀逸なイメージスライドショー実装jQueryプラグイン「AviaSlider」 WEBブラウザ上でスライドショーというとリッチなものからシンプルなもの...
65
「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope。アニメーションでオブジェクトの位置が変更されます。 ResponsiveSlides....
60
地味に良さそうだったので備忘録。画面 いっぱいに画像を広げてフェードエフェ クトでスライドショーを実装できるjQuery プラグイン・slideshowify.jsです。この 手のプラグインは沢山あるので選択肢 の一つとして・・ なんとなくよく見かけた画像のフルスクリーン表示を実装します。この見せ方は良い写真や画像なら飲食店やアパレル系などでは訴求力もあるし、よく見かけるのも当然といえば当然かもし...
