みなさん、The Most Hearted of 2018ってご存知ですか？

Web上でHTML/CSS/JSのコーディングができて、リアルタイムで動作確認できるプレイグラウンドWebサービスのひとつである「CodePen」の世界大会🏆

CodePenは、この手のWebサービスの中では、jsfiddleやjsbinよりも最近では一番人気なんです！
※こちらを参照。

オロのエンジニアもこのThe Most Hearted of 2018で、世界の優秀なエンジニアたちと肩を並べTOP100の中に2作品もランクインしています！ぱちぱちぱち👏👏✨✨

そこで、今回はランクインを果たしたオロエンジニアである中矢に作品の推しPOINTを聞きました！
実は、ランクインした 2 作品はどちらも JavaScript を使わずに CSS のみでアニメーションを実装しています。中矢は、CSS だけでどこまでできるの？というギモンを追いかけています。

ではまず「Shooting Star」という作品です。こちらは46位にランクイン！

では、中矢さん！この作品のPOINTを教えてください！

『複数の animation / keyframes のタイミング調整がポイントです。1つの流れ星を紐解くと、グラデーションの width で光の筋を、バツ印の scale で光の瞬きを、座標の translate で移動を別々にシミュレートし、組み合わせて「あたかも流れ星」に見せています。全体の回転や、青白い drop-shadow も隠し味。個人的には、流れ星が最後に点になってスッと消えるところがお気に入りです。ちなみに、流れ星は全部で 20 個です、数えてみてください。』

そしてもうひとつランクインした作品は「Infinite Steps」です★

こちらも中矢さんにPOINTを教えてもらいましょう！

『これは無限ループ系作品のひとつ、不気味に登り続ける無限回廊です。大理石のような反射処理や、光源を考慮した影の移動など、素材感と実体感の作り込みに拘りました。そして、額縁のように見える範囲を制限してアート作品に仕立てました。実はこの額縁、意外とコツが必要なんですよ。html 要素は、overflow: hidden; の中では 3D 変形できません。では、3D 変形しつつ一定範囲外の要素を非表示にするためには...。不気味でしょ？』

いかがでしたでしょうか😊
ちなみに、中矢さんは2017年にも31位にランクインしています！←こちら
※他の作品はコチラからもみれますよ～！

オロのエンジニアはこのように技術力の高さも強みです！
弊社にご興味お持ちの方、ぜひ「話を聞きに行きたい」ボタンをぽちっと、お待ちしております★