Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Help me just get the Confetti from this Pen

Recommended Posts

Hi there,


I have found a Confetti Cannon here



I want to just take the confetti out and remove the cannon etc :) So that the confetti only will be falling... and constantly!


Or if you have another way in which I could use different code for the confetti that would be great too.



Share this post

Link to post
Share on other sites

Did somebody say confetti cannon?


See the Pen RyaJmj by PointC (@PointC) on CodePen


I'd recommend going with something like what @OSUblake posted above. Simple and easy. Happy tweening. :)


  • Like 3

Share this post

Link to post
Share on other sites

Hey guys,


Thanks very much for all the prompt replies and information!!

I reeeeealllllyyyy want something that looks a lot like confetti!! 


In the code that I linked, the squares are all really nice sizes and they feel so random! Any chance someone has something more like this?

The ones you guys have linked are great! but their animations feel more like snow falling rather than confetti.



Share this post

Link to post
Share on other sites

Use the same technique as above but use a different shape. It's easy to change ? let us know if you run into issues.

Share this post

Link to post
Share on other sites
5 hours ago, OSUblake said:

And this one.






Thank you very much for this! :)

Share this post

Link to post
Share on other sites

Hey @OSUblake I was wondering if you knew of anyway to adding a front and back to those leaves! like one side could be darker color or something :)

I tried adding

Div.innerHTML = '<div class="flip-card-inner"><div class="flip-card-front"></div><div class="flip-card-back"></div></div>';

to the loop, and this

dot{width:10px;height:10px;position:absolute;z-index: 300;background-color: transparent;}
.flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.8s;transform-style: preserve-3d;}
.dot .flip-card-front{position: absolute;width: 100%;height: 100%;backface-visibility: hidden;background: url(confetti.png);background-size: 100% 100%;background-color: red;}
.dot .flip-card-back{position: absolute;width: 100%;height: 100%;backface-visibility: hidden;background: url(confetti-3.png);background-size: 100% 100%;background-color: black;transform: rotateY(180deg);}
#confetti {width:300px; height:250px;z-index: 300;position: absolute; opacity: 0;}

to the css to make a front and back but no luck :(


something like this re: flip card

See the Pen cdFKH by anon (@anon) on CodePen




Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.