キーワード検索「スライダー」
731
![[JS]jQueryのプラグイン100選 -2010年総集編 | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2010-best.html)
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 コンテンツスライダー・カル [...]
371
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」2011年02月10日-jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に...
337
![[JS]jQueryのプラグイン33+1選 -2010年5・6月 | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugins-best-2010-june.html)
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。simpleSli.deフレキシブルでシンプルで軽量なコンテンツスライダーの決定版。Lightbox_meDOM要素を指定して拡大表示できるL [...]
269
画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ！なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせる...
228
![[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-flowslider.html)
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブ...
223
クロスブラウザに対応したベーシック で汎用性のありそうなスライダーを 実装出来るjQueryプラグインのご紹介。 The Lof JSiderNewsは派手な装飾も 無く、シンプルで欲しい機能は揃え てくれている印象です。 なかなか使いやすそうなので備忘録。派手なスライダーが結構多い印象ですが、結局普通のものが一番使いやすいですよね。派手なのもインパクトあって好きですけどｗ 今日のプラグインもクロ...
195
アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。 0 Ninja UIはjQuery Webjutsu（Web術？）を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタ...
183
Webサイトやブログなどでよく見かけるデザインのひとつとして、コンテンツ、写真スライダーを利用しているケースがあります。 グラフィカルなデザインに動きを加えることで、より一層コンテンツにユーザーの目を惹くのではないでしょうか。 海外デザインブログDesignModoで、色々なスライダー素材をデザインしたPhotoshop用無料PSD素材を30個まとめたエントリー「Huge Collections ...
210
![[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-sudo-slider.html)
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。Sudo Slider jQuery Plugin デモページSudo Sliderの主な特長リスト要素で簡単にスライダーを実装。AJAXで画像やHTMLをロード。スクリプトのオフ時でもコンテンツが可能。マルチプルなスライダーにも対応。標準的なスラ...
175
Roundup of 30 jQuery Image Gallery/Slider Tutorials & Plugins | Lava360 jQueryベースの画像スライダー３０まとめエントリのご紹介。 画像スライダーといっても、実に様々なデザインがありますが、３０個もあれば自分の目的に合ったものが見つかりやすそうですね。 全体的にクオリティは高いようです。 昔では想像もできなかったことが実現...
164
![[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/parallax-content-slider-with-css3-and-jquery-by-codrops.html)
デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 H...
180
Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSということでなかなか凄いテクニック集がまとまっています。 我こそはCSSマスターという方は覚えておいてもよさそ...
135
![[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html)
デモ：カルーセル機能付きのスライダー：垂直方向 jContentの実装 実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。 HTML <div id="demo"> <a title="" href="#" class="prev"></a> <div class="slides"> <div>...</div> <div>...</div> <div>....
143
自分用に備忘録。そろそろチートシート が出てくる頃じゃないかと思うので、そう 焦ることも無い情報だと思いますが、近々 使いそうなのでその時に面倒な事になら ないようによく使いそうなマークアップを リストとしてメモしておきます。 ちゃんとしたデモは本家で確認して下さい。ここにあるサンプルは僕のいい加減なサンプルです。尚、マークアップが見やすい様にするだけの為にコメントアウト入れていますが気にしないで...
120
![[CSS]スタイルシートでここまでできる！Responsiveデザイン対応のスライダー -Responsive CSS3 Slider | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css3-responsive-slider-without-javascript-by-csscience.html)
JavaScript無し(*1)で、スタイルシートで実装するResponsiveデザイン対応のコンテンツスライダーを紹介します。 *1 スライダーの基本機能ではJavaScriptを使用していませんが、iOSに対応させるために使用。 デモ 実装 デモ デモはCSS3に対応した下記のブラウザでご覧ください。 ベスト Firefox もっとも期待通りに動作します。 フルサポート Chrome, Fir...
126
ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。ScrollTo Posts With jQueryページ内をダイナミックにスクロール...
102
![[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-sequencejs.html)
普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスラ...
96
![[JS]シンプルで軽量だけど、充分な機能を備えたコンテンツスライダーのスクリプト -Casual Slider | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-casual-slider.html)
Casual Sliderの特徴 Casual Sliderのデモ Casual Sliderの使い方 Casual Sliderの特徴 Casual Sliderは実装が簡単で、シンプルながら充分な機能を備えたコンテンツスライダーです。 4KBと超軽量のスライダー タイマー機能付き あらゆるHTMLエレメントを配置可能 全てのメジャーブラウザをサポート カスタム ナビゲーション セットアップが簡...
101
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」2010年07月26日-Sudo Slider jQuery Plugin Demo#1 画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」。 簡単な定義でなんでもスライダーとして動作させちゃうことが出来ます。 <div>の中に<ul...
87
スマートフォンやiPadなどのタブレットはもちろん、 様々なウィンドウサイズにも自動でレイアウトを 調整するレスポンシブなjQueryスライダーのご 紹介。FLEXSLIDERは4KBと軽量で、実装も 手軽なので覚えておくと重宝しそうです。マーク アップも簡単なのでiPhone向けサイトの構築 時に導入を検討したいですね。 以前もレスポンシブWebデザイン対応のスライダーをご紹介しました（Blue...
