[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモ デモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjQu
![[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2](https://cdn-ak-scissors.b.st-hatena.com/image/square/df5d3a30b733e55f7a58d3fb89e38ff656272054/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031901-00.png)
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
第3回 トップページを彩るスライドショーのポイント | gihyo.jp
その他、speedやtimeout、pause（0：マウスオーバ時にスライドをストップしない、1：マウスオーバ時にスライドをストップする）などで細かく動きを指定することもできます。 そのほかにも指定可能なオプションはたくさんあり、「jQuery Cycle Plugin - Option Reference」で確認することができます。 スライドのコンテンツとナビゲーションを指定する 次に、bodyタグ内のXHTMLソースを見ていきます。 XHTMLソース（bodyタグ内） <div id="slider"> <div id="slideshow"> <div class="slider-item"> <div class="text_item"> <h2>Wonderful elephants<br /> living abroad.</h2> <p>フェードイン&アウトするシン
[JS]画像切り替えやパネル表示にフェードを使ったスライドショーのスクリプト -Fade-in slideshow
画像の切り替えやパネルの表示にフェード効果を使用したスライドショーのスクリプトをDynamic Driveから紹介します。
[JS]動作が軽快なパネルを水平・垂直にスライドするスクリプト -Easy Slider
リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。 Easy Slider 1.5 demo パネルには画像やテキストなどを配置することが可能で、スライドのコントローラーはテキストベースのものやグラフィカルなものを使用することができます。 demo 1（スタイルは無し） demo 2（スタイルを適用） demo 3（スタイル無しで垂直方向に） demo 4（スタイル適用、自動スライド） demo 5（複数のスライダーを設置） スクリプトのオプションでは、スライドのスピード、スライドの自動・手動、ポーズの時間などを調整することができます。 Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
ギャラリープラグインデモいろいろ
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site. Required Files the jQue
[JS]HTMLコンテンツにも対応、カルーセルで表示するスライダーのスクリプト -jShowOff
一つ以上の子要素と、それらを内包する親要素をスライダーとして使用します。 下記は、テキストや画像を配置したdiv要素を子要素として、それらを内包するdiv要素を配置しています。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /></a></div> </div> JavaScript 「jquery.js」と「jquery.jshowoff.min.js」を外部ファイルとし、下記のスクリプトを記述します。 セレクタ（#features）は、自分の環境にあわせて変更してください。 $(document).re
[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent
デモ：カルーセル機能付きのスライダー：垂直方向 jContentの実装 実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。 HTML <div id="demo"> <a title="" href="#" class="prev"></a> <div class="slides"> <div>...</div> <div>...</div> <div>...</div> <div>...</div> </div> <a title="" href="#" class="next"></a> </div> JavaScript <script type="text/javascript" language="javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/j
[JS]二つのパネルをダイナミックにずらして表示するコンテンツスライダー -dualSlider
左右に配置された二つのパネルをスライドのタイミングをずらして表示するコンテンツスライダーを紹介します。 dualSlider ※注意 IEでアクセスすると「Virus.DOS.Albania.429」が検出されます。当方はFirefoxでアクセスしていため気がつきませんでした。 しかしながら、スクリプト自体はかっこいいので、いつか解消されることを期待しつつURLを記載しておきます。 http://www.hugoandcat.com/DualSlider/index.html コンテンツスライダーの操作は自動と手動があり、自動と手動の切り替えは右上のボタン、手動の操作は右下で行います。 手動操作のインターフェイス dualSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。 スクリプトのオプションでは自動・手動の切り替え、アニメーションのタイミングなどを設定
【フォトジェミックで旅のポスター選手権】開催記念動画
たくさんのご参加ありがとうございました。溢れる感謝の想いは動画の中に込めました(^^)画面が大きい高画質・高音質版はYouTubeでご覧いただけます→http://goo.gl/zdtOFJ◆参加作品を親登録済◆震源地：Air様（im4113813）◆共同主催：おにやん様（im4116723他）、メロディムーブ（im4115055他）◆開催提案：おにやん様（im4115055にて）◆開催宣言：メロディムーブ（im4115645にて）◆大百科執筆：おにやん様（http://dic.nicovideo.jp/a/フォトジェミックで旅のポスター選手権）動画 by Air様◆【初音ミク誕生祭】summer light【フォトジェミック】 sm24358671関連作品◆Air様ブログ：ar560668 ar570200 ar612472 ar623088◆マンガ「仮胸ライダーもりミク」第１回：mg1
[JS]省スペース用に二種類のズーム機能を備えた画像スライダー -Portfolio Zoom Slider
Portfolio Zoom Slider with jQuery デモページ [ad#ad-2] ズーム機能は省スペース用に二種類実装されています。 一つ目のズームは上キャプチャのように、ホバー時にそのエリアのみズームで表示します。二つ目はクリック時に拡大画像をLightbox風エフェクトで表示します。
[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider
デモページ：Standard 操作は左右のナビゲーション、矢印キーを使ったキーボード操作にも対応しています。 外観はCSSのテーマファイルで変更することができ、アニメーションの変更、ビュレットのナビゲーション、サムネイルのナビゲーション、フルスクリーンスライダー、video/audioもサポートしています。 デモページ：Using API デモページ：Using Events デモページ：Multiple Sliders ダウンロードファイルに含まれているデモは、Retina用の画像も用意されています。 デモを幅480pxで表示 Ideal Image Sliderの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートを外部ファイルとして記述します。 「default.css」はスライダーの外観を定義したデフォルトのテーマです。 <head> ... <link rel="s
![[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/c553218678c826bd3f32579ee04c4e31354c3815/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091003.png)
[JS]2D、3Dの多彩で面白いエフェクトを備えたスライダーのスクリプト -Flux slider | コリス
iPhone, iPadなどにも対応した、画像のスライド時にCSS3アニメーションを採用し多彩なエフェクトが楽しめるスライダーを実装するjQueryのプラグインを紹介します。 Flux slider デモページ [ad#ad-2] 画像の変更時は、上記のバー状のものをはじめ、ブロック状、サークル状など、2D、3Dのダイナミックなアニメーションが用意されています。 Flux sliderの実装 HTML 各画像をdiv要素で内包します。 <div id="slider"> <img src="img/avatar.jpg" alt="" /> <img src="img/ironman.jpg" alt="" /> <img src="img/tron.jpg" alt="" /> <img src="img/greenhornet.jpg" alt="" /> </div> JavaScr
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
Juicebox - The Ultimate HTML5 Image Gallery
Spectacular Web Image Galleries Made Easy Use Juicebox to create responsive JavaScript image galleries for your web site, blog or portfolio. Juicebox is a complete web image gallery solution. Use Juicebox to create spectacular web image galleries for your web site with no coding required. Juicebox is simple to set up and use, and includes complete browser and mobile device support. View demos Get
[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js
コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。 <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut</li> </ul> <div id="s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]Apple風の画像ギャラリー：カバーフロースクリプトの決定版 -ContentFlow
https://coliss.com/articles/build-websites/operation/css/css-image-gallery-with-permanent-link.html
Flickrの写真を横方向のスライドショーにしてくれる『Slideoo』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
