Loading video...

Video Failed to Load

Go Home

HTMLとCSSのみで作る、羽ばたく蝶々。 JS未使用ですが、立体的に動きます。

clockmaker's profile picture

池田 泰延

30,700 subscribers

112,756 views • 1 year ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

形状変化で出現する今どきなメニューUI。 HTMLとCSSと、少しのJSで。 HTMLのpopover属性と、 CSSのアンカーポジショニングで作っています。
0:24

形状変化で出現する今どきなメニューUI。 HTMLとCSSと、少しのJSで。 HTMLのpopover属性と、 CSSのアンカーポジショニングで作っています。

池田 泰延

51,860 views • 7 months ago

HTML・CSSで作るメニューUI。 ヒットエリアを▷に拡張することで、マウス操作での使い勝手が良くなります。
0:39

HTML・CSSで作るメニューUI。 ヒットエリアを▷に拡張することで、マウス操作での使い勝手が良くなります。

池田 泰延

79,843 views • 1 month ago

Illustratorで立体的なフィルムを作成します。 プレゼントボックスのリボンなどもよくこの方法で立体的に作成したりします。 3Dはアイディア次第で様々な使い方が表現ができるので面白いですね！
0:59

Illustratorで立体的なフィルムを作成します。 プレゼントボックスのリボンなどもよくこの方法で立体的に作成したりします。 3Dはアイディア次第で様々な使い方が表現ができるので面白いですね！

コネクリ

237,610 views • 3 years ago

アラフォーおじさん、フルトラに対応する。 色々やりたいことに使えるだろ、きっと。ということで勢いでmocopiPROを導入。せっかくなので信濃で動いてみました。 フルトラで動いてみるとコンストレイントのミスが目立ちますね。構造の見直しが必要そうですが、いい感じで動きますね #mocopi
0:23

アラフォーおじさん、フルトラに対応する。 色々やりたいことに使えるだろ、きっと。ということで勢いでmocopiPROを導入。せっかくなので信濃で動いてみました。 フルトラで動いてみるとコンストレイントのミスが目立ちますね。構造の見直しが必要そうですが、いい感じで動きますね #mocopi

0から始めるblender生活

35,232 views • 6 months ago

tourbox elite plusを使ってイラスト制作しました🖊 自分の好みにショートカットを設定できるので使いこなせば作業効率超アップ！ ショートカットが使えないと体感1.5倍はイラスト制作に時間がかかります。 TourBoxNEOから今回使用のTourBoxElitePlusまで結構長く使っていますが、なくてはならないアイテムです。 Bluetoothでも使えるので、タブレットに繋いでデスク以外でも気軽に使えるのがとても便利です。 ごちゃつきがちなPCの周りもすっきり～カラーもかわいくて馴染みやすい！ 片手デバイスに悩んでいる方に是非使っていただきたいです！#PR
0:29

tourbox elite plusを使ってイラスト制作しました🖊 自分の好みにショートカットを設定できるので使いこなせば作業効率超アップ！ ショートカットが使えないと体感1.5倍はイラスト制作に時間がかかります。 TourBoxNEOから今回使用のTourBoxElitePlusまで結構長く使っていますが、なくてはならないアイテムです。 Bluetoothでも使えるので、タブレットに繋いでデスク以外でも気軽に使えるのがとても便利です。 ごちゃつきがちなPCの周りもすっきり～カラーもかわいくて馴染みやすい！ 片手デバイスに悩んでいる方に是非使っていただきたいです！#PR

ごとー

159,267 views • 2 months ago

デモを作るのに気合を入れすぎてしまってかなり複雑になってしまい、すべてを細かく解説することはできないんですが、実現するための道具と考え方をしっかり解説したいと思います。 デモはこちら↓ アニメーション、インタラクションともにCSSのみで動いています。JSは使っていません。
0:21

デモを作るのに気合を入れすぎてしまってかなり複雑になってしまい、すべてを細かく解説することはできないんですが、実現するための道具と考え方をしっかり解説したいと思います。 デモはこちら↓ アニメーション、インタラクションともにCSSのみで動いています。JSは使っていません。

Takumi HASEGAWA (unshift Inc.)

78,220 views • 1 year ago

