Soumettre la recherche
Mettre en ligne
Html5fun@東京 Bootstrapにアニメーションを付けよう
•
5 j'aime
•
1,463 vues
Masayuki Abe
Suivre
HTML5fun東京(2015年3月5日)に使用したスライドです。 BootstrapのTipsと、アニメーションを付けるためのライブラリの紹介
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 41
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
javascriptの基礎
javascriptの基礎
Masayuki Abe
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
Daisuke Koshimizu
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
20160124_GPL勉強会
20160124_GPL勉強会
rie05
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
Erina Takei
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
Erina Takei
私の考える Startup Geeks
私の考える Startup Geeks
Kiminari Homma
Recommandé
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
javascriptの基礎
javascriptの基礎
Masayuki Abe
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
SVGの基本&活用法。SVGのメリットと事例を基礎から学ぶ。
Daisuke Koshimizu
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
20160124_GPL勉強会
20160124_GPL勉強会
rie05
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
Erina Takei
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
Erina Takei
私の考える Startup Geeks
私の考える Startup Geeks
Kiminari Homma
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方
Wataru Sakashita
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
あなたの言葉で伝えるWebアクセシビリティ
あなたの言葉で伝えるWebアクセシビリティ
Kobayashi Daisuke
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
プロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよ
Yoshiki Kojima
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Drupal7 Blockでサイト構築しよう@Drupal cafe
Drupal7 Blockでサイト構築しよう@Drupal cafe
Masayuki Abe
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
Hidekazu Ishikawa
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
Makiko M
Present simple
Present simple
teacherhector
My Life Project
My Life Project
yessicavd
Contenu connexe
Tendances
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
Yuki Okada
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
Akiko Kurono
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
Akiko Kurono
チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方
Wataru Sakashita
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
あなたの言葉で伝えるWebアクセシビリティ
あなたの言葉で伝えるWebアクセシビリティ
Kobayashi Daisuke
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
プロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよ
Yoshiki Kojima
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
Haiji Haiiro
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Drupal7 Blockでサイト構築しよう@Drupal cafe
Drupal7 Blockでサイト構築しよう@Drupal cafe
Masayuki Abe
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
Hidekazu Ishikawa
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
masaki sukeda
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
Makiko M
Tendances
(20)
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
みんなが働きたい場所で働ける「リモート開発チーム」を目指してやっていること - Cybozu Days 2017 大阪
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
デザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
チームラボ スマホアプリチームの面白い仕事の作り方
チームラボ スマホアプリチームの面白い仕事の作り方
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
あなたの言葉で伝えるWebアクセシビリティ
あなたの言葉で伝えるWebアクセシビリティ
Sketchで変わるワークフロー
Sketchで変わるワークフロー
プロトタイピングでしあわせになろうよ
プロトタイピングでしあわせになろうよ
ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Drupal7 Blockでサイト構築しよう@Drupal cafe
Drupal7 Blockでサイト構築しよう@Drupal cafe
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
テーマ・プラグイン開発の光と闇 #wctokyo
テーマ・プラグイン開発の光と闇 #wctokyo
現役Web ディレクターに聞く Webディレクターという仕事
現役Web ディレクターに聞く Webディレクターという仕事
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
En vedette
Present simple
Present simple
teacherhector
My Life Project
My Life Project
yessicavd
6 11-13 collecting russia ucb
6 11-13 collecting russia ucb
lpendse
Unit13 organisational structure
Unit13 organisational structure
connor-sherwin
презентация элективного курса по русскому языку
презентация элективного курса по русскому языку
loksal
App presentation
App presentation
connor-sherwin
Hist 141 california and the civil war
Hist 141 california and the civil war
flip7rider
Job roles
Job roles
connor-sherwin
Hist 141 modern latin america
Hist 141 modern latin america
flip7rider
Heroku shdh
Heroku shdh
Sandra_Daniela
Abstract
Abstract
Ankit Agrawal
Prohibitions of Riba in Qura'n and Ahadith
Prohibitions of Riba in Qura'n and Ahadith
Masoud A. Dar
Cordovaコトハジメ( Html5fun×senchUG )
Cordovaコトハジメ( Html5fun×senchUG )
Masayuki Abe
関デジセミナー20130710
関デジセミナー20130710
Masayuki Abe
Best Gift Presentation Fmcg 2012
Best Gift Presentation Fmcg 2012
Igor Kovanov
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Masayuki Abe
Shim Graphics
Shim Graphics
ShimGraphics
Cockatoo
Cockatoo
Hiroaki Kubota
ком предл идеал часы с логотипом
ком предл идеал часы с логотипом
Андрей Самсонов
My life project
My life project
yessicavd
En vedette
(20)
Present simple
Present simple
My Life Project
My Life Project
6 11-13 collecting russia ucb
6 11-13 collecting russia ucb
Unit13 organisational structure
Unit13 organisational structure
презентация элективного курса по русскому языку
презентация элективного курса по русскому языку
App presentation
App presentation
Hist 141 california and the civil war
Hist 141 california and the civil war
Job roles
Job roles
Hist 141 modern latin america
Hist 141 modern latin america
Heroku shdh
Heroku shdh
Abstract
Abstract
Prohibitions of Riba in Qura'n and Ahadith
Prohibitions of Riba in Qura'n and Ahadith
Cordovaコトハジメ( Html5fun×senchUG )
Cordovaコトハジメ( Html5fun×senchUG )
関デジセミナー20130710
関デジセミナー20130710
Best Gift Presentation Fmcg 2012
Best Gift Presentation Fmcg 2012
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Shim Graphics
Shim Graphics
Cockatoo
Cockatoo
ком предл идеал часы с логотипом
ком предл идеал часы с логотипом
My life project
My life project
Similaire à Html5fun@東京 Bootstrapにアニメーションを付けよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
Masayuki Abe
Google Material DesignをPolymerで表現しよう
Google Material DesignをPolymerで表現しよう
Masayuki Abe
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
Yuta Matsumura
UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選
Yuki Okada
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
Yu Morita
Global Solution Unit
Global Solution Unit
Jun Saito
connpassの戦略決定〜チームで取り組んだ価値のデザイン
connpassの戦略決定〜チームで取り組んだ価値のデザイン
Haruo Sato
香川支部キックオフ 香川支部について
香川支部キックオフ 香川支部について
yohei iwakura
社会のコードを、書き換えよう~エンジニア起点のNew Normalな働き方~
社会のコードを、書き換えよう~エンジニア起点のNew Normalな働き方~
Hitachi, Ltd. OSS Solution Center.
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
Yuki Okada
「Webディレクションの教科書のご紹介」@田口真行さん主催 webディレクター向けセミナーイベント
「Webディレクションの教科書のご紹介」@田口真行さん主催 webディレクター向けセミナーイベント
Rie Fujii
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
Yuichi Saotome
Developers summit-2017-day2-room d-chatops-with-b2b
Developers summit-2017-day2-room d-chatops-with-b2b
Koichi Sasaki
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
kintoneアプリをjavascriptでいじってみよう
kintoneアプリをjavascriptでいじってみよう
Kyouhei Kitagawa
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
Webデザインにおける「見えづらい」こだわりハック
Webデザインにおける「見えづらい」こだわりハック
Flavor Bright
2 3-1 east-hokkaido
2 3-1 east-hokkaido
CSISi
Apple sapの提携のその後
Apple sapの提携のその後
智洋 大野
Similaire à Html5fun@東京 Bootstrapにアニメーションを付けよう
(20)
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
Google Material DesignをPolymerで表現しよう
Google Material DesignをPolymerで表現しよう
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
UXを損ねる静的コンテンツ配信アンチパターン7選
UXを損ねる静的コンテンツ配信アンチパターン7選
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
Global Solution Unit
Global Solution Unit
connpassの戦略決定〜チームで取り組んだ価値のデザイン
connpassの戦略決定〜チームで取り組んだ価値のデザイン
香川支部キックオフ 香川支部について
香川支部キックオフ 香川支部について
社会のコードを、書き換えよう~エンジニア起点のNew Normalな働き方~
社会のコードを、書き換えよう~エンジニア起点のNew Normalな働き方~
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
最高のリモート開発を実現するために取り組んでいること - Cybozu Tech Conference 2017
「Webディレクションの教科書のご紹介」@田口真行さん主催 webディレクター向けセミナーイベント
「Webディレクションの教科書のご紹介」@田口真行さん主催 webディレクター向けセミナーイベント
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
IoTやデジタル活用で価値を生み出すための開発手法 ~BtoBでも、ChatOps等のモダンな開発・運用ができる!~
Developers summit-2017-day2-room d-chatops-with-b2b
Developers summit-2017-day2-room d-chatops-with-b2b
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
kintoneアプリをjavascriptでいじってみよう
kintoneアプリをjavascriptでいじってみよう
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Webデザインにおける「見えづらい」こだわりハック
Webデザインにおける「見えづらい」こだわりハック
2 3-1 east-hokkaido
2 3-1 east-hokkaido
Apple sapの提携のその後
Apple sapの提携のその後
Plus de Masayuki Abe
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
Masayuki Abe
JavaScriptライフを10倍楽しくする方法-HTML5fun-
JavaScriptライフを10倍楽しくする方法-HTML5fun-
Masayuki Abe
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西
Masayuki Abe
Html5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap Tips
Masayuki Abe
Word pressセミナー東京[マイナビ主催] 阿部20131216
Word pressセミナー東京[マイナビ主催] 阿部20131216
Masayuki Abe
WordBench ISHIKAWA
WordBench ISHIKAWA
Masayuki Abe
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Masayuki Abe
サーバーの初歩的な話セミナー@大阪20120901
サーバーの初歩的な話セミナー@大阪20120901
Masayuki Abe
Firebug×smart release20120904
Firebug×smart release20120904
Masayuki Abe
ちゃんとWeb会議
ちゃんとWeb会議
Masayuki Abe
Plus de Masayuki Abe
(11)
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
JavaScriptライフを10倍楽しくする方法-HTML5fun-
JavaScriptライフを10倍楽しくする方法-HTML5fun-
最低限知っておきたい Webセキュリティーについて@MT関西
最低限知っておきたい Webセキュリティーについて@MT関西
Html5 fun@Tokyo Bootstrap Tips
Html5 fun@Tokyo Bootstrap Tips
Word pressセミナー東京[マイナビ主催] 阿部20131216
Word pressセミナー東京[マイナビ主催] 阿部20131216
WordBench ISHIKAWA
WordBench ISHIKAWA
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
Dropbox APIなどを使って制作を効率化しよう@関西オープンフォーラム
サーバーの初歩的な話セミナー@大阪20120901
サーバーの初歩的な話セミナー@大阪20120901
Firebug×smart release20120904
Firebug×smart release20120904
ちゃんとWeb会議
ちゃんとWeb会議
Dernier
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Dernier
(9)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Html5fun@東京 Bootstrapにアニメーションを付けよう
1.
HTML5fun@東京 ワンランク上の 1カラムレイアウトデザイン を作ろう KDDIウェブコミュニケーションズ 阿部 正幸
2.
3.
おかげさまで 1周年
4.
5.
6.
7.
8.
9.
1年間の活動地域 東京 名古屋 岡山 北海道 金沢 宮崎 神戸 福井 仙台 そして東京に戻ってきました☆
10.
ありがとうございました - 来期も全国で開催します -
11.
● ACE01 /
SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ●日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち、7月31日生まれ 阿部 正幸(あべ まさゆき) ディレクタープログラマー プロマネ Evangelist
12.
Venture Since 1998 Web Service Hosting
13.
Web制作を 『超ラク』 にする
14.
15.
直近こんな記事書きました 企業からイベント協賛費をもらうため の提案書と御作法 Facebookの「いいね」を押さずに 記事を読む方法 CMS選定に困ったWeb担当者様。 失敗しないCMSの選び方
16.
本日は『ワンカラムレイアウト』 を作る際の 『BootstrapのTips』と 『心地よい動き』を付けるためのライブラリ を紹介します
17.
18.
19.
20.
21.
全体的な特徴 ● 特徴的な写真素材 - プロのカメラマンに依頼しよう
- ● スクロールに合わせてアニメーション - Parallax、Scroll Spy、Waypoint など - ● ゴーストボタンや、アニメーションボタン - animation.css など -
22.
ベーステンプレート
23.
本日のサンプル 「bootstrap 1カラムレイアウト」でググってね
24.
パララックスとは 二地点での観測地点の位置の違いにより、対象点が見える方向が 異なること、または、その角度差。 もっぱら、「視差により距離を測定する」、「視差があることによる問題」 という2つの観点から扱われる。 情報:wikipedia
25.
パララックスとは 二地点での観測地点の位置の違いにより、対象点が見える方向が 異なること、または、その角度差。パララックス (英:parallax)ともいう。 もっぱら、「視差により距離を測定する」、「視差があることによる問題」 という2つの観点から扱われる。 情報:wikipedia 意味わかりません 実際に見てみましょう
26.
パララックス <div id="home" class="home"> <div
class="text-top"> <h1>Hello World</h1> <h3>Bootstrap-based one column layout</h3> </div> </div>
27.
#home { background: url(img.jpg)
no-repeat center center fixed; display: table; position: relative; -webkit-background-size: cover; /*crome、Fafari */ -moz-background-size: cover; /* Firefox */ -o-background-size: cover; /* Opera */ background-size: cover; } パララックス
28.
Scroll Spy スクロールに 合わせて、 アクティブが 変わる
29.
● Scrollspyの起動 <script type="text/javascript"> $('body').scrollspy({
target: 'navbar' }) </script> ● Scrollspyを監視するターゲット <body data-spy="scroll data-target="#navbar data-offset="100 > ● ナビゲーション (bootstrapデフォ) <div id="navbar"> <ul class="nav navbar-nav"> <li><a href="#home">Home</a></li>
30.
Animate.css
31.
<h1 class="animated shake"> Shake
animation </h1> Animate.css Animate.cssサイトより動作(shake)を確認し アニメーションをかけたい箇所に 「animated + 動作」を指定するだけ
32.
Waypoint <script src= noframework.waypoints.min.js"></script> -
スクロール位置を検出する - ① ダウンロードしたライブラリを読み込む
33.
var waypoint =
new Waypoint({ element: document.getElementById('wp1'), handler: function() { console.log( wp1ポイントに来ました '); } }) Waypoint ② <hoge id= wp1 >を監視し、wp1までスク ロールしたら、function(){ }が実行される
34.
Waypoints + Animate.css var
waypoint = new Waypoint({ element: document.getElementById('wp1'), handler: function() { this.element.className = 'animated shake ; } }) ③ wp1までスクロールしたら、wp1のクラス名 を「animated shake」に変更し、 アニメーションを付与
35.
animatedModal.js
36.
animatedModal.js オシャレなモーダルウィンドウ
37.
<a id="demo01" href="#animatedModal">DEMO01</a> <div
id="animatedModal"> <div class="close-animatedModal"> CLOSE MODAL </div> <div class="modal-content"> <!̶モーダルコンテンツ--> </div> </div> ● モーダルコンポーネント animatedModal.js
38.
<script src= jquery/1.11.1/jquery.min.js"></script> <script
src= animatedModal.min.js"></script> ● プラグインの読み込み <script> $("#demo01").animatedModal(); </script> ● ベーシックイニシャライズ animatedModal.js
39.
animatedModal.js + Animate.CSS $("#demo01").animatedModal({ animatedIn:'bounceInUp', animatedOut:'bounceOut', color:
'#39BEB9', animationDuration: '1s', }); 「animatedIn」起動時のアニメーション 「animatedOut」終了時のアニメーション
40.
まとめ 1カラムレイアウトのフレームは「booststrap」 や、「Foundation」などのフレームワークが便利 グローバルナビゲーションのスクロールに合わせた アクティブは「Scroll Spy」が便利。 その他アニメーションは「Waypoint」でスクロール 位置を検出し「Animate.css」などで動きを 付けると便利。
41.
ご清聴ありがとうございました ID:chiyo.abe 阿部 正幸
Télécharger maintenant