[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch | コリス

2016/01/25 60 users コリス スライダー スクリプト アニメーション カーテン

縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい～んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。 HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。 スマホで、カーテンを引き上げるように表示させるのも簡単です。 pageSwitch... 続きを読む

簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル | NxWorld

2015/06/11 94 users NxWorld bxSlider カルーセル スライダー 実装

スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載ってい... 続きを読む

Bootstrapでかっこいい縦長ページを作りたい人にオススメ！完成形から制作用のファイルまで全部揃ったテンプレート -Forkio | コリス

2015/03/16 117 users BOOTS コリス Bootstrap スクロール 固定ヘッダ

固定ヘッダ、オフキャンバス、スクロールと連動したちょっとしたアニメーション、コンテンツスライダーなど、最近よく見かけるトレンドを巧みに取り入れたレスポンシブ対応の縦長ページを実装するテンプレートを紹介します。 Boots...記事の続きを読む 続きを読む

ぷるるんと動くアニメーションが気持ちいい！新感覚のナビゲーション -Gooey pagination | コリス

2014/10/30 67 users Safari Firefox Chrome コリス 縦長ページ

コンテンツスライダーや縦長ページのナビゲーションでよく見かけるビュレットタイプのナビゲーションをかわいいアニメーションで実装するテクニックを紹介します。 アニメーションの操作が気持ちいいので、コンテンツより楽しんでしまうかも。 実際の操作は、下記ページでお楽しみください。 ※Chrome, Safari, Firefox, IEは11では動作しました。 Page scroll concept こっ... 続きを読む

これはカッコイイ！アイテムを浮かせて斜めにスライドさせるコンテンツスライダー -Tilted Content Slideshow | コリス

2014/03/16 92 users コリス かっこいい アイテム

まずは、デモの一部をアニメーションgifにしたものから。 なにこのかっこいいスライダーは！！！って感じです。 Tilted Content Slideshow コンテンツの各アイテムをふわりと浮かせて、斜めのクロスを軸にびゅーんとスライドさせるかなりかっこいいコンテンツスライダーを紹介します。 Appleのプロダクトページに使われそうなエフェクトですね。 アニメーションgifでは一部の動きなので、... 続きを読む

[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through | コリス

2013/11/17 241 users 半透明 スライダー スクリプト GIFアニメーション コリス

画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 デモのアニメーション 上記のgifアニメーションは軽量化のためコマ数を落としていますが、実際の動作はもっと滑らかで気持ちいいです。 下記ページでお試しください。 radio click through スライダーの動... 続きを読む

[JS]普通のかっこいいスライドから、予想の斜め上いく3Dのアニメーションにも対応したコンテンツスライダー -Adaptor | コリス

2012/08/06 84 users jQuery コリス インターフェイス エフェクト プラグイン

シンプルなインターフェイスに、スライド時にさまざまなエフェクトが用意されたコンテンツスライダーを実装するjQueryのプラグインを紹介します。 下記キャプチャのエフェクトは3Dで、くるっぐい～ん、って感じです。 Adaptor, a jQuery 3D content slider Adaptorのデモ Adaptorの使い方 Adaptorのデモ コンテンツスライダーの対応ブラウザは、IE6を含... 続きを読む

[JS]キャプションのアニメーションがかっこよすぎ、スマフォもIEも対応のコンテンツスライダー -iView Slider | コリス

2012/07/24 287 users コリス jQuery キャプション スライダー iframe

画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサ... 続きを読む

jQueryとCSS3でダイナミックに動くコンテンツスライダー:phpspot開発日誌

2012/06/19 66 users phpspot開発日誌 jQueryとCSS スライダー

Fullscreen Slit Slider with jQuery and CSS3 | Codrops jQueryとCSS3でダイナミックに動くコンテンツスライダー。 アニメーションがカッコよくてネタはなくとも実装したくなるかもしれないスライダーです。 デモページ どうやって実装しているんだろう（＾＾；）とか思いつつ、チュートリアル記事もあるのでそこで学習できます。 プログラム一式ダウンロー... 続きを読む

[CSS]スタイルシートでここまでできる！Responsiveデザイン対応のスライダー -Responsive CSS3 Slider | コリス

2012/04/03 139 users コリス スライダー Responsiveデザイン CSS 実装

JavaScript無し(*1)で、スタイルシートで実装するResponsiveデザイン対応のコンテンツスライダーを紹介します。 *1 スライダーの基本機能ではJavaScriptを使用していませんが、iOSに対応させるために使用。 デモ 実装 デモ デモはCSS3に対応した下記のブラウザでご覧ください。 ベスト Firefox もっとも期待通りに動作します。 フルサポート Chrome, Fir... 続きを読む

[JS]シンプルで軽量だけど、充分な機能を備えたコンテンツスライダーのスクリプト -Casual Slider | コリス

2012/03/22 114 users コリス メジャーブラウザ スライダー スクリプト 実装

Casual Sliderの特徴 Casual Sliderのデモ Casual Sliderの使い方 Casual Sliderの特徴 Casual Sliderは実装が簡単で、シンプルながら充分な機能を備えたコンテンツスライダーです。 4KBと超軽量のスライダー タイマー機能付き あらゆるHTMLエレメントを配置可能 全てのメジャーブラウザをサポート カスタム ナビゲーション セットアップが簡... 続きを読む

[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー | コリス

2012/03/15 218 users コリス パラグラフ Kendo UI アニメーション スライド

デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 H... 続きを読む

簡単なjQueryコードで動く、レスポンシブWebデザイン対応のカルーセルを実装する為の雛形っぽいやつを作成してみる - かちびと. net

2012/02/15 51 users カルーセル jQuery jQueryコード 雛形 net

レスポンシブWebデザインに対応できる コンテンツスライダーのようなものの 雛形のようなものが欲しかったので、 自分で作成しました。テンプレなので 他の配布スクリプトのように親切な 設計じゃないですけど・・ レスポンシブWebデザイン対応のjQueryで動くカルーセルを作るための雛形っぽいのを作ってみました。全然大したもんじゃないんですがｗ 最初から小さい画面での表示も考慮しているのでプラグインで... 続きを読む

[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス

2010/07/25 232 users コリス アクセシブル Ajax スクリプト スライダー

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。... 続きを読む

[JS]jQueryのプラグイン33+1選 -2010年5・6月 | コリス

2010/06/24 346 users jQuery コリス DOM要素 プラグイン34選 決定版

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 simpleSli.de フレキシブルでシンプルで軽量なコンテンツスライダーの決定版。 Lightbox_me DOM要素を指定して拡大表示できるL [...] 続きを読む