昨日は、FDJ用優勝することが出来ました！🏆 ちなみに、FDJで使ってるタイヤは、シバタイヤTW300です！（レギュレーションにより） ※ちなみに、BS勢は71RZ、YH勢は09ネオバです！ TW300は、街乗り用のタイヤですが、作動温度がなく、寒い時も、ウエットでも使えます！と、ずーっと言ってましたが、それが証明できてよかったです！ 決勝戦の動画（ウエット）と使ってるタイヤはこちらです！
1:00

昨日は、FDJ用優勝することが出来ました！🏆 ちなみに、FDJで使ってるタイヤは、シバタイヤTW300です！（レギュレーションにより） ※ちなみに、BS勢は71RZ、YH勢は09ネオバです！ TW300は、街乗り用のタイヤですが、作動温度がなく、寒い時も、ウエットでも使えます！と、ずーっと言ってましたが、それが証明できてよかったです！ 決勝戦の動画（ウエット）と使ってるタイヤはこちらです！

⚡しばちゃん⚡

167,811 views • 3 months ago

MetaQuest3にはハンドトラッキング機能があり、自分の手を認識できます。なので、自分の指で髪の毛を触ったり、体をマッサージ😆することも可能です。仮想空間の物体も掴むことができるので、動画のように電動マッサージ機も使えます。ようやく未来が来てくれました(*´ω｀*)
0:58

MetaQuest3にはハンドトラッキング機能があり、自分の手を認識できます。なので、自分の指で髪の毛を触ったり、体をマッサージ😆することも可能です。仮想空間の物体も掴むことができるので、動画のように電動マッサージ機も使えます。ようやく未来が来てくれました(*´ω｀*)

Kazuo3D（自粛中）

10,787 views • 2 years ago

