2019/6/25に行われたJavaコミュ@福岡での登壇資料です
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessible Before-After Slider Beer Slider -GitHub Beer Sliderの特徴 Beer Sliderのデモ Beer Sliderの使い方 Beer Sliderの特徴 Beer Sliderは2枚の画像を使用して、ビフォーとアフターを表示できるスライダーです。 単体で動作するシンプルなスクリプト vanilla JavaScriptで記述されたスライダー。他スクリプトへの依存はありません。 jQuery, Zeptoに
WEB上では限定的な使い方にはなってしまいますが、フィルターのON/OFF・背景のモノクロとカラー、化粧の有り無しなど、全く同じもので異なる状況を比べるというときに便利なのが、今回紹介するスワイプでBefore/Afterを表現するスライダー「Beer Slider」です。 上記のように左右で写真が表示されて、スワイプまたはスライドで写真の表示領域を切り替えることが可能です。 詳しくは以下 ソースは比較的シンプルで、普段からWEB制作をしたことがある方であれば、問題なく実装できるレベルだと思います。実際のデモやコードのサンプルは「Beer Slider Responsive & Accessible Before-After Slider – Demo – PEPSized」からご覧いただけます。 ソース自体は「GitHub – pehaa/beerslider: A vanilla JS
TOP > WebDesign > シルエットから切り替わるダイナミックなスライドショー「Silhouette zoom slideshow」 スマートフォンやタブレット端末が普及する中で多くの人がWebサイトを閲覧するようになりました。数多く存在するサイトの中でより目を惹くためにもメインビジュアルの表現は重要になってくるのではないでしょうか。そんな中今回は、シルエットから切り替わるダイナミックなスライドショー「Silhouette zoom slideshow」を紹介したいと思います。 インパクトのあるスライドショーで印象に残るサイトが構築できるアイテムです。 詳しくは以下 人物のシルエットから次の写真へと切り替わるスライドショーはダイナミックで、とても印象に残る表現です。色鮮やかな写真にくっきりと浮かぶシルエットがなんとも美しいですね。 数え切れないほどのWebサイトが存在する
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/kssdezuo-rupatanraiburari 【アイコンを200こ描いた振り返り!】アイコンから知るデザインのヒントby @awayuki http://www.slideshare.net/awayukin/awayuki-pmd01-share ビジュアルデザインまでのデザインワーク by @yokotak0527 http://www.slideshare.net/YokotaKenji/ss-26460108
プレゼンテーションをもっとカジュアルに。 Stobo はプレゼンテーションの作成から配信までサポートするフレームワークです。 カジュアルに質の高いプレゼンテーションを。Stobo がお手伝いします。 思考はスライドでは分けることができません。 まずは頭の中にあるアイデアを、Markdown(マークダウン)形式でメモするようにそのままアウトプットしましょう。 Markdown が分からなくてもエディタ上部のツールボタンが入力をサポートします。 アウトプットした思考を整理していきましょう。 水平線「***」で分割するとスライドがプレビューエリアに表示されます。スライドの入れ替えもテキストを切り貼りするだけ。 GitHub 風のコードのシンタックス・ハイライト、絵文字、画像のアップロードにも対応しています。 再生ボタンを押してプレゼン開始。 プレゼンのURLを共有しておけばPCやスマートフォンで
言語処理学会第20回年次大会(2014/3)のチュートリアル講義資料です。 - 要旨 - 文法圧縮とは,入力テキストをよりコンパクトな文脈自由文法(CFG)に変換する圧縮法の総称である. 文法圧縮の強みは圧縮テキストを展開すること無く,検索等のテキスト処理を効率よく行える点にある. 驚くべきことにその処理速度は,元テキスト上での同じ処理を理論的に,時には実際にも凌駕する. また近年,ウェブアーカイブやログ,ゲノム配列等の大規模実データを高効率に圧縮できることで注目を集めている. しかしながら,文法圧縮についての初学者向けの解説資料はまだまだ少ない. そこで本チュートリアルでは,文法圧縮の歴史的背景から最新動向までを幅広く紹介する. 具体的には文法変換アルゴリズム,圧縮テキスト上での文字列パターン検索,文法圧縮に基づく省メモリデータ構造等の解説を行う.Read less
※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます! この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip(3.5MB) Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass
CyberAgent: How We Deployed Production Kubernetes Clusters on OpenStack witho...VirtualTech Japan Inc.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く