[JS]多彩なアニメーションを備えたスライドショーがスクリプトを一行も書かずに実装できるスクリプト -Cycle.js
スクリプトもスタイルシートも書かずに、多彩なアニメーションで画像がスライドするスライドショーを実装できるスクリプトを紹介します。 こういう実装方法がこれから増えてくるかもしれませんね。 Cycle.js Cycle.js -GitHub 対応ブラウザは下記の通り。 IE8+ Chrome Firefox Safari Opera TODOとして、ARIAのサポート、キーボード操作、IE7対応、エフェクトの追加を予定しているそうです。 いつもは、デモ、使い方、の順番で紹介していますが今回はデモと使い方を併せてご紹介。 Cycle.jsのセットアップ Cycle.jsのバリエーション Cycle.jsのセットアップ ベースとなるHTMLは非常にシンプルです。 スタイルシートをhead内に、スクリプトを</body>の上に外部ファイルとして記述します。 <title>Cycle.js</titl
オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた. | TM Life
昨日, コリスさんの記事で紹介されていた reveal.js に一目惚れしてしまったので使い方をまとめてみました. reveal.js の使い方を reveal.js を使って解説しています. 簡単にオシャレでシンプルなプレゼンを作れるのでぜひ遊んでみてください. 追記: 『reveal.jsベースのプレゼンをWeb上で作れちゃうオンラインエディタ『rvl.io』の使い方をrvl.ioを使って解説してみた』というエントリーを公開しました. とても便利なので, よかったらこちらも参考にしてくださいな♪ Sample reveal.js を解説しているサンプルはこちらです. また, 最小サンプルも作ってみました.(こちら) Download 今回制作したサンプルはこちらでダウンロードできます. index.html が 解説しているサンプル, sample.html が最小サンプルになります.
IE6もOK！jQueryプラグインでぐりんぐりんする画像切り替えを作る
twitter facebook hatena google pocket 最近のサイトではメインビジュアルにもよく画像の切り替えが利用されています。 これをjQueryプラグインbox-sliderでぐりんぐりん切り替えてしまいましょう。 頭を悩ませるIE6も3Dエフェクト以外は対応しています。 sponsors 使用方法 box-sliderからファイル一式をダウンロード。 切り替えたい画像を下記の通り記述します。 <div class="slider-viewport"> <div id="id名"> <figure> <amp-img src="画像パス1"> </figure> <figure> <amp-img src="画像パス2"> </figure> <figure> <amp-img src="画像パス3"> </figure> </div> </div> あとはJav
スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」:phpspot開発日誌
jKit - jQuery based UI Toolkit - Index スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 １つのライブラリで様々な機能を実現できます。必要に応じて読み込む必要がありますが、基本的にマークアップと属性をベースに記述でき、スクリプトを可能な限り書かないでもよいような実装ができるみたい。 スライドショー LightBox ソータブルなテーブル 簡易グラフ スクリプトを書くのが苦手という方は使ってみてもよさそうなライブラリでした。 関連エントリ 超クールなjQueryUIテーマ「Delta」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI
卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン:phpspot開発日誌
Adaptive Thumbnail Pile Effect with Automatic Grouping | Codrops 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン。 次のような、１つの写真は複数の写真を重ね合わせたようになっていて、クリックするとパラパラと写真がアニメーションしつつ開かれてギャラリー風になるというなんともオシャレなUIが実装できるようです。 クリックした所のアニメーションもカッコいいので是非デモを見てみましょう デモページ 関連エントリ サムネイルがシャッフルされてクールなギャラリー実装「Photofy」 動画ギャラリー用WordPressプラグイン10個 フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」
今すぐ使いたくなる！個性的でわくわくする動きのスライダー12選（Javascript・CSS3） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、サリーです。 最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。 「これだ！」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。 今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。 【最新スライダーはこちら！】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Slit Slider Revised http://tympanus.net/codrops/2012/10/24/slit-slider-revised/ DEMO： http://tympanus.net/Tutorials/FullscreenSlitSlider/ 絵が真ん中から横にバカッと、時
ラベル付きのスライダーが実装できるjQueryプラグイン「Evo Slider」:phpspot開発日誌
Evo Slider - jQuery Slideshow & Content Slider Plugin ラベル付きのスライダーが実装できるjQueryプラグイン「Evo Slider」 ラベルがついていてクリックすると内容が開くというアコーディオン風UIが実装できます。 HTMLがそのまま埋め込める上にラベルがついていることで見たいところだけを選んで見れるところがよさげです 製品WEBサイトのトップページなんかに置くとよさそうですね 関連エントリ jQueryとCSS3でダイナミックに動くコンテンツスライダー エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」 AppleっぽいデザインのjQueryスライダーサンプル
jQueryでフリップエフェクトを使った良プラグインやサンプル集１０:phpspot開発日誌
10 Best jQuery Flip effect plugin with examples jQueryでフリップエフェクトを使った良プラグインやサンプル集１０。 送信時にフリップするフォームやフリップするカウンタの他、アイテムをフリップアニメーションさせてオシャレにレイアウトするプラグインやサンプルがまとまっています。 こういうことも出来るんだということを認知する意味で一度見ておくとよさそう 数年前ではこういうのはFlash以外に考えられませんでしたが進化を感じられますね 関連エントリ jQueryでフリップするカッコいいメニュー作成のチュートリアル 多数のパネルをアニメーションでフリップさせるクールなUI実装サンプル
サムネイルがシャッフルされてクールなギャラリー実装「Photofy」:phpspot開発日誌
Photofy | Photo Swap Shuffle Plugin for jQuery サムネイルがシャッフルされてクールなギャラリー実装「Photofy」。 写真が沢山並んでおり、一定時間ごとにシャッフルされる写真ギャラリーです。固定位置よりも何がでるかわからない楽しさが演出できます ほとんどのギャラリーが順番が決まっていますが、これはランダムに並べられ、そのアニメーション効果もクールです サムネイルクリックで写真を説明と共に拡大が可能 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 動画ギャラリー用WordPressプラグイン10個 フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル 洗練されたUIのギャラリーサイト「Ui Parade」
タッチ可能でレスポンシブなスライダー実装「RoyalSlider」:phpspot開発日誌
RoyalSlider - Touch-enabled Image Gallery and Content Slider Plugin タッチ可能でレスポンシブなスライダー実装「RoyalSlider」。 スライダ内には動画やHTML等なんでも埋め込めOKで、タッチ対応＆レスポンシブでモバイル対応OK。スライダーのデザインが豊富なテンプレから色々と選べて、それぞれカッコいい物が実装できます。 あんまり見たことのないようなインタフェースのスライダーなんかもあり、それぞれカッコいい。有償＄１２となりますが、検討してもいいほどクオリティが良いです ラップトップを枠として写真を切り替えるAppleっぽいスライダーも良い感じ。 関連エントリ jQueryとCSS3でダイナミックに動くコンテンツスライダー エフェクトが色々選べるイメージスライダー実装jQueryプラグイン「Adaptor」 Apple
[JS]木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy
画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul
ACCAROUOSEL – 拡大する動きが面白いカルーセルタイプのスライドショー – creamu
ACCAROUOSELは、拡大する動きが面白いカルーセルタイプのスライドショーです。 ページングによるスライドと、画像クリックでセンターからぐいっと伸びる動きになっています。 ACCAROUOSEL
ラジオボタンをCSS3で装飾して作った画像ギャラリー
ラジオボタンを使った画像ギャラリーを作りましたので紹介してみます。かなり変わった使い方ですが、CSSの勉強にもなると思いますのでぜひ。 今回は古いブラウザ（IE７，８）でもそれなりに対応できるようにしましたので、そこそこ実用的だと思います。 別サーバーにサンプルを用意していますので動作確認していただければと思います。 HTML ではまず外部ファイルの読み込みから。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="js/selectivizr.js"></script> <
SWIPEVIEW – スマートフォンでスワイプできるギャラリーを実装できるJavaScript – creamu
SWIPEVIEWは、スマートフォンでスワイプできるギャラリーを実装できるJavaScriptです。 jQueryに依存していないようです。 SWIPEVIEW
新しい価値を与えてくれるjQueryプラグイン集「20 New jQuery Plugins Worth Taking a Look at」
TOP > WebDesign > 新しい価値を与えてくれるjQueryプラグイン集「20 New jQuery Plugins Worth Taking a Look at」 WEBを制作する上で、非常に便利なjQueryプラグイン。javascriptで実現できる様々な動作、機能を簡単に実装できます。今日紹介するのはjQueryプラグインの中でも、新しい価値を与えてくれるjQueryプラグイン集「20 New jQuery Plugins Worth Taking a Look at」です。 RSlider フリップして進むブックスライダーだったり、jQueryのみで画像を描画したり、映像を背景にしたフルスクリーンサイトなどなど、様々なjQueryプラグインがまとめられています。今日はその中から気になったものをピックアップして紹介したいと思います。 詳しくは以下 BookBlo
軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」:phpspot開発日誌
Swipe JS - a lightweight mobile web slider 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 <div><ul> でリストを定義して<div>をJSで初期化するだけでスワイプでページ送りができるスライダーが簡単実装できます jQueryに依存していないため、軽量。カスタマイズ項目も必要最低限となっているようです 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでモーダルダイアログを実現するプラグイン２０:phpspot開発日誌
サービス終了のお知らせ - NAVER まとめ
スマホでの閲覧にも最適化されたHTML5の画像ギャラリーを作成「Juicebox-Lite」NOT SUPPORTED
Fresco – レスポンシブに対応したlightbox – creamu