自分のよく使ってるFermataアドオンと、顔芸ができる面白いHushアドオンとの比較をしました。 使用機器: Meta Quest Pro 自分が使った感想を言うとかなり動きに差がありました。 可愛さメインのFermataさんのアドオンとは違い、Hushさんのアドオンは可愛さをメインではなく、顔の動きの自由をメインとした動きです。 特に眉とまぶたのトラッキングで、Hushさんのがよく動く印象です。 それにより、より表情豊かな表現が可能になります。 さらに、動きを工夫することにより、顔にちょっとしたエフェクトが入ります。(口をしかめると悲しんだり、下の歯だけだし、口を伸ばすことでクヨクヨしたりなど） また、Fermataさんのは顔の動きに連動して耳やしっぽが動きますが、 Hushさんのアドオンはそれに加え羽なども動きます。 ですが、fermataさんのアドオンの動きは正直自分にとってかなり好きです。 ちょっとした歯を出せたり、ちいさい口を開けたりなど、顔芸メインではない動きができるのが強いです。 何より、笑顔がとても好きですね！ 目の見開き具合なども両方とも違う動きをしています。 Hushさんのアドオンを使ってみてすごく不思議な体験ができ、かなり面白いアドオンでした。 アニメーションやblenderをうまく活用したら、もっといろんな性能を発揮できる気がします、、、 #VRChat #FaceTracking #Chocolat3D
1:34

自分のよく使ってるFermataアドオンと、顔芸ができる面白いHushアドオンとの比較をしました。 使用機器: Meta Quest Pro 自分が使った感想を言うとかなり動きに差がありました。 可愛さメインのFermataさんのアドオンとは違い、Hushさんのアドオンは可愛さをメインではなく、顔の動きの自由をメインとした動きです。 特に眉とまぶたのトラッキングで、Hushさんのがよく動く印象です。 それにより、より表情豊かな表現が可能になります。 さらに、動きを工夫することにより、顔にちょっとしたエフェクトが入ります。(口をしかめると悲しんだり、下の歯だけだし、口を伸ばすことでクヨクヨしたりなど） また、Fermataさんのは顔の動きに連動して耳やしっぽが動きますが、 Hushさんのアドオンはそれに加え羽なども動きます。 ですが、fermataさんのアドオンの動きは正直自分にとってかなり好きです。 ちょっとした歯を出せたり、ちいさい口を開けたりなど、顔芸メインではない動きができるのが強いです。 何より、笑顔がとても好きですね！ 目の見開き具合なども両方とも違う動きをしています。 Hushさんのアドオンを使ってみてすごく不思議な体験ができ、かなり面白いアドオンでした。 アニメーションやblenderをうまく活用したら、もっといろんな性能を発揮できる気がします、、、 #VRChat #FaceTracking #Chocolat3D

ふぉにあ！

113,054 views • 1 year ago

「Gemini 3.1 Pro」で動く図解を作成してみました。 【手順】 ①高速モードで図解のHTML作成 ②Proに切り替えSVGアニメーションを作成 これで、資料に活用できる表現の幅が広がります↓
0:47

「Gemini 3.1 Pro」で動く図解を作成してみました。 【手順】 ①高速モードで図解のHTML作成 ②Proに切り替えSVGアニメーションを作成 これで、資料に活用できる表現の幅が広がります↓

木内翔大＠SHIFT AI代表「日本をAI先進国に」𝕏

22,719 views • 5 months ago

｢ガラスはゆっくり磨く」 Final Lap白石です。 ガラスの研磨動画です。 以前にも書きましたが、ガラスの研磨ではオービタルサンダーを使用したり、ポリッシャーを使用したり、手磨きでも作業はできますが、弊社ではオービタルサンダーをメインに使っています。 ガラスの油膜を除去するとコンパウンドがガラスに綺麗に貼り付きますが、磨きが足りないとまだ弾きが出てしまいます。 みなさん結構早く動かしている動画を拝見しますが、実はゆっくり動かした方が研磨が早く終わります。 と言うのも、コンパウンドが研磨としての効果が出るには多少の時間がかかります。 そのため、ゆっくり動かした方がその効果が発揮されてそれほど体力も使わずに研磨ができます。 私の腕のスピードを見ていただければゆっくりの方がすぐに貼り付いているのがわかると思います。 こう言う作業って焦りたくなる気持ちが先行して、手が自然と早く動き出してしまいます。それでもダメだと今度は力を入れ始めます。 そうなると作業としては悪循環になりますので、落ち着いてゆっくり作業すると1番早い作業になります。 油膜や鱗の状態によって色々なスピードがありますが、とりあえず心の中で｢じっくり」と意識していると良いかと思います。 ぜひやってみてください。 #finallap #finallapbodycoatingstudio
1:49

｢ガラスはゆっくり磨く」 Final Lap白石です。 ガラスの研磨動画です。 以前にも書きましたが、ガラスの研磨ではオービタルサンダーを使用したり、ポリッシャーを使用したり、手磨きでも作業はできますが、弊社ではオービタルサンダーをメインに使っています。 ガラスの油膜を除去するとコンパウンドがガラスに綺麗に貼り付きますが、磨きが足りないとまだ弾きが出てしまいます。 みなさん結構早く動かしている動画を拝見しますが、実はゆっくり動かした方が研磨が早く終わります。 と言うのも、コンパウンドが研磨としての効果が出るには多少の時間がかかります。 そのため、ゆっくり動かした方がその効果が発揮されてそれほど体力も使わずに研磨ができます。 私の腕のスピードを見ていただければゆっくりの方がすぐに貼り付いているのがわかると思います。 こう言う作業って焦りたくなる気持ちが先行して、手が自然と早く動き出してしまいます。それでもダメだと今度は力を入れ始めます。 そうなると作業としては悪循環になりますので、落ち着いてゆっくり作業すると1番早い作業になります。 油膜や鱗の状態によって色々なスピードがありますが、とりあえず心の中で｢じっくり」と意識していると良いかと思います。 ぜひやってみてください。 #finallap #finallapbodycoatingstudio

Final Lap Body Coating Studio

236,239 views • 10 months ago

AIに動きをつけてもらうと、 動くのに「なんか安っぽい」で止まる。 CSSアニメーション130種を、 動く実物とコードで一覧にしました。 たとえば、オーロラメッシュ、グリッチ文字。 スクロール駆動リビール、3Dカルーセル。 各項目に「AI」タブがあります。 HTML、CSS、対応ブラウザ、描画コスト、 reduced-motion（動きを控える設定） への対応まで、1回のコピーで AIへそのまま渡せます。 「安っぽい」の正体は、 派手さ不足ではありません。 軽さと配慮の指定漏れです。 使ってみたい人は コメントしてください。 DMでURLをお送りします。
0:39

AIに動きをつけてもらうと、 動くのに「なんか安っぽい」で止まる。 CSSアニメーション130種を、 動く実物とコードで一覧にしました。 たとえば、オーロラメッシュ、グリッチ文字。 スクロール駆動リビール、3Dカルーセル。 各項目に「AI」タブがあります。 HTML、CSS、対応ブラウザ、描画コスト、 reduced-motion（動きを控える設定） への対応まで、1回のコピーで AIへそのまま渡せます。 「安っぽい」の正体は、 派手さ不足ではありません。 軽さと配慮の指定漏れです。 使ってみたい人は コメントしてください。 DMでURLをお送りします。

KAWAI

39,742 views • 22 days ago

お披露目ありがとうございました！ 固定ツイートにするので色々載せます！ ▼YouTube▼ ▼tiktok▼ FA・切り抜き「#鴉の羽画 」 ※サムネ等で使用させていただく可能性があります。
0:49

お披露目ありがとうございました！ 固定ツイートにするので色々載せます！ ▼YouTube▼ ▼tiktok▼ FA・切り抜き「#鴉の羽画 」 ※サムネ等で使用させていただく可能性があります。

鴉羽(からすば)

69,215 views • 1 year ago

棒があればできるメニューです。体幹周りの動き、肋骨周りの動きが出ると、走りやすさ、足のあげやすさが変わります。今の時代、トレーニングなどで体幹周りの動きが出づらくなってるためこのようなメニューは必須になってくると思います。
1:09

棒があればできるメニューです。体幹周りの動き、肋骨周りの動きが出ると、走りやすさ、足のあげやすさが変わります。今の時代、トレーニングなどで体幹周りの動きが出づらくなってるためこのようなメニューは必須になってくると思います。

松原翔　怪我をしない身体で最高のパフォーマンスを。

34,949 views • 9 months ago

【デスクトップ勢に朗報！】 VRChat+限定だったカメラトラッキングが全ユーザーで使用可能になりました🎉 デスクトップ勢でも少し動けるようになるので試してみてください✨ 設定の「トラッキングとIK」の項目から有効にすることで使用できます！
0:21

【デスクトップ勢に朗報！】 VRChat+限定だったカメラトラッキングが全ユーザーで使用可能になりました🎉 デスクトップ勢でも少し動けるようになるので試してみてください✨ 設定の「トラッキングとIK」の項目から有効にすることで使用できます！

ぶいなび

651,858 views • 1 year ago

身体能力の高い人専用の着ぐるみも作りたいとは思っているのですよね。視界や動きを妨げないパフォーマンスを100パーセント発揮出来るそう言う着ぐるみ作れたら凄く魅力的なキャラクターになると思うのです。 動きが魅力的な人の動画を見るとよく作ってあげたいとは思うのです。
0:32

身体能力の高い人専用の着ぐるみも作りたいとは思っているのですよね。視界や動きを妨げないパフォーマンスを100パーセント発揮出来るそう言う着ぐるみ作れたら凄く魅力的なキャラクターになると思うのです。 動きが魅力的な人の動画を見るとよく作ってあげたいとは思うのです。

こにししのぶ💴

71,116 views • 1 year ago

Substance Painter機能紹介①：ペンツール 講座の方でも使用していますが、サブスタンスペインターでテクスチャを描くときペンツールの「Filled path」を使用しています！ 連続でクリックして囲ったところに色が付きますが、これをマスクとして使います。ブラシで塗ってもできますがペンツールだと微調整しやすいのが利点です。 またダブルクリックで「角」と「曲線」に切り替えができるので連続でダブルクリックして、素早く図形を作成できます！
0:55

Substance Painter機能紹介①：ペンツール 講座の方でも使用していますが、サブスタンスペインターでテクスチャを描くときペンツールの「Filled path」を使用しています！ 連続でクリックして囲ったところに色が付きますが、これをマスクとして使います。ブラシで塗ってもできますがペンツールだと微調整しやすいのが利点です。 またダブルクリックで「角」と「曲線」に切り替えができるので連続でダブルクリックして、素早く図形を作成できます！

コルドロン3D

28,202 views • 7 months ago

10/28発売「できるイラストで学ぶ 入社1年目からのHTML&CSSとWebデザイン」の見本誌が届いたので、中身の動画をパラパラ動画にしてみました。 図解や実装Before→Afterキャプチャを沢山使い、見た目でも分かりやすくなっています！ Amazonで予約受付中です⤵️
0:45

10/28発売「できるイラストで学ぶ 入社1年目からのHTML&CSSとWebデザイン」の見本誌が届いたので、中身の動画をパラパラ動画にしてみました。 図解や実装Before→Afterキャプチャを沢山使い、見た目でも分かりやすくなっています！ Amazonで予約受付中です⤵️

こばやす🍟Webデザイナー｜HTML＆CSS本出版

90,155 views • 11 months ago