1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. HTML+CSSだけで実装された走る馬のアニメーションがすごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

今回紹介するのは全世界で1,000万以上のユーザーがいるBlu-rayコピーソフトであるLeawo Blu-rayコピーです。Leawo Blu-rayコピーを使用すると、簡単にBlu-rayディスクのバ...

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

現在LEAWO製品が最大50%オフになる新年応援スペシャルキャンペーンを実施しています。キャンペーン期間は2020年2月3日(水)までとなっています。また、SNSでLeawoを応援して...

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

3,4ヶ月前のことになりますが、MOTOROLA Moto Zのバッテリーが死んでバッテリーを交換する手順の記事を書きました。当時は充電ケーブルを抜くと5分もせずに落ちるという状...

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

先日の記事で199円のミニ三脚についてのレビューにおいて、三脚上部の角度などが変更できればもっと自由度が上がって使いやすくなるということを書きました。そこで今回は...

無料でもらえるGoogle Nest miniが届いたのでレビュー!

無料でもらえるGoogle Nest miniが届いたのでレビュー!

先日の記事のGoogle Nest Miniが無料で手に入る!YouTube PremiumとGoogle Play Music会員が対象!でも紹介したGoogle Nest miniが届いたのでレビューを書きたいと思います...

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

Bluetoothでスマホ連動可能なBeyeahスマート体組成計&体重計が792円の超激安で販売中です。スマホとBluetoothで連動させることで、体重や体水分量・BMI・筋肉量・推定骨量...

Fire TV StickでIEEE802.11acが認識されない問題!

Fire TV StickでIEEE802.11acが認識されない問題!

先日のレビューも書いたFire TV Stickですが、実は一つ気になることがあったので同じようなことで困っている人の役に立てばと思い記事で残しておきたいと思います。それはF...

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

現在BOOK★WALKERでは、1月10日よりTVアニメが放映開始となる「とある科学の超電磁砲T」を記念して、とあるシリーズが最大80%オフのキャンペーンを実施しています。とある科...

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

今回は完全防水IPX7に対応したBluetoothスピーカーであるTribit StormBox bluetoothスピーカー BTS30を紹介したいと思います。お風呂場などで使用可能なIPX7に対応しており...

ダイソーで買えるライトニングとMicroUSBが両方使えるケーブルがすごい!

ダイソーで買えるライトニングとMicroUSBが両方使えるケーブルがすごい!

先日ダイソーですごいケーブルを見つけたので紹介したいと思います。それはなんとライトニングケーブルとMicroUSBケーブルが一本で両方使えるという製品です。先頭の端子を...

NetaGear RSS News

Now Loading

Article

HTML+CSSだけで実装された走る馬のアニメーションがすごい!

Webデザイン > html+CSS+javascript 
CSS3_Only_House_001.png

今回紹介するのはHTML+CSSだけで走る馬のアニメーションを実装されているClip Clop Clippity Clop [CSS Only]という作品です。CodePenに実物がアップロードされているのですが、黒い馬が颯爽と走っている風景がHTMLとCSSだけで表現されています。CSS3アニメーションを用いることでJavascriptなどは使用していません。

このようにHTML+CSSだけで絵を描くというのは、一部のWEBデザイナーやコーダーでは行われているもので、私も過去にはCSS3ドラえもんやぐぬぬインデックスなど絵をHTM+CSSで描くということやっていた1人です。

Clip Clop Clippity Clop [CSS Only]




Clip Clop Clippity Clop [CSS Only]の実物です。黒い馬がさっそうと走っているアニメーションが描かれています。なにげに馬が走ると砂埃が上がるなど芸が細かい仕様になっています。とてもHTMLとCSSだけで作られているとは思えないクオリティでびっくりします。

CSS3_Only_House_002.png
Clip Clop Clippity Clop [CSS Only]のページで見てもらえば分かるのですが、JS(javascript)の欄には何も書かれておらず、HTMLとCSSだけで作られていることが分かります。どのように作られているのか興味のある人はソースコードを読むとどのように作っているのかが分かるのでおすすめです。

CSS3_Only_House_001.png
画面をクリックするとアニメーションがスローモーションになると共に、要素にBorderが設定されるようになっています。これによりCSSで作られているパーツごとの動きが非常に分かりやすく表現されています。これを見るだけでもこの作品のすごさが伝わってきますね。

製作者


CSS3_Only_House_003.png

この作品の製作者はSteve Gardnerさんで、Codepenでは別のCSS3作品も公開しています。非常にユニークでおもしろいので興味のある人はぜひこちらもご覧になるとおもしろいかもしれません。HTML+CSSだけでアニメーションをしている作品以外にも、javascriptを繰り合わせたゲームなども公開されていて非常におもしろいです。





過去に描いたCSSドラえもんなど


doraemon_css3_002.png



こちらはだいぶ過去の話になりますが、私もHTML+CSSだけで絵を描くというのをやっていました。もう10年近く前のことになるのですが、ブラウザのCSS3対応度を示すことができるCSS3ドラえもんというものを作り、その際には色々なネットニュースに取り上げていただいて結構話題になりました。非常に懐かしいです。



それ以外にも、ぐぬぬインデックスというのも描きました。こちらはマウスを乗っけると髪の毛がアニメーションするようにしていました。これらの作品は、まだCSS3が正式に勧告されておらず、ベンダープレフィックスの段階でしたが、その中でCSS3で表現できることを知りたくて色々と検証していた時期だったので、だいぶ稚拙な記述で無茶なことをやっていました。今ならたぶんもっと綺麗に描けるくらいには成長しているので、時間があれば書き直したいですね。


今回の個人的感想




今回はHTML+CSSだけで実装された走る馬のアニメーションがすごいというCSS作品の紹介でした。CSSもCSS3の登場からかなりの年数が経ち、ブラウザの対応も成熟しているので、昔に比べてかなり色々な表現ができるようになっていますね。私がCSS3ドラえもんを描いていた当時はベンダープレフィックスを付けないとCSS3は動かない時代でしたが、今は一般的なCSS3はどのブラウザでも普通に動くようになっており、良い時代になったと感じています。

ブラウザのCSS3対応度については、過去にはIEが他にブラウザに全く及ばないせいでWEB業界全体の足を引っ張っており、WEB業界の邪魔者と呼ばれていました。しかし、そのIEは今やMicrosoft公式から死刑宣告がなされ滅びゆくブラウザとなりました。IEの代わりに開発していたブラウザのMicrosoft EdgeもレンダリングエンジンはChromeと同じchromiumを採用するようになり、ほんとに時代は変わりましたね。



近年のWeb業界の足を引っ張っているのはSafariですね。次世代画像規格WebPはPNGとJPEGの良いところ取りしたような素晴らしい圧縮率と性能を秘めており、Web上の画像は全てWebPに置き換えることで転送量を大幅に減らすことが可能となっています。しかしながらChrome、Microsoft Edge、Firefoxなどのモダンブラウザが対応しているのに、Safariだけが対応しないせいでWebPが容易に使えない環境となっており、これはWEBの発展においてものすごい足を引っ張ってきたIEと同じことを繰り返しています。Safariなんて無視しろという意見もあるかもしれませんが、日本のiPhone利用者の多さを鑑みると無視できるレベルではないのが残念です。

だいぶ話がそれてしまいましたが、今回のCSSだけで実装された走る馬は素晴らしい作品でした。自分もまた時間ができたらCSS3で何か描きたいですね。

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...