制作五彩纸屑转场动效_让它下雨五彩纸屑不要担心混乱

制作五彩纸屑转场动效

I have created a new app called InkTemplate — a service creating custom printable table cards, place cards, menus, etc for any event, birthday, or wedding. You simply bring your guest list and InkTemplate provides over 150 designs, fonts, and colors for you to select. I wanted to center the design around the festive part of preparing for guests and got inspiration from one of the designs with confetti. I wanted to add some colors and fun to the page and confetti it was!

我创建了一个名为InkTemplate的新应用程序-该服务为任何事件，生日或婚礼创建自定义可打印的桌卡，位置卡，菜单等。 只需带上您的来宾列表，InkTemplate即可提供150多种设计，字体和颜色供您选择。 我想将设计集中在为客人做准备的喜庆部分上，并从其中一种五彩纸屑设计中获得灵感。 我想在页面和五彩纸屑上添加一些颜色和乐趣！

Do you like to add some confetti as well?

您还想添加一些纸屑吗？

💻让我们做一些编码 (👩‍💻 Let's do some coding)

Firstly, we need to install react-confetti using npm or yarn:

首先，我们需要使用npm或yarn安装react- npm ：

$ npm install react-confetti$ yarn add react-confetti

A splash screen is a full-screen cover that you can use for example while waiting for communication with an API.

初始屏幕是全屏封面，例如在等待与API通信时可以使用。

You may want to consider having your splash screen for some seconds to not only have it splash without any confetti to show. Since the splash screen is a design element as much as the waiting screen, you can add a timer if you like.

您可能需要考虑使启动屏幕显示几秒钟，以使其不显示任何五彩纸屑而启动。 由于启动屏幕和等待屏幕一样是设计元素，因此您可以根据需要添加计时器。

🎉瞧！ (🎉 Voila!)

You now have your own confetti splash screen.

您现在拥有了自己的五彩纸屑初始屏幕。

react-confetti have many parameters you can change like the gravity (how fast/slow the confetti will fall), the opacity and colors of the confetti, and many more. Have a look at the documentation for all confetti props.

react-五彩纸屑有很多参数可以更改，例如重力(五彩纸屑下降的速度/速度)，五彩纸屑的不透明度和颜色等等。 查看所有五彩纸屑道具的文档 。

Happy coding 👩‍💻

快乐编码👩‍👩

普通英语JavaScript (JavaScript In Plain English)

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

喜欢这篇文章吗？ 如果是这样，请订阅我们的YouTube频道解码，以获得更多类似的内容！

翻译自: https://medium.com/javascript-in-plain-english/lets-make-it-rain-confetti-don-t-worry-about-the-mess-a492ecb4a6b8

制作五彩纸屑转场动效