1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. HTML+CSSだけで実装された走る馬のアニメーションがすごい!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Alexa(アレクサ)を使って出前館で注文すると10000円キャッシュバック!

Alexa(アレクサ)を使って出前館で注文すると10000円キャッシュバック!

現在、全国2万店以上の店舗から簡単に注文・デリバリーできる総合サイトの出前館では、アマゾンのAlexa(アレクサ)における出前館のAlexaスキルを使って注文した場合、初回...

Kindle Unlimitedが3ヶ月249円で電子書籍が読み放題のキャンペーンを実施中!

Kindle Unlimitedが3ヶ月249円で電子書籍が読み放題のキャンペーンを実施中!

現在AmazonではKindle Unlimited(通常月額980円)が3ヶ月249円で利用可能になるキャンペーンを実施しています。Kindle UnlimitedはAmazonが提供する電子書籍読み放題サービ...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

Googleが11.11特別価格セールを実施中!Google HomeやChromecastなどが対象!

Googleが11.11特別価格セールを実施中!Google HomeやChromecastなどが対象!

現在、Googleが11.11だけの特別価格セールを実施しています。Google Pixel 4 / 4 XL を購入すると、Google Nest Hubをプレゼントしたり、Google Nest Hubが4,400円引き、Go...

SONY NEXシリーズのダミーバッテリーUSB電源ケーブルを買ってみた!

SONY NEXシリーズのダミーバッテリーUSB電源ケーブルを買ってみた!

私はブログでレビュー記事を書く時に写真はSONY NEX-5Nという今ではだいぶ古いカメラを使っているのですが、最近の悩みはバッテリーがすぐに無くなってしまい、製品の写真...

ダイソーの防滴ワイヤレスBluetoothスピーカー「BTS-032A」を買ったみた!

ダイソーの防滴ワイヤレスBluetoothスピーカー「BTS-032A」を買ったみた!

今回紹介するのは100円ショップのダイソーで販売されているワイヤレスBluetoothスピーカーの防滴仕様です。スマホとなどとBluetoothで連携して、ワイヤレスで音楽などを再...

DearMob iPhoneマネージャーでiTunesを使わず音楽を転送しよう!

DearMob iPhoneマネージャーでiTunesを使わず音楽を転送しよう!

前回はDearMob iPhoneマネージャーでiTunesを使わない簡単に写真を転送する方法について紹介しました。今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単...

Auslogics Windows SlimmerでWinSxSフォルダを小さくしよう!

Auslogics Windows SlimmerでWinSxSフォルダを小さくしよう!

今回はAuslogics Windows Slimmerを使ってWindowsの無駄なファイルを整理してSSDやHDDの容量を増やす方法を紹介したいと思います。Auslogics Windows SlimmerにはWinSxSフ...

合計900ドルのソフトウェアをプレゼント!WonderFoxのハロウィンキャンペーン!

合計900ドルのソフトウェアをプレゼント!WonderFoxのハロウィンキャンペーン!

WonderFoxでは、合計900ドル分となる18個のソフトウェアのライセンスコードをプレゼントするWonderFoxハロウィンキャンペーンを実施しています。このキャンペーンは2部に分...

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...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。