Modern Slide In - Sequence.js Theme
Release Date August 9th 2015Latest Update August 9th 2015Theme Version2.0.0 Sequence.js Version What is the purpose of the Recommended Sequence.js Version?The recommended Sequence.js version this theme is packaged with. Other versions may work but may not have been fully tested.2.0.0 License GPLv3RepoGitHub Tags grayhorizontallightminimalproductsslider FeaturesOn mobile devices, the product image
【jQuery】超軽量レスポンシブ・スライダー［Juicy Slider］の使い方
今日は軽快に動作するレスポンシブ対応スライダー［Juicy Slider］を紹介します。 この［Juicy Slider］では、ブラウザの CSS3 のサポートに依存している他のjQueryスライダーとは異なり、画像のアスペクト比を JavaScript を使って計算することで、古いブラウザとの互換性が高まり、より多くのデバイスで同じように表示されるようになっています。 最新のブラウザはもちろん、IE8、IE9、IE10 にも対応していますね。 また画像が切り替わるときのエフェクトの一部を jQuery UI に依存させることで、本体の［Juicy Slider］の容量を軽く抑えています。 以下［Juicy Slider］の設置方法です。 必要なファイルをダウンロード 使用するファイル一式は公式サイトからダウンロードしてきます。 Juicy Slider : http://redslim.
ダイナミックなアニメーションがかっこいい、フルスクリーン対応のスライダーを実装するチュートリアル
パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーをjQueryとCSS3で実装するチュートリアルを紹介します。 実装 実装方法はポイントを説明します。 HTML 各パネルは「sl-slide」のclassを持ったdiv要素で実装されており、カラーは「sl-slide-dark」で管理されています。 <section id="sl-slider" class="sl-slider"> <div class="sl-slide"> <div class="sl-deco" data-icon="6"></div> <h2>A bene placito</h2> <blockquote> <p>You have just dined, and however scrupulously the slaughterhouse is conceale
WOWSlider : jQuery画像のスライダー＆ギャラリー
画像スライダーは、イメージスライダーであり、どれでもはほぼ同じでしょ？速くは言えない。 Webコンポーネントを選択するには主な要件は何ですか？ 互換性、容易なセットアップ、高性能、そして素敵な外観。 WOWSliderなら、すべてのニーズを対応し、完璧なHTMLスライダーを作成します： すべてのブラウザ、デバイス、WEB標準の広い互換性 WOWSliderは、外観とすべてのモバイルデバイス上で完璧に動作する子度ができ、IE6などのモダンやレガシーなブラウザ、標準に合うし、有効な、セマンティックマークアップで、徹底的に最適化されたスクリプトが付いています。 高速、軽量、誤りのない WOWSliderは、軽くて（6キロバイトのgzip圧縮された）、高速ロードし、ハードウェアアクセラレーションアニメーションを利用している。これは、正常に作動し、数百万ページ（そうです、何百万）でテストされ、私たち
レスポンシブデザイン対応のlightbox系プラグイン＋コンテンツスライダー系プラグイン | バニデザノート
・シンプルイメージlightbox ・ギャラリーlightbox ・videoやmapのポップアップ ・Ajaxポップアップ など、使い勝手がよい基本機能が揃っています。 →Unslider 関連記事 きっと初心者でもわかる、HTMLの書き方の考え方。 2014/12/14 読んでもらえる、ファンになってもらえる、ブログの書き方とデザイン。 2014/11/20 web制作で気疲れしないようにする方法を考えてみました。 2014/10/17 最近気になったウェブ制作に関するキーワードを振り返ってみる 2013/06/30 レスポンシブデザイン対応のlightbox系プラグイン＋コンテンツスライダー系プラグイン 2013/05/31 自分でできる！Facebookページの活用方法 2013/04/11 Webで発信するすべてのWEBビギナーさんへ。突然犯罪や裁判に巻き込まれないようにするため
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQuery サムネイル連動型の高性能なスライダー【Lof JSliderNews】 – リッチなスライダーの中では一番のお気に入り | Stronghold Archive
jQuery サムネイル連動型の高性能なスライダー【Lof JSliderNews】 – リッチなスライダーの中では一番のお気に入り どうもこんばんは。今回のtipsは【jQuery サムネイルと連動する高性能なスライダー】です。つい最近までリッチなスライダーはFlashでカバーしていましたがこのプラグインを使用すればjQueryで簡単に実装できます。個人的にはシンプルなスライダーにはbxslider、リッチなスライダーにはLofJSliderNews、レスポンシブデザインに使うスライダーはOrbit、それらでカバーできない場合には自作というように使い分けています。 Lof JSliderNews > Download > Demo 実装方法は若干手間ですが、使いこなせばいろいろな所で活用できます。 読み込むファイル <link rel="stylesheet" type="text/cs
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」:phpspot開発日誌
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」 2013年05月02日- PhotoCradle.js. An elegant wrap of your photo collection. 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」。 次へ、前へでどんな画像が表示されるのか気になりますが、予めポップアップで表示してくれる親切なスライダーを実装できます。 更に、画像下に表示されているサムネイルにカーソルを合わせると、他の前後の画像がうっすら表示されます。 何度もボタンを押して切り替えるよりもカーソルを合わせるとより多くの画像が一覧できるというのはなかなか便利そう 関連エントリ マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maski
Agile Carousel - Javascript Slideshow - Image Carousel
Usage Add a div to your page in the location where you would like to add your slideshow. Invoke the plugin as shown below. Provide data in JSON format as shown below. See the "Settings" section at the bottom of the page for available settings. See the "Single Page Examples" (above) for more implementation examples. Invoke the Plugin <link rel="stylesheet" href="agile_carousel.css"> <script src="ht
Juicebox - The Ultimate HTML5 Image Gallery
See Juicebox in Action Check out the demos below to see Juicebox-Lite and Juicebox-Pro at work. Juicebox-Lite Demos Juicebox-Lite provides great out-of-the-box functionality for your image galleries. The following examples show some of the ways that you can use the customization options available. Juicebox-Pro Demos Juicebox-Pro allows you access to many extra features and advanced customization o
Slicebox – A fresh 3D image slider with graceful fallback | Codrops
Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don’t support the new properties. With the CSS 3D Transforms we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create t
PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」:phpspot開発日誌
Juicebox - The Ultimate HTML5 Image Gallery PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」。 HTML5を使い、現在の主要な端末の殆どで動くスライドショーが実装出来ます。HTML5を使っているといえど、IE8でも問題なく動作。 なんかスライドショー入れてみたけどスマホで動かないよ、という残念にも対処可能。 ページ内にそのまま埋め込む他、フルスクリーンでも楽しめます。ナビゲーションも分かりやすい。 スライドショーを実装するものは多いですが、特定デバイスで動かないといった物は今後、論外ということになっていってしまうかも。 ありとあらゆるこうしたライブラリやプログラムがレスポンシブになっていく流れは避けられませんね 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル ページ全体に広がる
レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」:phpspot開発日誌
ResponsiveSlides.js Responsive jQuery slideshow レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 画面サイズが変わっても問題なく動作するレスポンシブなスライドショー実装が可能です サイズは１KBぐらいでマークアップも超シンプルに記述できます ブラウザサイズを変更しても問題なし 今後はこうしたライブラリもレスポンシブ対応必須となっていきそうですね 関連エントリ ３ステップではじめるレスポンシブWEBデザイン 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 ファイルアップロード関連のjQueryプラグイン１０
[CSS]スタイルシートだけで実装されたスライドショー -Pure CSS Slideshow
CSS3を使って実装された、スライドのアニメーションや各パネルのダイレクトリンク機能を備えたスライドショーを紹介します。 Pure CSS Slideshow [ad#ad-2] スタイルシートだけで実装されたスライドショーはアニメーションでスライドするので、CSS3 transitionに対応したChrome, Safariでお楽しみください。 Firefox 4などの非対応ブラウザでは、アニメーション無しでスライドされます。 また、各パネルへのリンクは#リンクに対応しており、個別のパネルにリンクすることも可能です。 1ページ目を表示 IE7でのキャプチャ HTML スライドする各パネルはdiv要素で実装されています。 <div id="a1"> <div id="a2"> <div id="a3"> <!-- Top Navigation. Ya, tables are evil. -
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」:phpspot開発日誌
divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 2011年02月10日- jShowOff: a jQuery Content Rotator Plugin by Erik Kallevig divを並べた後、たった１行でオシャレなスライダーが実装できるjQueryプラグイン「jShowOff」 次のような、なんともオシャレなスライダーが簡単に実装できてしまいます。 実際のコードは次のようにとてもシンプル。 <div id="features"> <div><p>This is a slide!</p></div> <div><a href="http://google.com"><img src="//www.google.com/intl/en_ALL/images/logo.gif" alt="Google Logo" /><
AviaSlider - a unique jQuery Image slideshow plugin!
Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Sa
Picasaの写真をスライドショーで表示「Google AJAX Feed API」
Google AJAX Feed APIでPicasa Webの写真をスライドショーで表示してみた。 参考サイト： Google AJAX Feed API「Slide Show Programming Guide」 DEMO： Picasa Webの写真をスライドショーで表示 サンプルソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
