Last active
December 28, 2023 11:23
-
-
Save noahub/83733fae847d94e17e9835d5d4419109 to your computer and use it in GitHub Desktop.
Add Confetti on Form Submission
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
$(document).ready(function(){$('#ubpoverlay-overlay').append('<canvas id="world"></canvas>'),function(){var d,f,g,k,l,m,n,o,p,q,s,t;g=350,d=[[85,71,106],[174,61,99],[219,56,83],[244,92,68],[248,182,70]],k=2*Math.PI,l=document.getElementById('world'),n=l.getContext('2d'),window.w=window.innerWidth,window.h=window.innerHeight,s=function(){return window.w=l.width=window.innerWidth,window.h=l.height=window.innerHeight},window.addEventListener('resize',s,!1),window.onload=function(){return setTimeout(s,0)},q=function(u,v){return(v-u)*Math.random()+u},o=function(u,v,z,A){return n.beginPath(),n.arc(u,v,z,0,k,!1),n.fillStyle=A,n.fill()},t=0.5,document.onmousemove=function(u){return t=u.pageX/w},window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(u){return window.setTimeout(u,1e3/60)}}(),f=function(){function u(){this.style=d[~~q(0,5)],this.rgb='rgba('+this.style[0]+','+this.style[1]+','+this.style[2],this.r=~~q(2,6),this.r2=2*this.r,this.replace()}return u.prototype.replace=function(){return this.opacity=0,this.dop=0.03*q(1,4),this.x=q(-this.r2,w-this.r2),this.y=q(-20,h-this.r2),this.xmax=w-this.r,this.ymax=h-this.r,this.vx=q(0,2)+8*t-5,this.vy=0.7*this.r+q(-1,1)},u.prototype.draw=function(){var v;return this.x+=this.vx,this.y+=this.vy,this.opacity+=this.dop,1<this.opacity&&(this.opacity=1,this.dop*=-1),(0>this.opacity||this.y>this.ymax)&&this.replace(),0<(v=this.x)&&v<this.xmax||(this.x=(this.x+this.xmax)%this.xmax),o(~~this.x,~~this.y,this.r,this.rgb+','+this.opacity+')')},u}(),m=function(){var u,v,z;for(z=[],p=u=1,v=g;1<=v?u<=v:u>=v;p=1<=v?++u:--u)z.push(new f);return z}(),window.step=function(){var u,v,z,A;for(requestAnimationFrame(step),n.clearRect(0,0,w,h),A=[],(v=0,z=m.length);v<z;v++)u=m[v],A.push(u.draw());return A},step()}.call(this)}); | |
//Based on work by: https://codepen.io/susan/ | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
@keyframes confetti-slow { | |
0% { | |
transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); | |
} | |
100% { | |
transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg); | |
} | |
} | |
@keyframes confetti-medium { | |
0% { | |
transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); | |
} | |
100% { | |
transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); | |
} | |
} | |
@keyframes confetti-fast { | |
0% { | |
transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); | |
} | |
100% { | |
transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); | |
} | |
} | |
.container { | |
width: 100vw; | |
height: 100vh; | |
background: #f0f0f0; | |
} | |
.confetti-container { | |
perspective: 700px; | |
position: absolute; | |
overflow: hidden; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
.confetti { | |
position: absolute; | |
z-index: 1; | |
top: -10px; | |
border-radius: 0%; | |
} | |
.confetti--animation-slow { | |
animation: confetti-slow 2.25s linear 1 forwards; | |
} | |
.confetti--animation-medium { | |
animation: confetti-medium 1.75s linear 1 forwards; | |
} | |
.confetti--animation-fast { | |
animation: confetti-fast 1.25s linear 1 forwards; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Cool effect. Might be useful one day... Thanks.