HTMLやCSS、JSのコードとその実行結果を共有できるサービスのCodePenは、いわばフロントエンドエンジニアの遊び場です。中にはどういったコードで動いているか見当もつかないようなものもあります。
今回はCodePenで公開されているアニメーションの中でも、思わず見入ってしまうような美しいアニメーションを10点ピックアップしてご紹介します。画像の下のCodePen埋め込み部分で「Run Pen」で実際に動かして見て下さい。
[under construction]
See the Pen [under construction] by Lucas Bebber (@lbebber) on CodePen.
Cloudy Spiral CSS animation
See the Pen Cloudy Spiral CSS animation by Hakim El Hattab (@hakimel) on CodePen.
Pixel Particles
See the Pen Pixel Particles by Szenia Zadvornykh (@zadvorsky) on CodePen.
Canvas Light Explosion
See the Pen Canvas Light Explosion by Jack Rugile (@jackrugile) on CodePen.
The wriggle sphere
See the Pen The wriggle sphere by yoichi kobayashi (@ykob) on CodePen.
Three.js CanvasRenderer Experiment
See the Pen Three.js CanvasRenderer Experiment by Sean Dempsey (@seanseansean) on CodePen.
THREE Image Transition
See the Pen THREE Image Transition by Szenia Zadvornykh (@zadvorsky) on CodePen.
3D Rings Rotation
See the Pen 3D Rings Rotation by Nicolas Daniel (@nicolasdnl) on CodePen.
Mesmerizing
See the Pen Mesmerizing by xposedbones (@xposedbones) on CodePen.
SVG Low PolyLion: Animated Polygons
See the Pen SVG Low PolyLion: Animated Polygons by GRAY GHOST (@grayghostvisuals) on CodePen.
