「お皿」を意識したレイアウトデザイン - Speaker Deck
Transcript ྫ͑͜ͷ͓ࡼʹιʔεΛΓ͚ΔͳΒ ʁ ͬͪ͜ΑΓ ͬͪ͜ͷํ͕όϥϯε͍͍ Ͱɺ ͓͠ࡼ͕ͳ͚Ε ͓͔͘͠ײ͡ͳ͍ ٯʹݴ͑ɺ ʮ͓ࡼ͕͋Δʯ ͓͔͛Ͱόϥϯε͕औΕΔ ࢴͷσβΠϯͷ ʮ͓ࡼʯ ʁ pomme ࢴʹͱͱ ֎͕͋Δ pomme ΣϒͷσβΠϯͷ ʮ͓ࡼʯ ʁ ϒϥβͷʁ Θͨ͜͠Ε ςʔϒϧͩͱࢥ͏ pomme ΣϒσβΠϯͰ ʮ͓ࡼʯ ͔Β࡞Δඞཁ͕͋Δ ྫ͑ɺ ͜Ε͕ ʮ͓ࡼʯ άϦ ο υΨΠ υ͓ࡼΛஔ͘ҹ pomme pomme ಛʹ ʮζϥ͠ʯ ͷσβΠϯͰɺ͓ࡼΛҙࣝ͢Δ ͓ࡼ͕ͳ͍ͱϥϯμϜʹฒ͚ͨͩ ͓ࡼ͕͋Δͱ ʮζϥ͠ʯ ͕Θ͔Δ None ର֯ʹ�͋Εʮ͓ࡼʯ࡞ΕΔ ʮܗ͕มΘΒͳ͍ͷʯ Ͱ͓ࡼΛ࡞Δ αΠΤϯε Ϧ ϯΰͷՊֶ ͦͷൿີʹഭΔ 2019.11.05
正しいテーマの作り方 これができたらテーマ制作の上級者！
WordCamp Kansai 2016 で使ったスライドです：D
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
css3のanimationで作る永久ループのスライドショー | パソコン倶楽部りんご
「Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。 とても美しい動作ですので、まずは動作を確認して下さい。 画像にマウスホーバーすると、スライドが止まる マウスホーバーで画像に対応するh1が現れる スライドの表示秒数を伝える工夫もされている マークアップをキチンと考える 最終的にCSSで動作させるのか、jQueryで動作させるのかに関わらず、まずはきちんとマークアップします。そうすると以下の利点があります。 スライドの中身が、クリックさせたいリンクの列挙だとすれば、SEOの効果も望めます。単に画像を動かすのと、見出しタグ付きの要素が動いているのとでは大違いです。 対象ブラウザに合わせて、実装方法を選択できます。例えば、古いIEなどでも動かしたければ、古いIEにだけIEの条件コメントで自作のjQueryを読み
The domain name DropTheBit.com is for sale | Undeveloped
Buyer Protection ProgramUndeveloped safeguards your purchase. You never have to worry! We protect every transaction through a careful escrow process, leading to 100% successful acquisitions since 2014. First, we secure the domain from its current owner. Then, we help you become the new owner. Finally, we only proceed with paying the seller out after you confirm the reception of the domain.
[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap
Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.customEvents.js"></script> <script src="/path/to/jquery.panelSnap.js"></script> </head> Step 2: HTML コンテンツは一つずつsection要素（変更可能）で並列に配置します。 スタイルシートは各コンテンツ自由にしてください。 <body> <section>コンテンツ：1</section> <section>コンテンツ：2</sect
Fotorama — Simple and Powerful Responsive jQuery Image Gallery
Set upJust copy and paste the snippets below to integrate Fotorama. 1. This goes to the <head> of your page: <!-- jQuery 1.8 or later, 33 KB --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Fotorama from CDNJS, 19 KB --> <link href="/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <script src="/ajax/libs/fotorama/4.6.4/fotorama.js"></scrip
Gallery CSS
Include gallery.css & gallery.theme.css <link rel="stylesheet" href="css/gallery.theme.css"> <link rel="stylesheet" href="css/gallery.min.css"> Mark up your gallery <div class="gallery items-3"> <div id="item-1" class="control-operator"></div> <div id="item-2" class="control-operator"></div> <div id="item-3" class="control-operator"></div> <figure class="item"> <h1>1</h1> </figure> <figure class="
jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法｜BLACKFLAG
以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますが やはり今後はサイト上に設置するスライドショー関連も レスポンシブに対応している必要が出てくることは必至なので 試しに作ってみたのを紹介してみます。 今回のレスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので まずは別枠表示で動作サンプルから。。 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り替えることができる形になっています。 （左右のNEXT／BACK透過ボタンで画像を切り替えることも可。） サンプルでは最大幅を「800px」最小幅を「320px」として ブラウザ幅によってスライドショー部分が拡大縮小します。
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
jQuery スライダーの中にスライダーが設置できるプラグイン【 jQuery slideinslide 】 | Stronghold Archive
どうもこんばんは。今回のTipsは【jQuery スライダーの中にスライダーが設置できるプラグイン jQuery slideinslide】です。今回のプラグインは自作です。機会は少ないですが何度かスライダーの中にスライダーを設置したいという場面がありました。これまでは都度スクリプトを書いていたのですが…ちょっと面倒だなぁとプラグイン化しました。この謎なプラグイン…自分用にとっておいてもいいのですが、存在自体忘れる可能性もあるので…備忘録としてメモしておきます。 DEMO & DOWNLOAD 更新情報 ・2013 3/8 水平方向へのスライド機能を追加。詳しくはOptionをご確認ください。上下左右のキーボートにも対応しております。DEMOはこちらから 実装方法 実装は至ってシンプルです。スライドの中にスライドの入るHTMLを用意し、プラグインを読み込みます。 読み込みファイル（jQue
Magic Leap
Magic Leap brings together industry-leading optics, scalable production, and AI capabilities for immersive AR experiences. A commitment to advancing the boundaries of AR has resulted in thousands of patents worldwide, encompassing critical components of AR technology, including projectors, eyepieces, waveguides, and manufacturing processes and related technologies. Crisp digital contentIndustry-le
Fotorama. Nice-looking javascript gallery
Account Suspended This Account Has Been Suspended
複数並べられたコンテンツをまとめてスライドさせるjQueryプラグイン・Grid Slide Plugin - かちびと.net
ちょっとうまい説明が思いつかなかった んですけど、複数並べられた画像など を同時にスライドさせるjQueryプラグイン。 省スペースに多くのコンテンツを表示 させる事が出来るのはちょっといいかも 知れません。 あんまり見かけないタイプのスライダーですね・・省スペースに沢山の情報を表示させたい、という時に使えそうな使わなそうな。たまに似たようなインターフェース見かけますね。 これらの8つのコンテンツ部分が同時にスライドします。オプションで数を減らしたり速度を変えたり。 デモ見たほうが早いですね。説明下手ですみません。 Demo js <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> </script> <script src="jquery.ea
[JS]設置も簡単、機能も豊富、キーボード操作でパネルをスライドする -FerroSlider
複数のパネルを縦・横のライン状、L字状、十字状などに配置し、スムーズなアニメーションでスライド表示するjQueryのプラグインを紹介します。 FerroSlider jQuery Plugin [ad#ad-2] FerroSliderの主な特徴 各パネルをラインやカラム、マトリックス状に配置が可能。 パネルのスライドはスムーズなアニメーション。 アニメーションのエフェクトはカスタマイズ可能。 アニメーション中は進行方向を表示。 各パネルはアスペクト比を維持してブラウザいっぱいに表示。 カスタマイズしたスクリプトをAJAXで実装可能。 コンテナの中にスライドするコンテンツの要約を設置。 キーボードの矢印キーで操作が可能。 クリックでも操作可能なナビゲーションも設置可能。 コンテンツをスルーできるリンクの設置も可能。 FerroSliderのデモ デモではデフォルトの状態をはじめ、さまざまな
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） デモページ ダウンロード↓ こんばんは、デザイナーのOです。 まずはデモをどうぞლ(╹◡╹ლ)。 先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。 これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。 この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・ ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！ Fullscreen background image slideshow with CSS3 これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景
[JS]スライドを縦横斜めのダイナミックなスクロールで表示するスクリプト -Ascensor.js
デモページ ページ中央の「Demo and how to use」をクリックします。 操作は、左上の「prev, next」、右下の「ナビゲーション」、キーボードの「矢印キー」です。 [ad#ad-2] Ascensorを実際に使用しているサイトも紹介します。 Reverse Buro Ascensorの使い方 外部ファイル 「jquery.js」と「scrollTo.js」、そして当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo.js" type="text/javascript"></script> <script src="js/jquery.ascensor.js" type="text/java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一陽会
https://winkttd.es/en/
jQueryとCSS3を使った円形の画像がフリップするスライドショー – creamu