audio jack_Jack Rugile的最爱CodePen演示

audio jack

One of my favorite CodePen wizards is Jack Rugile. When I see pens like this, this, or this, I want to retire to my color books -- I am not as worthy of this guy. But what does he admire? Let's find out!

我最喜欢的CodePen向导之一是Jack Rugile。 当我看到像这样 ， 这样或这样的笔时，我想退休我的彩色书了-我不值得这个人。 但是他佩服什么呢？ 让我们找出答案！

CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!

CodePen是代码和设计灵感的惊人来源。 用户创建的演示每天都让我震惊。 就像您在下面看到的那样，我对移动的事物具有亲和力。 很难缩小我的收藏夹，但是在这里！

VelocityJS (VelocityJS)

(由Oleg Solomka) ((by Oleg Solomka))

This pen showcases the power of Velocity.js, a JavaScript animation engine. The animation concepts and timing are executed so well, all while maintaining a playful feel. Oleg never skimps on the details and polish in his pens.

这支笔展示了JavaScript动画引擎Velocity.js的强大功能。 动画概念和定时执行得很好，同时又保持了有趣的感觉。 奥列格(Oleg)从不ski琐细节，也不用在笔上擦亮。

演示地址

Temple(3D，纯CSS，动画) (Temple (3D, pure CSS, animated))

(由Ana Tudor撰写) ((by Ana Tudor))

Ana is a highly advanced creature existing on a separate plane than the rest of us. This particular pen has always been my favorite of hers. It's a recreation of this GIF using only CSS. Absolutely beautiful.

安娜是一种高度先进的生物，与我们其他人相比存在于不同的飞机上。 这支特别的笔一直是她的最爱。 这是仅使用CSS的GIF的重现。 简直美极了。

演示地址

复合的波涛汹涌的大海 (Rough Seas re-creation for compo)

(Jason Brown) ((by Jason Brown))

This is another one of my favorite recreations of an animated GIF with code. This one is based on this GIF. Jason nails the details of the original with this pen.

这是我最喜欢的动画GIF代码娱乐活动之一。 这是基于此GIF的 。 杰森用这支笔钉了原件的细节。

I particularly enjoy these recreations because it lets me see behind the curtain to how the original artist may have gone about creating their work.

我特别喜欢这些娱乐活动，因为它使我得以了解幕后这位原始艺术家可能如何创作自己的作品。

演示地址

呼吸 (Breathe)

(蒙巴萨) ((by Mombasa))

This pen might be the most relaxing demo I've ever seen. The gentle animation and soothing color scheme complement each other well. Try clicking and dragging to adjust the 3D view of the shapes to see it from a different perspective.

这支笔可能是我见过的最轻松的演示。 柔和的动画和柔和的配色方案相得益彰。 尝试单击并拖动以调整形状的3D视图，以从其他角度查看它。

演示地址

贝塞尔·辛 (Bezier Sim)

(蒂姆·霍尔曼(Tim Holman)) ((by Tim Holman))

Tim reveals the mathematical magic behind bezier curves here. I appreciate demos that can illustrate more complicated concepts, and this one does it perfectly. It's a heck of a lot fun to play with too.

蒂姆在这里揭示了贝塞尔曲线背后的数学魔术。 我欣赏演示可以说明更复杂概念的演示，并且该演示可以完美完成。 玩起来也很有趣。

演示地址

磁性 (Magnetic)

(由Hakim El Hattab撰写) ((by Hakim El Hattab))

Hakim's interactive demos and games have always inspired me. This one gives me the illusion of crafting my own solar system, complete with planets and asteroids. Being able to configure and tweak a system and watch it play out is so much fun.

Hakim的交互式演示和游戏一直启发着我。 这给了我一种制造自己的太阳系的幻想，其中包括行星和小行星。 能够配置和调整系统并观看系统播放非常有趣。

演示地址

等离子面 (Plasmatic Isosurface)

(贾斯汀·温德勒) ((by Justin Windle))

This demo is just so visually appealing, I had to include it. The colors, blending, blobbing of shapes, and scan lines all come together to create a visual party in your browser.

这个演示在视觉上是如此吸引人，我不得不将其包括在内。 颜色，混合，形状的斑点和扫描线都组合在一起，在浏览器中创建了一个视觉派对。

演示地址

菌 (Bacteria)

(作者：格雷戈尔·迪瓦雷特) ((by Grégoire Divaret))

Grégoire crushed it with the organic motion and aesthetic of this pen. It looks alive, it creeps me out, it's disgusting, and I absolutely love it.

格雷戈尔(Grégoire)用这支笔的自然动作和美感将其粉碎。 它看起来还活着，它使我震惊，令人恶心，我绝对喜欢它。

演示地址

Gameboy(完整CSS) (Gameboy (full CSS))

(由heero) ((by heero))

I've seen a lot of construction from nothing style animations lately, but this one blows all the others away. There is a great deal of nostalgia for me with the subject matter, and the fluid building of each part looks amazing.

最近，我从无样式的动画中看到了很多构造，但是这个使所有其他动画都消失了。 我对主题有很多怀旧之情，每个部分的流畅构造看起来都很棒。

演示地址

有点逼真的文字 (Kinda Realistic Text)

(卢卡斯·贝伯(Lucas Bebber)) ((by Lucas Bebber))

Every once in a while I am genuinely surprised by what can be done with front end web tech, and this is one of those times. This is the only demo on my list that doesn't have any animation, and that's saying something. I assumed this was a background image when I first saw it. The realism Lucas achieved with this pen is insane, enjoy!

偶尔我会对前端网络技术可以完成的工作感到真正的惊讶，这是其中一次。 这是我列表中唯一没有动画的演示，这是在说些什么。 我第一次看时以为是背景图片。 卢卡斯用这支笔实现的逼真的疯狂，尽情享受吧！

演示地址

翻译自: https://davidwalsh.name/jack-rugiles-favorite-codepen-demos

audio jack