スタイルシートで実装するパララックススクロール | コリス
パララックス=スクリプトと思っていたのですが、スクリプト無しでも実装できるんですね。 今後、実装方法がますます進化しそうです。 実装方法を簡単に紹介します。 HTML デモのHTMLをシンプルにするとこんな感じになります。 各スライドはdivで配置し、それぞれclassにslideを、idで個別の名称を付与します。 <div id="title" class="slide header"> <h1>Pure CSS Parallax</h1> </div> <div id="slide1" class="slide"> <div class="title"> <h1>Slide 1</h1> <p>パラグラフ パラグラフ</p> </div> </div> <div id="slide2" class="slide"> <div class="title"> <h1>Slide 2</h1
3Dちっくにカッコよく全画面スライドさせられるJavaScript「Kontext」
twitter facebook hatena google pocket MACでプレゼンをしている人を見ているとその動きに思わず自分もMACを欲しくなる人いませんか。 ちょっと待って、購入ボタンを押す前に、Windowsでもかっこ良く全画面をスライドさせられるJavaScript「hakimel/kontext」を試してみませんか。 スライド間の切り替えをかっこよく3Dぽくしてくれます。 sponsors 使用方法 hakimel/kontextからファイル一式をダウンロードし、JavaScriptとCSSを下記のように記述します。 <link rel="stylesheet" href="kontext.css"> <link rel="stylesheet" href="demo.css"> <script type="text/javascript" src="kontext.j
jQuery スライダーの中にスライダーが設置できるプラグイン【 jQuery slideinslide 】 | Stronghold Archive
どうもこんばんは。今回のTipsは【jQuery スライダーの中にスライダーが設置できるプラグイン jQuery slideinslide】です。今回のプラグインは自作です。機会は少ないですが何度かスライダーの中にスライダーを設置したいという場面がありました。これまでは都度スクリプトを書いていたのですが…ちょっと面倒だなぁとプラグイン化しました。この謎なプラグイン…自分用にとっておいてもいいのですが、存在自体忘れる可能性もあるので…備忘録としてメモしておきます。 DEMO & DOWNLOAD 更新情報 ・2013 3/8 水平方向へのスライド機能を追加。詳しくはOptionをご確認ください。上下左右のキーボートにも対応しております。DEMOはこちらから 実装方法 実装は至ってシンプルです。スライドの中にスライドの入るHTMLを用意し、プラグインを読み込みます。 読み込みファイル（jQue
スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」
twitter facebook hatena google pocket スマホで画像やコンテンツをスワイプさせて見せられると多くのコンテンツを遷移も少なくて良いかもしれません。 jQueryプラグインのslideToucherなら水平、垂直の両方向にスワイプさせられ便利です。 sponsors 使用方法 Yuripetusko/slideToucher ? GitHubからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="slideToucher.js"></script> <script type="text/javascript"> $("document").ready(function(){ $
横幅いっぱいのコンテンツスライダーつくりました。 - Toro_Unit
jQueryで横幅いっぱいのコンテンツスライダー、jQuery Full-width Sliderというプラグインをつくりました。 トップページのメインビジュアルとかで使えると思います。というか昔の案件で使ったものをブラッシュアップしたものです。画像以外も使えます。 jquery.fullwidthslider.1.0 デモ:http://demo.torounit.com/fullwidthslider/ 2012-02-09:デモのCSSを修正。IE対応。 デモの写真はFree.Stockerのを使わせて頂いています。良い写真いっぱいありますよねここ。 使い方 js [js] $(function(){ $(".slide").fullWidthSlider({ width:640, height:480 }); }) [/js] html [html] <div class="sli
Fullscreen Pageflip Layout | Codrops
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to c
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
かっこいいスライドの作り方 #yapcasia 2012編 - As a Futurist...
さて、今回スライド結構がんばって作ってみました。どうよ、これかっこ良くない？？？ https://speakerdeck.com/riywo/ops-tool-made-by-perl-beginner-number-yapcasia-2012 どうやって作ったのか、大したことはないんですが軽く共有しておきます。 と言っても、ぶっちゃけ以下のエントリを丸パクリして Keynote でポチポチ作っただけですが。。。 Slide Design for Developers フォント Yanone – Free Font: Yanone Kaffeesatz こちらを使わせて頂きました。とてもかっこいいです。 配色 Color Trends + Palettes :: COLOURlovers こちらから自分の好みのパターンを幾つか探して、Keynote のパレットに拾っておいてあとはそれをポチ
[JS]普通のかっこいいスライドから、予想の斜め上いく3Dのアニメーションにも対応したコンテンツスライダー -Adaptor | コリス
シンプルなインターフェイスに、スライド時にさまざまなエフェクトが用意されたコンテンツスライダーを実装するjQueryのプラグインを紹介します。 下記キャプチャのエフェクトは3Dで、くるっぐい～ん、って感じです。 Adaptor, a jQuery 3D content slider Adaptorのデモ Adaptorの使い方 Adaptorのデモ コンテンツスライダーの対応ブラウザは、IE6を含むすべてのモダンブラウザです。 3DのエフェクトはFirefox, Chrome, Safariのみで、他のブラウザで表示した際はフェードのエフェクトになります。 スライドのエフェクト Adaptorの使い方 実装は3ステップです。 Step1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//code.jquery.com/jqu
ダイナミックなアニメーションがかっこいい、フルスクリーン対応のスライダーを実装するチュートリアル
パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーを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
[CSS]スタイルシートでここまでできる！Responsiveデザイン対応のスライダー -Responsive CSS3 Slider
JavaScript無し(*1)で、スタイルシートで実装するResponsiveデザイン対応のコンテンツスライダーを紹介します。 *1 スライダーの基本機能ではJavaScriptを使用していませんが、iOSに対応させるために使用。 Responsive CSS3 Slider Without Javascript [ad#ad-2] デモ 実装 デモ デモはCSS3に対応した下記のブラウザでご覧ください。 ベスト Firefox フルサポート Chrome, Firefox, Opera, Safari ※各ブラウザの最新版 一部非対応 IE9 ※スライダーの機能は対応しますが、アニメーションに未対応。 デモでは左右のアローと下のボタンで各パネルがアニメーションでスライドします。 ※ウインドウサイズを変更するのが面倒な人用に、上部にサイズ切り替えボタンがあります。 デモ：幅800pxで表
[JS]シンプルで軽量だけど、充分な機能を備えたコンテンツスライダーのスクリプト -Casual Slider
Casual Slider [ad#ad-2] Casual Sliderの特徴 Casual Sliderのデモ Casual Sliderの使い方 Casual Sliderの特徴 Casual Sliderは実装が簡単で、シンプルながら充分な機能を備えたコンテンツスライダーです。 4KBと超軽量のスライダー タイマー機能付き あらゆるHTMLエレメントを配置可能 全てのメジャーブラウザをサポート カスタム ナビゲーション セットアップが簡単 アニメーションの種類は多数 デフォルトのテーマも用意 Casual Sliderのデモ デモもシンプルですが、Casual Sliderの使い勝手が分かると思います。 各パネルに半透明のキャプションも表示できます。 Casual Sliderの使い方 HTML 各パネルはリスト要素で実装します。 <div id="slider"> <div cl
[JS]広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js
テーマ左上から、base、sunny、le-frog、ui-darkness 対応ブラウザは、下記の通りです。 iPadも対応というのはいいですね。 Chrome/Chromium Safari Firefox IE Opera iPad impress.jsからの移行 jmpress.jsは「impress.js」のjQuery版で、impress.jsの特徴全てと更に多くの機能を備えています。 impress.jsから移行するには、jquery.jsを加え、スクリプトをimpress.jsからjmress.jsにし、スクリプトの呼び出しを「$(selector).jmpress(); 」に変更します。 impressのデモをjmpress.jsで動かしたデモ jmpress.jsの使い方 HTML ルートとなるdiv要素に「id="jmpress"」をつけ、各コンテンツをdiv要素で配
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら